HTML CSS and Javascript Website with Smooth Scroll

Learn how I built a website using HTML, CSS, and Javascript. The site is fully responsive and has a smooth scroll effect that highlights the navbar menu based on your position scrolled. Feel free to refactor the code and let me know if there is anything I can update to improve this website.

You can access the complete source code down below.

I will utilize CSS Grid and CSS Flexbox to code this website. If you are already comfortable with CSS, then this tutorial should be easy to follow along.

In order to create a smooth scroll effect, we will use Javascript. You don't have to have much JS knowledge to follow along. The JS section is fairly small and consist of if and else statements.

If you run into any errors, double check your spelling in your code to make sure you didn't make a typo anywhere. If you still can't figure out the issue, then you can reference my source code below.

I recommend you install the live server extension for this project. Live server allows you to have hot reloading, so whenever you make a change to your code, it will automatically update in the browser.

Also, I am using VS Code as my code editor for this project. If you want to reduce the chances of running into any errors, I recommend you use VS Code. If you prefer to use a different editor, then you might not have the same experience.

I created a full two hour tutorial showing step by step how I created everything.

Watch the full tutorial on Youtube here

Also, I'm documenting everything I'm learning and the projects I'm building on my Youtube channel. If you want to follow me along my coding journey, be sure to subscribe here