Build a Responsive Website Using HTML & SASS/SCSS Tutorial

Learn how to build a simple responsive website homepage using HTML and SASS/SCSS. Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. Essentially CSS with superpowers.

If you want to follow me along my coding journey, be sure to subscribe :)

Timeline:
0:00 What we are building
1:06 Creating our Project files
4:40 Adding Navbar Code
7:56 Adding Hero Section Code
9:52 Adding SASS styles
24:58 Adding Hero Section styles

Source Code

HTML, CSS, and Javascript Website Tutorial

Alternative HTML, CSS and JS Website

Feel free to refactor my code and let me know any ways to improve it

[prashantmishra]

Brian, thanks for the vid. I am the guy contacted you on twitter with a UI mockup. Thanks for helping me out.

[simondijkman]

I love no nonsense 'just get started' videos. Well done!

[onigiri]

Hi Brian! I'm a subscriber in South Korea. I'm always studying by watching your videos. Your videos are more valuable and richer than any of the videos I have ever bought. You don't know how much I appreciate it. I don't even comment on Korean Youtubers, but I have no choice but to comment on your videos

[mdsuzayethossan]

I am Bangladeshi. My mother tongue is Bengali. I'm not good at English. I don't understand your language 100%. But the video was not difficult for me to understand. Thank you very much.

[dhanushp]

I love the design you choose for building website. Keep it going❤️

[Pikachulover]

I appreciate the work you put in, cheers!

[PavanKumar-vkxb]

its really simple and awesome for beginners ..thank you so much

💚

[HriCode]

Thank you for the wonderful video. It would be a pleasure if you create a crash course of javascript!

[ktk]

I love these videos. It would also be good if you show us building websites like these using CSS frameworks like Tailwind or something...

[urosristanovic]

Thank you, great tutorial! You type very fast, which is cool, once I just copy/paste, second time I listen to you. When is coming the rest of site? :)

[IdaMariaASMR]

awesome!! BUT, how do you make a dropdown menu from that icon on scss?

[jikochi]

Thanks for the great video! I enlightened when I see media query mixins. Keep up!

[unchart_d]

Yes make it as a full website, i cant say no to your tutorials man they are helpful and easy to follow bro. Dont forget to make SaaS frontEnd not SASS😂

[afridimatin]

Thank you! Was really struggling with going live with sass. I was using gulp watch for a while, but it's kind of complicated.

[anab]

Thank you for making such great videos :)

[iqbalalisofyan]

WoW.. Amazing tutorial broo.., but i don't know, intentionally or not, the burger button navbar does not work when the display is mobile and the navigation bar cannot be opened. But never mind, I still really, really appreciate the tutorial you made ..

[visions]

FLAWLESS VICTORY!! well done. a bit quick for a newbie but nonetheless very nice.

[motoboy]

For the hamburger menu to work you need additional JS right?

[shosii]

When i try editting the navbar in scss, it wont work for some reason only if i do it in style.css

[jdlopez]

i dont have watch sass button in vs code. any other way of accomplishing the same?