Ajay Yadav 🎯 Profile picture
Feb 24 β€’ 16 tweets β€’ 5 min read
πŸ’š Day 1️⃣0️⃣0️⃣ / 1️⃣0️⃣0️⃣ Master in CSS Design series!

πŸ’₯ Today we going to host our website on @Netlify

β†’ Implement smooth scrolling using just CSS.

β†’ Implement nav links with a particular section.

#100DaysOfCode
#CodeNewbie
#webdev

Let me explain!πŸ§΅πŸ‘‡ Image
πŸ“Œ Remember there are 3 sections in our existing project.

β†’ Hero section
β†’ Project section
β†’ Footer section

β›” When we click on header links then I want to access these particular sections. Image
πŸ“Œ First of all, we have to add an ID in the section of the webpage.

πŸ‘€ See the image! Image
β†’ Then we have to add that ID selector as the HREF value of the particular links of the header.

πŸ‘€ See the image! Image
β†’ Now for smooth scrolling, we have to add the "scroll-behavior" property in the root element.

β†’ Then the scrolling behavior of your website will be smooth. Image
πŸ“Œ Now we are going to host our website on netlify.

β†’ This is free to use.

β†’ You can host your website on netlify in simple steps.

1. First of all, we have to create an account on netlify. Image
2. Click on the "site" tab. Image
3. Click on the "Add new site"

β†’ Now choose "deploy manually" Image
4. Drag your file of the website on netlify. Image
β†’ I have organized all files of the website like this image. Image
5. Now your website will be uploading... on netlify.

β†’ It can take some time. Image
6. You can change the domain of your website.

β†’ Click on "domain setting" Image
7. Click on "edit site name"

BOOM πŸ’₯ Image
🀩 I will share my experience of this amazing journey in the upcoming thread.

Thank you so much!πŸ’šπŸ’š
If you like this make sure to:

1. Follow me @ATechAjay

2. Retweet the first tweet.

3. Turn on the notification to never miss these amazing tweets.

Thank you so much for staying to the end of this thread.

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Ajay Yadav 🎯

Ajay Yadav 🎯 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @ATechAjay

Feb 27
πŸ“Œ Do you want to learn

β†’ What is a box-shadow?

β†’ How to use box-shadow?

β†’ What is X offset?

β†’ What is Y offset?

β†’ Multiple values with box-shadow?

β›” So, this thread is for you!

πŸ’š Learn step by step with me :)

#webdev

A Thread 🧡 ↓ Image
❓ First of all, we have to know, what is the syntax of the box-shadow?

πŸ“Œ 𝒃𝒐𝒙-π’”π’‰π’‚π’…π’π’˜ : 𝑿-𝒐𝒇𝒇𝒔𝒆𝒕 𝒀-𝒐𝒇𝒇𝒔𝒆𝒕 𝒃𝒍𝒖𝒓 𝒄𝒐𝒍𝒐𝒓;
πŸ“Œ 𝑿-𝒐𝒇𝒇𝒔𝒆𝒕

β†’ Distance in the X-axis from the left edge of the box.

πŸ‘€ See the "white" part! Image
Read 11 tweets
Feb 26
πŸ’šDemanded ThreadπŸ’š

β†’ How to use SVG files in my projects?

β†’ How to copy SVG code?

β†’ From where to copy SVG code?

πŸ“Œ Learn step by step with me!

A ThreadπŸ§΅πŸ‘‡ Image
πŸ“Œ Suppose this is the SVG image.

β†’ And this image you want to use in your projects. Image
β†’ Then simple we have to right-click on that SVG image.

β†’ Click on inspect. Image
Read 8 tweets
Feb 25
πŸŽ‰ Celebration + Experience of 100 Days Of Coding Challenge.

β†’ 2nd time, I have completed this achievement!

πŸ€”Why should you take a challenge like #100DaysOfCode?

β†’ You will get a GitHub Repo of our series, as well as a Twitter moment.

πŸ“Œ Studies = TB patients

A ThreadπŸ§΅πŸ‘‡ Image
πŸ“Œ Why should you take a challenge like #100DaysOfCode?

β†’ I have heard that if a TB patient discontinues his medicine, then he has to start from zero.

β†’ Exactly the same happens in studies.

β†’ Read less but read every day.

β†’ This is the "medicine" of your success.
πŸ“Œ Some key points keep in mind during this marathon.

β†’ Try to learn a topic every day.

β†’ Try to explain each and everything.

β†’ Try to explain with simple English words.

β†’ Try to learn a topic from multiple sources.

β†’ Try to answer the people on that topic.
Read 7 tweets
Feb 25
πŸ”₯ The only thread on JavaScript resources you need to follow!

πŸ‘‰ If you are a beginner then you should follow these resources.

πŸ“Œ My rule:

πŸ‘‰ Follow minimum resources and learn from multiple resources.

A ThreadπŸ§΅πŸ‘‡ Image
πŸ€” What is my rule "Follow minimum resources and learn from multiple resources" ❓❓

Suppose

😎 I want to learn functions in javascript,

πŸ‘‰ Then first of all I will learn from the minimum resources.

πŸ‘‰ It can be udemy paid courses, freecodecamp courses, etc
πŸ‘‰ After that, I will type the "function in javascript" on google and try to learn those topics from the top 2 or 3 websites that are recommended by google search.

πŸ‘‰ It can be MDN, W3school, G4G, etc
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(