Build a Responsive Website Using HTML & SASS/SCSS Tutorial

[@prashantmishra5691]

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

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

[@FilipCodes]

Would love to see more of react :)

[@briandesign]

plan on dropping more vids soon!

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

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

[@HriCode]

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

[@simondijkman5022]

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

[@louisdaza1923]

I appreciate the work you put in, cheers!

[@briandesign]

Thanks Louis!

[@PavanKumar-vk2xb]

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

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

[@shosii9737]

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

[@IdaMariaBaek]

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

[@HungryHeart101]

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

[@jdlopez131]

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

[@vishwanath-ts]

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

[@briandesign]

sure I'll add it to my list

[@chandrapalyadav6863]

your all react video is awesome.. 👌

[@briandesign]

Glad you like them!

[@techprogramming5754]

Can you please make complete portfolio website

[@nahlasecret]

Where will i find the picturs pleas

[@atozz8469]

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

[@nebulastar2557]

Thank u so much u save my life

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

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

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

[@28visions]

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

[@khoanguyenvoanh241]

u get 1 more sub :)) congras

[@motoboy6666]

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

[@nagaraj6126]

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

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

[@ayoubbouyebla9193]

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

[@deshmukhshantanu2685]

Very nice vidoe keep it up

[@briandesign]

Thanks

[@mspappu4024]

thanks bro

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

[@prabhathsannasooriya]

realy useful.Thank you very mutch

[@hasanhuseyintoraman]

thnx King

[@DoUSuggon]

Can you do a beginner-friendly video of SCSS?

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

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

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

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

[@punith9585]

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

[@kennedynelson2637]

bro please make a video on next js

[@anab9373]

Thank you for making such great videos :)

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

[@unchart_d]

pls lets make it a full site.

[@amoozuu5935]

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

[@solosdev6946]

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

[@briandesign]

yeah

[@CANIHAZURDREAMSPLS]

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

[@briandesign]

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

[@hiphiphorhayy]

11:14

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

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

[@alainroos5383]

Great tutorial ! Thank you !

[@yakshitjain3048]

Would wait for gatsby version of this

[@briandesign]

yeah I got some plans for making gatsby sites soon

[@jikochi]

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

[@briandesign]

Thanks Ozkan!

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

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

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

[@StanleyBateswar]

Great tutorial thanks man

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

[@althafabbas5385]

superb...👌👌

[@chandrapalyadav6863]

awesome video bro.. keep up

[@briandesign]

Thanks a ton

[@DevsLikeUs]

Nice !

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

[@jonquino755]

awesome thank bro great work

[@briandesign]

Thanks Jon!

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

i love this and your content

[@briandesign]

Thanks!

[@azula9714]

Thanks for the video man

[@briandesign]

No problem!

[@rizqisetiaji7]

Nice tutorial brian 👍

[@briandesign]

Thanks 👍

[@techjavaid6177]

Awesome man

[@briandesign]

Thanks!

[@justb3m184]

Thanks Brian.

[@briandesign]

You're welcome!

[@EvgenyBobkin]

great, keep it up!

[@briandesign]

Thanks Evgeny!

[@digigoliath]

Cool!!! TQVM!

[@briandesign]

Thanks!

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

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