Build a Responsive Website Using HTML and SASS

Learn how to build a simple responsive website homepage using HTML and SASS/SCSS. We will create the navbar and hero section in this tutorial.

I've included the source code for this project down below.

Sass is short for syntactically awesome style sheets. Sass has two syntaxes. The original one is just called Sass, and then there's the newer version called SCSS. I will be using SCSS for my tutorial.

Here is an example of SCSS below.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
  }
}

As you can see, you can nest CSS selectors that follow the same hierarchy of your HTML code. There are plenty of other features that you can utilize that I will show in my video tutorial.

I really enjoy using SASS over regular CSS because there are so many benefits that you wouldn't get when using regular CSS. SASS converts your regular CSS to work on additional browsers as well.

I created a full step by step tutorial showing exactly how I built this website.

You will need to install the Live Sass Compiler extension in order to follow along with this tutorial. Also, you can install live server as well in order to enable hot reloading, so whenever you make changes to your code, it automatically updates in the browser.

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