Build a responsive website with HTML & CSS | Part Four: The navigation

[@hypeengineoverload]

What we learnt from this video 1. A lot of css 2. Bob Chris was there

[@janitha001]

😆

[@SwillMith16]

Every time I’ve tried to build a site it’s been really amateur and this tutorial series is the first I’ve found that actually shows how to structure it in a professional way. Building a fully functioning site by doing just enough to make things work is a nightmare but this series just blows everything out the water. Massive appreciation

[@jhunterhkr]

"Desktop first" for the navigation makes so much sense! That and the font-weight-number-based naming convention are my biggest takeaways from this, cheers Kevin!

[@MarchOnward]

This series is awesome, I learned so much new stuff thanks Kevin for explaining all the details :) I really appreciate it!

[@techtipsuk]

Well said

[@soulhazetv]

@10:00 your thinking process on how to utilize your knowledge helps us a lot. It shows us how to think while trying to solve a design idea. AWESOME!

[@lilynn7777]

I just fnished my 4-month bootcamp and i am trying to expand my knowledge by building projects and learn more new techniques. I have built so far a bunch of projects, such as, portofolios, travelling, monuments, books land pages, weather applications both with java and react and it feels like i am learning CSS all over again. Your approaches & techniques are so much different and more elegant from what i was tought. It's really magnificent how clean and organised your code is and at the same time, i keep rewinding the videos in order to understand completely the way you are building this project 😅. Wow, i didn't expect to learn so many new stuff and the guide is not even over yet. Thanks a lot, i cannot wait to reach the end of it.

[@andrewayad]

I thought I was a bad developer because I took almost the same amount of to time to come with a similar solution. Thank you! Now I realised that it was Okay for me to take that much of time.

[@mikkolukas]

13:30 A lot of people misunderstand the "mobile first". It is not about that you need to code for mobile first and *THEN* modify to fit broader views. It is that you design for mobile first, and think about mobile when coding, so you don't paint yourself into a corner. You do that because making a design work on mobile is a lot harder (because of the small screen estate), so making sure you have a concept that works there, solves a lot of headaches down the road.

[@games_are_good]

I think if elements are to be removed on smaller screens then the design probably shouldn’t be coded for mobile-first to prevent adding extra style rules and not have too many lines inside media queries

[@mikkolukas]

@@games_are_good mobile first is not because of making cleaner code - it is because it is difficult to actually make room for showing everything important on a small screen. code clarity comes second to that

[@games_are_good]

@@mikkolukas unless the design was based for mobile users first then from my experience well written desktop size CSS doesn’t require much additional rules to be responsive. This was something I wanted to find out after learning some mobile-first is when to use it then ran into issues with some designs, although it can be done cleanly and is up to preference for solo projects

[@mikkolukas]

@@games_are_good I completely agree, but the key here is: "well-written". The mobile-first approach is a helper to at lest make sure it is well-written enough to not be a problem in that context.

[@games_are_good]

@@mikkolukas I’ve built different projects where it seemed mobile or desktop-first would’ve been better but can depend on preference and setup. An article by Patrick Clancey discusses the possible disadvantages of mobile-first those being more complexity, higher CSS specificity, more regression testing & browser can’t prioritize CSS downloads

[@TinyMaths]

That linear gradient overlay on the mobile view when the navigation menu is open, that broke my brain. Trying to get my head around CSS recently and realize that on the many projects I've made this year (focusing mainly on JavaScript) I could have made things a lot cleaner and easier to manipulate, in a modular way, if I had used CSS variables. You live and learn. Anyway, for some reason using primary header for the overlay wouldn't work for me so I tried using the nav-wrapper element and that worked. These tutorials have been a real education.

[@Killyspudful]

Excellent work there from Mini-Powell in the first few seconds...

[@marado_6702]

On the JavaScript side (23:24) you can one line it like this: navToggle.setAttribute("aria-expanded", !primaryNav.hasAttribute("data-visible")). The hasAttribute method returns true or false and the exclamation point (!) makes what's true, false, and vice-versa, and can be ommited if you put this line below the toggleAttribute one (I think it's obvious why). I'm learning programming so if I need to be corrected please correct me :) Good video

[@crunkdunt8398]

This vid has really inspired me. I'm loving this code along but this video gave me the first opportunity ity I've had to pause the video and fix the gradient navigation background differently to you without modifying the hamburger, before following your solution! I've never done that, so big happy moment haha You've helped me unlock some knowledge and have given me a good few 'ah hah!' Moments so I thank you for that!

[@amjster]

Am enjoying following this series. My own thought is scrolling should be disabled when you click on the menu (at 42:11) because a user would click to open the menu to interact with it, and not click to open the menu and scroll the content beneath it and interact with that. Other than that, this is a great series for learning and well done and many thanks Kevin for sharing....

[@mikkolukas]

15:34 Oh, I was *SO* hoping that you had some slick CSS trick up your sleeve for doing this. No critique, JavaScript is fine, but damn it could have been such a power move 😁 Thanks for some first class content! 🙂

[@1Andypro]

Agreed. I think in real world apps, this would be taken care of by a frontend framework like Svelte or React (Svelte's conditional class syntax is particularly nice for interactions like this). For HTML + CSS only, I think you'd just need to have a checkbox or radio form element to handle the state change.

[@dev__institute_official]

Well played Bob Chris

[@SoulStitch1111]

I'm more confused than I was at the beginning. I appreciate watching the thought process, trouble-shooting, but now I have no idea how to get there from here. I think I need to understand the hierarchy, from top to bottom, the benefits of styling the style.css in these clusters(groups), and why it is the best route.Thanks again for your time and hard work.

[@oluwaseunoyenuga6641]

I think i also got tired in this episode 😂😂😂 the most important thing is not to give up keep learning

[@natasdabsi1138]

same here confused

[@sungjincho1689]

Thanks Kevin! I learned a lot on this video, not only how to create a good nav, but also accesibility!!

[@alexsmart2612]

This video convinced me stay a backend engineer for life.

[@gerardoef]

Oh man! These videos had helped me to learn a lot of new stuff. Finally, I've found a great channel to learn css. Thank you!!

[@AshishVermaCS]

Lots of love for Bob & Chris ❤ Thanks for this tutorial Kevin

[@fabiocami2899]

Amazing work man. Thank you very much for this session of vids. Perfectly timed. Just got a project finish thanks to your guide! Much love

[@chhavimanichoubey9437]

ive learned great thing about mobile and desktop navigation today and was remembering that i was doing it all wrong after all these days.

[@silquor]

Great video! Btw: you forgot to switch the visibility of the icon-hamburger and icon-close when the menu is opened/closed.

[@KevinPowell]

Oh thanks! Will fix at one point :D

[@aleksandrtrofimov1447]

Amazing video. You explaining those things just great, thanks a lot!

[@neiltsakatsa]

I can bet my money on this guy that he probably read through the entire CSS Reference on MDN!!!!

[@games_are_good]

Gotta know where your tools or references are

[@naczelnypsycholog6296]

shouldn't that menu when is open push all the content down, below that menu, like in the design image example, instead of being on top of that content as you did Kevin? I think you did that wrong

[@taofeeqomotolani2311]

noticed it too

[@mityukov]

Not sure why you need to check "if it's currently visible". You're in the nav-hamburger's click handler - it only works as "showing". Then, there is going to be another handler for nav-close-button - and this one will work for hiding only

[@spooky063]

In general, on an open mobile menu, tabbing can only be done on the menu items while it is open and the escape key closes the menu. And when the menu is open, the scroll of the dom is not allowed so your shadow box is fine.

[@alejandrodinardo4804]

Nice, Kevin! I can't wait to watch the next video. Remember that we still need to replace the hamburger icon with the close icon when displaying the menu in mobile size.

[@vesna.simeunovic]

Is there a solution for that situation?

[@nalatherescue]

I misspelled 'primary' in - const primaryHeader = document.querySelector('.primary-header'); 4 hours later, I decided to track down my variable in all of its instances.......... at least I'm learning lol.

[@filou9442]

Hi guys, I would be interessted what Kevin is looking for 14:10. i can't really follow and would appriciate if someone could explain. cheers

[@AnuragSingh-ze1io]

Thanks for this awesome series. Getting to learn so much. Just one correction though - on hovering the nav list items the color of the items is not orange its more of a greyish. Thank you once again for these type of contents.

[@EddieCelis-pz6ou]

What awesome series?

[@jaAaAaA7777]

'bob chris was here' just made my day 🤣

[@user-mma173]

It was very painful for you to go JS route over the pure CSS for the modal overlay. The one can tell 😅 Thanks for your outstanding work. Keep it up.

[@AdamCanDoIt]

Hey Kevin, great video series! Quick question, why do you have two divs in the header? One is a container and the other is a nav-wrapper, but couldn't you just assign one div two classes? You can see the code at minute 10:29. I'd really appreciate a quick explanation, thanks!

[@rawnato]

hello my friend! I was a software engineer for 22 years and stopped for 6 years! Currently I decided to study a little to see how things are! in your opinion, if you were to make an application! would you use pure CSS? Would you use a frontend framework (vue, react) and if so, which one? I thank the attention

[@TheMultikillcod]

These data attributes make things really clean and give a better separation of concerns in my opinion. I am just trying to figure a way to toggle them cleanly using react ? Really interesting vid once again.

[@yakligian]

I'm loving this series! Thanks so much!

[@bpavanellic]

Kevin, there's a reason for why u dont use a extention like live-server or it's personal preference? If u said it in the previous videos im sorry, i probably left the information pass a way. Anyway, thank u so much for everthyng u do and your channel, love from Brasil.

[@adrianqx]

in the .visually-hidden @ 6:55 , would display: none work ?

[@itsgojoverfr]

LESS GOOOOOOOOOOOOOOO, as soon as i saw the notification i got hyped up. Seriously though Kevin, you are such a big help. I am a high school student learning web development so i can earn some cash through freelancing and you have been a life saver for me. Once i start earning i'll donate you to show you i grateful i am 🙏

[@2c-bee]

Great video. Definitely too advanced for a beginner though. I got through the first 3 videos with a solid understanding but am going to have to re-visit this project in the future.

[@MuhammadAhmedAshraf]

why did you unlisted the paper ripple video ??

[@mannixmd]

_Bob Chris was here_ needs to be added as a command and overlay on twitch

[@sweatic]

.primary-navigation[data-visible] ...where does [data-visible] come from?...how and why is it used? there's a lot of little stuff like this I wish was explained while using it and why its used?

[@tonybp]

I lost my job due to the pandemic and nobody will hire me because of my age so I've been studying web development and I plan to go freelance. I've been told by many developers that my best bet if I'm going to be a freelancer is to do Wordpress instead of doing websites from scratch, what's your opinion in this matter? Thanks.

[@Daniel-cc5ph]

Hi Kevin, working through your workshop... GREAT, thanks for that in dephth explanations! I get an error inside the JS: Konsole is telling me "Uncaught TypeError: navToggle is null" - any idea why? Thanks again and best regards from Germany Daniel

[@Daniel-cc5ph]

[SOLVED] For all of you, who encounter the same error: Put "defer" in your tag like so: (don't ask me why... google has some answers to this...) Daniel :)

[@enriquealverde82]

Thank you! I had the same problem!

[@peteremad5228]

hey kevin, I think it isn't a good user experience to scroll when the menu is open ..so we can simply toggle overflow hidden on the body ...what do you think about that?

[@sblanz]

What you're describing is one of the most head scratching issues for me with mobile menus. When I try to avoid background scrolling all kinds of weird stuff happens, especially when my mobile menu is long enough that it needs to be scrolled instead. I'd like to see this matter tread a little more in depth

[@userj-s2000]

Def taking the accessibility part

[@keeplearning5647]

i usually start with the desktop version then I do the media query but its interesting to start with mobile version the desktop ,I will try this and thanks so much :D

[@satheeshkumar-jt8nf]

Hey in your previous videos you told to use min-width media queries and think mobile first. But now why you have used max-width ??

[@Sebastian-zs8cp]

hi, it this from start too here you standard workflow or if you get other layout other workflow?

[@mikkolukas]

22:31 Pro tip for everyone: That ternary can be written *WAY* more effective this way: navToggle.setAttribute("aria-expanded", !primaryNav.hasAttribute("data-visible")); Yes, you replace the *WHOLE* ternary with this. edit: Have corrected it, so it reflect the change at 22:54

[@LanguageHelp]

Yo Bob Chris. We hear you man.

[@Mrameenmgm]

Thank you so much for the session.

[@robinheyer708]

I suppose these days we should consider making that mobile menu a dialog so we have the built-in behaviour for open, close, backdrop and a background that can't be interacted with?

[@mahmoudsh97]

Hello Kevin.. i've been learning CSS for like 4 months ,, and i'm little confused with all of these 'vars' + ' classes' you've used ,, is that normal ? and how should i get better with it ? Thank You

[@kalkidanmulu4989]

Hey Kevin (or anybody else that gets it), I was wondering why you did not want to apply the display:flex on the container class

[@KevinPowell]

A .container should do one thing, and only one thing, imo. On a small project, maybe the only time you need a .container it's going to be a flex item too, but long term, it's so much easier just to have that set a max-width, and that's all.

[@kalkidanmulu4989]

thanks very much!@@KevinPowell

[@SANAT22]

What's the use of the container on line 17?

[@thaliaisabeldesouza7069]

that's the first time I see you using js, do you have any videos teaching a bit of javascript? I think it will be pretty awesome

[@magnustips]

Great series!

[@mohammadrana2301]

I was waiting for it

[@dansteffee9759]

I have a question on styles you have back-ground-Image = Url (../img/picture) . I like how the background section scrolls up the picture on Windows PC, but on Apple it does not work it freezes the background image, How can I correct that?

[@Sebastian-zs8cp]

how long in total do you need for an .html?

[@rezarahman1782]

When I try to open the index.html file without running 'npm run dev' I mean if I try to open index.html file manually than I face this "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at" problem. Any solution?

[@lucasmaximilianokramer6161]

Hi! I'm getting a lot of new info on this vid and thanks for that! But I have a problem, I can't get my main.js to load... it's said /main.js net::ERR_ABORTED 404 (Not Found) I'm using at the end of the html

[@sujonshekhbd]

Sujon Shekh was here with bob chris :D

[@esraamohamed5601]

Thank you for your hard work

[@justkailash]

why used "visually hidden" class from other article... when we can just do disply:none ?? ... whats the difference..

[@seanwang571]

the 'icon-close' was not implemented.

[@okoyechibuike2678]

💥💥💥💥 Thanks Kevin

[@PrateekSinghYT]

can someone please clear why .nav-list{ } is used twice? .nav-list{ font-size:var(--font-size-nav) } .nav-list{ display:flex; }

[@hagureshinma]

I think is jus a simple class duping error because he's explaining his thought process and writing, not troublesome but it happens, and is easily fixable during a code check session.

[@nando19ist]

am having issues with the toggle/javascript part, when i click the toggle nothing happens, i followed everything and tried to figure it out but no luck any suggestions anyone?

[@nando19ist]

I got it, small mistake. I didn't add the script syntax for java scrip in the html body if anyone has the same issues.

[@elle.3792]

Damn i can't get the background gradient to work

[@pradeepsharma9728]

width: min(or(--max-width), 100% - (var(--padding) *2)) can someone please explain mai this what we are doing in this line to make it fit with any height and width???

[@naczelnypsycholog6296]

wow! much faster, awesome!

[@keshaviyer7625]

Why not use the dialog HTML element for the mobile version? I feel like that would simplify the javascript as well as styling PS: Learnt about the dialog element in one of your prior videos!

[@sblanz]

AFAIK dialog doesn't have an excellent support yet, it only recently was added to safari if I'm not wrong. So you would probably end up with implementing back support workarounds anyway. It is still an interesting question thougn, as building mobile menus still feel like we're reinventing the wheel every time

[@sayeghjoe]

Me: "Let's just use Sass." You at 46 mins: "I'm so used to using Sass to bring in my stuff". Me "Kevin you rockstar! Let's use Sass." 😂

[@sethhendrikz6949]

sorry bro, i know this is a year ago but what saas would you recommend using?

[@sayeghjoe]

If you’re using VS code, you can use the Live Sass Compiler extension by Glenn Marks.

[@snvwie]

THANKS KEVIN

[@MrAngeloDy]

Can’t believe it! Why have you betrayed CSS)

[@hassaneoutouaya]

Thank you so much !

[@richardaubin1951]

I think disable scrolling on menu expansion would be better.

[@flashbond]

It is simply a modal. Am I thinkin too simple?

[@blerimhaliti941]

That's what I was also thinking. Perhaps add a backdrop-filter as shown here: kzbin.info/www/bejne/oYOli4OZgsR-hdk

[@JamesWelbes]

Is part 5 ready yet 😂

[@JamesWelbes]

For visually hidden, why not just opacity 0, position absolute, and pointer events none?

[@technoph1le]

There has been extensive research on this. Perhaps, it might work, but developers might have found some bug and made the best visually hidden. You can read articles about them

[@vitalijspuskovs8941]

Hey, Kewin! Following you for a quite time - I am wondering how far you get make responsive web from desktop to mobile without using media querries?? Sounds like challenge!! Thumbs up everyone!!

[@Michael-Martell]

Solid.

[@RonyPrime]

upload part 5 please !

[@tGoldenPhoenix]

42:06

[@consciousmi4842]

Thanks, Make it rain

[@myxolov6604]

First?

[@stanleylafond4650]

Too many excuses: "Don't usually do it this way": "I usually do this with sass".

[@fakefury1198]

At 23:08, wouldn't it be easier to say: navToggle.setAttribute("aria-expanded", primaryNav.hasAttribute("data-visible"));

[@knuseski]

You can just use: navToggle.setAttribute("aria-expanded", !primaryNav.hasAttribute("data-visible"));

[@xphstos_]

Great video as always... my only concern this whole utility class first system we're trying to pull off at this example. I think a BEM aproach would suit best in this kind of example. Not a full hardcore BEM structure but the basic idea behind it. I know that a utility first aproach could potentially save us some bytes at our final CSS file but it doesn't worth the trouble in small projects. I use FEM too for tutoring purposes as well and I already completed this challenge. If someone wants to have a look here's a live link: f0a7dc5702e562770912ae3287772db77385fcb9.surge.sh

[@usamaali3432]

I'm loving this series! Thanks so much!