Build a Responsive Website Using HTML & SASS/SCSS Tutorial

[@simondijkman5022]

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

[@prashantmishra5691]

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

[@onigiri324]

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 KZbinrs, but I have no choice but to comment on your videos

[@briandesign]

Thanks! I appreciate it! awesome to see others from all over the world

[@dhanushp007]

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

[@briandesign]

Thanks Dhanush!

[@ayagafar4251]

@@briandesign what is the name of this theme

[@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.

[@HriCode]

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

[@FilipCodes]

Would love to see more of react :)

[@briandesign]

plan on dropping more vids soon!

[@louisdaza1923]

I appreciate the work you put in, cheers!

[@briandesign]

Thanks Louis!

[@8ktk]

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

[@Антон-ю2п6е]

Pay attention! Do not use extension Live Sass like at this video! It is not maintaining. Use fork of Glenn

[@PavanKumar-vk2xb]

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

[@iqbalalisofyan8739]

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 ..

[@chandrapalyadav6863]

your all react video is awesome.. 👌

[@briandesign]

Glad you like them!

[@jikochi]

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

[@briandesign]

Thanks Ozkan!

[@deshmukhshantanu2685]

Very nice vidoe keep it up

[@briandesign]

Thanks

[@afridimatin9701]

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

[@afridimatin9701]

BTW... The extension is gone and there are no other alternatives.

[@IdaMariaBaek]

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

[@shosii9737]

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

[@techprogramming5754]

Can you please make complete portfolio website

[@alainroos5383]

Great tutorial ! Thank you !

[@jdlopez131]

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

[@28visions]

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

[@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😂

[@nebulastar2557]

Thank u so much u save my life

[@anab9373]

Thank you for making such great videos :)

[@iamsanish10]

Can you do a beginner-friendly video of SCSS?

[@atozz8469]

Hi, how if my html code is like this : Sign Up How to direct to the button in sass ?

[@yakshitjain3048]

Would wait for gatsby version of this

[@briandesign]

yeah I got some plans for making gatsby sites soon

[@vishwanath-ts]

Please make a video on portfolio website using Html5 and CSS, please 🙏🏻🙏🏻

[@briandesign]

sure I'll add it to my list

[@khoanguyenvoanh241]

u get 1 more sub :)) congras

[@stevehunt525]

Just to let you know , Liver Server is a dependency of Live Sass Compiler, so you need both of them.

[@briandesign]

ah okay! thanks for sharing

[@amoozuu5935]

You are tooo awesome ❤️❤️❤️❤️

[@prabhathsannasooriya]

realy useful.Thank you very mutch

[@StanleyBateswar]

Great tutorial thanks man

[@manume181]

Hello Brian I have uploaded the .scss files (navbar, colors, etc) I have imported into the main.css file, but they do not compile; and an error appears in the terminal, suddenly you know what it can be?

[@urosristanovic5643]

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? :)

[@briandesign]

I plan on making a full site in the near future

[@StanleyBateswar]

@@briandesign When can we expect a full site, im looking forward to the full site

[@motoboy6666]

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

[@rizqisetiaji7]

Nice tutorial brian 👍

[@briandesign]

Thanks 👍

[@nahlasecret]

Where will i find the picturs pleas

[@venallanaj5927]

Hello thanks for this video I follow your steps 1.click watch Sass, 2.create automatic file style.css and style.css.map in folder style, but when i wrote the property in file style.scss like ( display: flex; justify-content: center;) only two this property display me automatically in file style.css/ not other like display: -webkit-box; display: -ms-flexbox; -webkit-box-pack: center; -ms-flex-pack: center; I will write manually. Way doesn't display me automatically? Thanks for your time?

[@althafabbas5385]

superb...👌👌

[@justb3m184]

Thanks Brian.

[@briandesign]

You're welcome!

[@HungryHeart101]

Hey is it cool if you can create some dynamic dashboard using ReactJS?

[@chandrapalyadav6863]

awesome video bro.. keep up

[@briandesign]

Thanks a ton

[@okidokiyowyow356]

Dude can you do website layouts? You have an amazing video and great websites even fot tutorial.

[@briandesign]

like templates? not sure what you're asking

[@فلسطينيوافتخر-و4ك]

i love this and your content

[@briandesign]

Thanks!

[@punith9585]

Great Content . Could you please do full-stack react application ?

[@DanteMishima]

I'm here for this! Hey Brian, I've wondered is there a reason you define your classes like hero__section ? I've seen others go hero-section

[@briandesign]

you can check out BEM naming convention, but at the end of the day it's just preference. As long as you understand it and others can read it, then you should be good

[@dhanushp007]

It's BEM naming, it's used when you are working as a team so that other dev's can understand the elements easily. You can read more about it at getbem.com/introduction/

[@DanteMishima]

@@briandesign Alright, I see. Let me go have a look at that

[@nagaraj6126]

Please some one tell me is this project same as real time (mnc company project) project or not.

[@azula9714]

Thanks for the video man

[@briandesign]

No problem!

[@techjavaid6177]

Awesome man

[@briandesign]

Thanks!

[@jonquino755]

awesome thank bro great work

[@briandesign]

Thanks Jon!

[@ronsivan93]

When I compile `h1 { display: flex; justify-content: center; }` I get the same in styles.css, how can I fix this? I'm using WebStorm

[@briandesign]

I'm not sure what you're asking. I only have vscode so I wouldn't know if you're using a different editor

[@ronsivan93]

@@briandesign Look at 3:49, it automatically adds a bunch of lines to the .css file for cross platforms compatibility, and in my case, both .scss and .css files stay the same. I tried compiling it manually in Terminal but same happens there (which means Webstorm isn't the problem), it simply doesn't add those extra lines

[@briandesign]

do you have the extensions installed that I showed?

[@ronsivan93]

@@briandesign I have Live Edit extension and Sass extension + SCSS File Watcher in WebStorm which are equivalent to Live Server and Live Sass Compiler in VSCode. I am starting to think maybe it's because we are using different Sass versions, I'm using v1.29.0

[@digigoliath]

Cool!!! TQVM!

[@briandesign]

Thanks!

[@mohammadrs5757]

can someone please explain this part of the code padding: 0.5rem calc((100vw - 1200px) / 2); I know what is calc I just don't understand why -1200px and after that it divided to 2

[@briandesign]

it's just another way to set left and right padding without having to wrap everything with another div and add a max-width. It checks the width of the screen and then subtracts 1200px and then divides that value by 2, so each side has equal spacing. If you inspect the page you'll see the calculation working when you hover over the padding sections

[@azula9714]

Just a suggestion. Can u do a fully react app with the backend part also? Like a website for a store.. Or even a blog may be with post creation like stuff. as I said just a suggestion

[@briandesign]

if you wanna make a blog it's easier with gatsby. That's what I used to build mine. I have plans in the future to make a tutorial

[@azula9714]

@@briandesign waiting 😀

[@shapes8198]

Hey Brian I'm trying to insert an svg but when it comes up on the live server it's way too small even though I haven't changed any of the css or scss.

[@briandesign]

are you able to change the size or did you wrap everything correctly?

[@shapes8198]

@@briandesign I changed the height and width in the .hero__container- -img{ to 300% and it’s responsive but a little off in comparison to the original image. Just incase, I downloaded the source code and tried changing the image there as well and it doesn’t line up as well as the image provided. Even though I replaced it with another the with identical dimensions.

[@briandesign]

@@shapes8198 you might have to add custom css to fit other sized images

[@shapes8198]

@@briandesign ah, I see thank you!

[@graindafrique3379]

The video is very ok, but when u click the bars the menus items don't show

[@briandesign]

When you inspect the page are they showing in the elements tab?

[@mariuszgolik7040]

Great Job Brian! It looks like my request has been granted...Thanks very Much ! I have an idea, maybe a surfboard rental full responsive website with Sass JavaScript and 3d animations? It will be Awesome !!! Best regards from Europe !!!

[@briandesign]

for sure! if you got any references to a design feel free to comment it so I can check it out! I'm always looking at new design ideas

[@mariuszgolik7040]

@@briandesign When it comes to ideas, I have them a lot. You can count on me ! Worse with skills;) Peace! and keep moving forward! You're doing great Job .

[@EvgenyBobkin]

great, keep it up!

[@briandesign]

Thanks Evgeny!

[@kennedynelson2637]

bro please make a video on next js

[@dominicshib3276]

Brian is there a site similar to pexels.com but for graphics like the alien graphic?

[@briandesign]

just undraw, but it's only illustrations

[@dominicshib3276]

@@briandesign much appreciated Brian! my extension keeps crashing vscode when i create partials in sass, it's crazy right?

[@briandesign]

@@dominicshib3276 does that happen all the time? or if you restart vscode it fixes it?

[@solosdev6946]

hey brother brian can be possible with reactjs and sass at the same time?

[@briandesign]

yeah

[@DevsLikeUs]

Nice !

[@CANIHAZURDREAMSPLS]

What situation would u use @extend for...?

[@briandesign]

check their official docs to see use cases sass-lang.com/documentation/at-rules/extend

[@mspappu4024]

thanks bro

[@unchart_d]

pls lets make it a full site.

[@wastedmama]

brother why u not tell about click on bars and show menu ? why??

[@briandesign]

I've made a bunch of website videos already showing that, so you can check the longer vids on my page if you wanna see how I did it

[@wastedmama]

@@briandesign any link of that video which help me about this problem

[@hasanhuseyintoraman]

thnx King

[@_moxy9905]

But that's only a landing page. Please do other sections like a about, services, contact, foter, etc...

[@briandesign]

yeah I'll make one in the future!

[@_moxy9905]

@@briandesign keep going

[@dominicshib3276]

@@briandesign still these are great projects for time-short people

[@ayoubbouyebla9193]

Why u like to complicate the class names with ___ and --

[@Akosiyawin]

I came here because your react video for beginners are hard to understand for me, because of styled components. Im not good at Designing front end 😁

[@hiphiphorhayy]

11:14