Ajay Yadav Profile picture
โ€ข Technical Writer @Talent_500 โ€ข No-Code AI Tools โ€ข Mission on Simplified Web โ€ข See my passion on YT ๐Ÿ’š โ€ข DM for collab or mail ๐Ÿ“ฉ: partnership.aj@gmail.com

Feb 24, 2022, 16 tweets

๐Ÿ’š 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!๐Ÿงต๐Ÿ‘‡

๐Ÿ“Œ 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.

๐Ÿ“Œ First of all, we have to add an ID in the section of the webpage.

๐Ÿ‘€ See the image!

โ†’ Then we have to add that ID selector as the HREF value of the particular links of the header.

๐Ÿ‘€ See the 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.

๐Ÿ“Œ 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.

2. Click on the "site" tab.

3. Click on the "Add new site"

โ†’ Now choose "deploy manually"

4. Drag your file of the website on netlify.

โ†’ I have organized all files of the website like this image.

5. Now your website will be uploading... on netlify.

โ†’ It can take some time.

6. You can change the domain of your website.

โ†’ Click on "domain setting"

7. Click on "edit site name"

BOOM ๐Ÿ’ฅ

๐Ÿคฉ 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.

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling