I found the Hamburger mobile navigation menu tough to grasp. I read multiple articles, played around with codepens, watched videos etc. This is the only video that explained the whole thing in a truly beginner friendly way. And I appreciate the effort that you put into it Mr. Powell. Kudos and millions of thanks ❤❤
@electronicbasics18562 жыл бұрын
the tutorial everyone needed but no one asked for.
@steff9775 Жыл бұрын
Dude...i watch your videos for almost 1 year now. This is my first comm and I wanted to say that I just LOVE THE WAY YOU TALK.
@Anth-ony2 жыл бұрын
Great video. I know you're the "CSS King", however, may I suggest that you create some very basic JS tutorials on the most common use-cases of said code? I've learned more about the basics of JS from you, as you touch on it in your videos, and how to implement them in my own projects than I have from people actually teaching straight up JS. You're very concise in how you create/explain those sections in your videos and I'm sure others would enjoy this as much as I would. Plus, it would be a bit of a change up for you to keep things fresh. Anyway, keep it up Kevin, you're one of my favourite KZfaqr!
@nv3796 Жыл бұрын
+1 - things like how to add a secure login, etc; I know these will require databases, but not sure how to approach this problem
@CodeWithSahand2 жыл бұрын
The Navbar looks amazing. I like the idea.
@aakashkathait83282 жыл бұрын
I just completed you “conquering responsive layout” course , it changed my mind completely on how I see html and css. Thank you for such quality content for free
@user-os4zb1wo6b Жыл бұрын
This man is pure gold. The sheer number of informative videos on CSS instead of just blabbering is insane. Get this man a subscription.
@digitalalien35342 жыл бұрын
I just finished the full course on scrimba and it was GREAT. A ton of information on proper workflow and good practices, and lots of pointers on useful things I need to learn more about. I've been trying to get better at building complete websites (instead of small challenges like hovercards etc) and learn some JS along the way, and I was a little overwhelmed and sometimes felt lost as to where to start and what's important. But with this course the picture became much clearer. It was exactly what I needed, so thank you!
@LibraryOfTheOligarchs10 ай бұрын
Where are you along in your journey now? Good at JS?
@SirMika9 Жыл бұрын
That's so cool that you take your time and explain things well like with a friend. Really enjoyable to watch.
@DanteMishima2 жыл бұрын
And you wonder why we call you king? How you knew this is what I needed is beyond me
@ZANES-YT2 жыл бұрын
This guy us one of the best content based programming markup language course tutor ever, so much valuable content in the last 3 years from you thanks for helping me being the css designer I am now.
@yajirushik28712 жыл бұрын
6 months ago I wouldn't know how to do it, so I have subscribed to You. Actually I just have moved to end of video and after looking at final effect I can remake it from scratch. Thank You for the whole time which You are spending to teach us. Also still looking for front-end job but need to learn a lot more :D
@aynurseyfullazade7862 жыл бұрын
more things like that wish you to be able to do🎉
@Petahsaur2 жыл бұрын
Perfect timing Kevin, Just as I started to look into navbars and js last 2-3 days Thanks!
@shoumikkumbhakar63752 жыл бұрын
lol me too
@davidtaylorgarcia85562 жыл бұрын
Certainly you are as good as a web-dev-youtuber can be. Your clarifications are awesome, your content is incredibly well structured, even your voice tone gets on really well with the content. Thx a lot!
Great video , only problem that you may come across , you should also put visibility:hidden to nav-links to avoid tabbing over the screen and also to get around transition issues adding simple delay to transform can do the trick!
@Pavel-wj7gy Жыл бұрын
Sometimes I get to do navbar, footer or any kind of layout components that I forget how to do. On those days, I come to Kevin Powell channel for ideas and you never disappoint! Truly a joy to watch someone as fascinated by CSS as you.
@aymenfyi2 жыл бұрын
kevin, can't thank you enough for all the invaluable content you're consistently giving us. learning so much and enjoying every step along the way! ♥
@joshuasteed8992 жыл бұрын
🤣🤣🤣
@aymenfyi2 жыл бұрын
@@joshuasteed899 what’s so funny?
@Santino112382 жыл бұрын
Thank you, as a MERN stack dev I'm always looking to learn more styling. Appreciate the content.
@abadlibadreddine1960 Жыл бұрын
I started following this guys 2 months ago, i can now say that i fell in love with CSS
2 жыл бұрын
I can hear both hope and pleading in that sentence that 'Internet explorer is dead' :) Great video as always.
@CarlWicker2 жыл бұрын
I'm currently working on this project in ReactJS, great project with some interesting challenges. It's very handy to have the figma files.
@mrCetus2 жыл бұрын
This is so well explained. Love that you cover so many newer css properties, logical properties as well as best practices like aria. This is quality education.
@Yuri-qr7ml10 ай бұрын
So I started this tutorial a few months back as I thought it could be a fun project, got frustrated by the button for the nav not doing what it should be doing. Now my journey has only started earlier this year with little time but it seems that I had a . instead of a , in the js. So I wanted to come back and say, fantastic tutorial!
@chawza8402 Жыл бұрын
Thank you Kevin. This video showed me most of the fundamental that I need to start up my responsive web. other vids does not really explain how exactly how its done so they doesn't teach anything lol
@myfavoritemusic24282 жыл бұрын
I just started my HTML CSS and JS studies and my first project is creating my own personal CV site. This will help A LOT with that. Thanks!
@sourav_962 жыл бұрын
I am working on this project using scrimba platform Great course Doing this using reactjs Till now best course for me to learn design system 👍
@trentturner15462 жыл бұрын
Thanks for this tutorial Kevin. I’ve been watching you for a while and always enjoy learning from and watching you. This one helped me switch my default mobile navigation to use translate x instead of animating the left and right properties to show and hide my menus. A much better way of doing it. Thanks again.
@dev_ression2 жыл бұрын
Kevin is fantastic
@mirandasanchez4000 Жыл бұрын
I’ve learnt SO much from this tutorial, it’s great to put knowledge into practice. Thanks! I wouldn’t mind watching a couple of ads if that help you whatsoever as a youtuber. Your content is priceless 😊
@sameerahlawat84802 жыл бұрын
Mr. Kevin you teaches the beauty of of html css & js in beast mode .
@vavaiva40802 жыл бұрын
an answer for my misery… just had my class and i got a homework to do and this is a life saver… either God listen to my misery or my ipad tired to listen to my frustration…
@millermcdonell2912 жыл бұрын
You reall are CSS-king just like Kyle said. I have learned alot from you, thank you!
@TiagoSilva-sq4gp5 ай бұрын
Man you are the bomb, i was almost giving up of programing but with your videos i finally got it, thank you
@nicolasnog262 жыл бұрын
Great video, you are inspiring me to get in more depth touch and play around with CSS instead of using already done templates for my projects!
@physlift91752 жыл бұрын
I was literally just looking for a video from you on this yesterday!! Did the responsive navbar on my own....time to see how bad I messed up ha thanks kevin youre the goat
@rishabkumar56562 жыл бұрын
Hi Kev, this is one of the most easiest and well explained videos on youtube. Well done. Thanks for making it. 💖💖
@nof1232 жыл бұрын
been learning css for 2 months and wow I learned alot from this vid
@chetankhulage2 жыл бұрын
🥺🤤🤤🤤🤤🤤thankssss your channel is blessings for us🥺🥺🥺 I'm in super love with CSS 🤤🤤🤤🤤🤤
@perkin5242 жыл бұрын
Oh Yes! What an excellent tutorial - you were on top form for this one Kevin. So helpful to see modern CSS rules in actual use cases like this where you can not only see how they work but also how they save time and effort.
@dannyr29762 жыл бұрын
Another great video! The site design and navigation looks so clean, I love it! Always learn a lot from watching your examples so thank you so much!
@RayMaxey2 жыл бұрын
Niiccee, I have been using this Space project to incorporate the navigation into my project this past weekend. You knew that I got a lil stuck and needed a quick push.
@06011983daniel2 жыл бұрын
Thank you so much for sharing your knowledge. Even though I don't know how to speak English, I managed to understand the whole concept to reach your final goal.
@AbdicateDotNet2 жыл бұрын
As usual, a great, informative, and wonderful video!! 👏👏👏👏 Now I have to change my site! 😁
@user-ir9dm3yx4o2 жыл бұрын
the design is just so clean and beautiful!! glad i found this, thanks for the video :D
@noblekram2 жыл бұрын
i really like how you explain the details in a simple and understandable way! great tutorial Big Thanks
@jacoblockwood40342 жыл бұрын
I'm glad you dropped the "madly, deeply in love with CSS" for just "in love with CSS." it just sounds much less.. invasive? I don't know, but I think it was a good choice.
@thinker-o5p2 жыл бұрын
your videos are kind of a one stop solution. thanks for explaining so well
@ahooton9 ай бұрын
Kevin, I spotted something when implementing this in my project; if the mobile navigation is still in its expanded state, and the browser window is manually resized so that it passes into desktop view, then aria-expanded and data-visible will still remain set to 'true'. Additional JS logic can be added to ensure these attributes are set to 'false' if this scenario occurs.
@alexanderdavin16552 жыл бұрын
It's really helpful explaining every attribute/property as you go along, thanks for that.
@waardal2 жыл бұрын
My god just in time when i have to make a responsive portfolio as a school project, thank you so much!!
@markrobbins69852 жыл бұрын
Love your show, Babe. Had to chuckle at your admission of time wasted troubleshooting a file that wasn't linked. My bane is editing the HTML, CSS and Javascript but NOT saving all three.
@oskrm2 жыл бұрын
One note, in chrome the backdrop-filter blur is very bad for large blur values, and you get edge bleed. What works better is to use an SVG blur with URL value.
@shoumikkumbhakar63752 жыл бұрын
and firefox doesn't even support it
@oskrm2 жыл бұрын
@@craigburton4447 using it in backdrop-filter: url(#svgBlur) Would work as you would expect
@craigburton44472 жыл бұрын
@@oskrm Ah sorry, I thought you meant it replaced the backdrop functionality, my bad.
@kevinwaag99762 жыл бұрын
it's what I normally use as well
@thtasca2 жыл бұрын
Oh man, I really need to upgrade my knowlege in css. A lot of atributes and selectors I'm not familiaryzed, I really stuck in time in some parts of front end ahuahuhauhaa. Your channel is so great, i'm not every time here but when I see one of your videos I'm always learn more, thx.
@sheriffcrandy Жыл бұрын
This is a super awesome tutorial, with a couple caveats: 1.) when the menu is opened and you click on one of the nav links to navigate to a new page, the menu stays open on the new page. 2.) When window resizing, the menu suddenly opens and closes which I think is bad design 3.) If you want to animate the hamburger icon from the three horizonal lines to an 'X' shape, you're going to have to rework the css since he is using an animation on an image.
@irinaka4351 Жыл бұрын
Could you tell me how can I get rid of this suddenly appearing menu when resizing the window? I've been thinking the whole day about it :((( Thank you!
@sheriffcrandy Жыл бұрын
@@irinaka4351 I had to re-work the css into a completely different implementation. Don't put the menu animation under the media query because you won't be able to prevent the menu from automatically appearing on page resize. Instead, make the menu appear or disappear on the hamburger button click using javascript. Use can use 'is-active' flags and toggle them on or off when the hamburger button is clicked with js and then use those in your css to manipulate the behavior.
@ibnulferdous23492 жыл бұрын
CSS from another planet! Loved it!
@bunyameennurudeen1732 жыл бұрын
Great lesson from a greater TechEducator
@ismailsossi3239 Жыл бұрын
you are a sweet person, thank you so much for trying!
@Mohammadreza-Dolati Жыл бұрын
Sir , your videos are full of useful contents, thanks a for your helping, big ❤️ from Iran
@darthtorus93412 жыл бұрын
for the test you could also do `primaryNav.setAttribute('data-visible', visibility === "true" ? "true" : "false")`
@KOBE42__2 жыл бұрын
I think Kevin just wanted to be more explicit and show how it works to people who might not be so familiar with JS. But you are right, I used the ternary operators too as I like how short and sweet they are for basic conditionals.
@JohnSnow-gi7iv2 жыл бұрын
New things I learned from this video : gap inset min @support aspect ratio
@rheavictor72 жыл бұрын
Kevin, thanks man. I'm really improving m y CSS skills with your content!
@aryan7069_2 жыл бұрын
I just did first challenge time management UI . I m glad i was able to do it without figma files
@SrckyBoi2 жыл бұрын
Cool video Kev. Just one correction, display: none doesn't remove element from the DOM, rather from the document flow. Keep up the good work.
@raho20052 жыл бұрын
holy cow, i learned a lot of new and interesting css features today. Thanks!
@Wynorrific110 ай бұрын
I love your work everything is so easy. I just love it, I thought you were the css king but really your the code king.🤴you make it very easy to follow and learn god bless you and please keep making content
@lonelysock3746 Жыл бұрын
Great video! However, I would've really liked to see you go over the sr-only class you made; I've run into some issues with my button and I believe it's because there's some more information I'm missing
@whoisitidk39802 жыл бұрын
Thank you for sharing so many useful HTML, CSS, and JS attributes, it really helped me a lot
@sssself Жыл бұрын
You Are So Amazing Kevin!! Thanks for your existing👼
@trungduchua17862 жыл бұрын
Thanks Kevin, this video helps me a lot! As an UI/UX designer who wants to expand his knowledge to manage his work better, this kind of easy-to-understand tutorial is really a gift!
@kevinwaag99762 жыл бұрын
really elegant way of doing this. Well done!
@Felipe-532 жыл бұрын
Wow, this came out right in I needed it. Thanks, you're awesome!
@SteveBonin2 жыл бұрын
Hi Kevin, really nice! I learned a couple of things along the way. I am spending some time with your videos, especially Fridays, it gives me something to do that feels like work but is more fun. Thanks
@gabrielbaldez3178 Жыл бұрын
Excellent tutorial! Great things were taught and you explained in a very clear way.
@cohdalton2 жыл бұрын
Absolutely brilliant video, there's so much in it to go through and learn. Thank you, fantastic job!
@luiscarloscorderopena70302 жыл бұрын
I learned some very usefil tip watching this, thank you!
@roshanaryal3102 жыл бұрын
Great as always Kevin! I love your videos
@alex-suciu2 жыл бұрын
props for making this accessible
@tmkdesigner Жыл бұрын
Thank you so much for all of your videos! Im learning so much!
@Oj-Gaming-vt6vd9 ай бұрын
Hey kevin :D Amazing vids mate, they are really helping me progress on my own website :D Keep up the good work :)
@StevenJGaming Жыл бұрын
I love you Kevin. You are my secret mentor.
@sphinxz_gaming2 жыл бұрын
I have been practicing the flex box whole right now 👍🏼
@aayushjamuar99002 жыл бұрын
Dude 🥺🥺🥺🥺, i needed this sooo much
@ninopotskhoraia53732 жыл бұрын
These glasses look really good on you
@VitoOnYoutube2 жыл бұрын
Is there any advantage in making the span for "Menu" instead of setting aria-label=”Open menu” directly on the button?
@jen-vj4vq2 жыл бұрын
Thank you for this video. I learned so many new things just watching it
@ich68852 жыл бұрын
Hey, liked your tutorial and your use of attributes for the nav toggle, although I'd like to point out that you can also access data-attributes with nav.dataset.visible instead of nav.getAttribute('data-visible') :)
@visitforthemusic2 жыл бұрын
Indeed, this is one benefit of data-* over other attributes… we have read/write access via the dataset property.
You could also just add/remove a CSS class with Javascript via classList.toggle(). I for one much prefer writing class selectors over attribute selectors. It also reduces the code in the event listener to a one-liner :) -> primaryNav.classList.toggle('.is-visible') (not counting the setting of the aria-expanded though, but that can also be simplified)
@KevinPowell2 жыл бұрын
Yup, I used to do that, but I find on bigger projects this is easier to maintain. When you have more people working on something, the more clear something is, the better, even if it's more lines of code. In this case, if JS is involved, data attributes are a pretty standard way of letting people know that 🙂 If it was a personal project, I'll be toggling classes for sure 🙂
@westonjp61210 ай бұрын
Just simply AWESOME! I love it!
@maidenpotato2 жыл бұрын
This was so amazing, thank you so much!
@Daniel-pg8ln2 жыл бұрын
Dude, this was awesome!! Hello from Brasil 😁
@GoldoMania.2 жыл бұрын
Hello Kevin! i realy love what you are doing, great job.
@sudoalex2 жыл бұрын
Yesterday I watched your first ever video and it was about nav bars too
@KevinPowell2 жыл бұрын
Hopefully this one was better 😂
@jacquelinedawn95102 жыл бұрын
You're awesome! And you have a nice voice! Keep up the great work!
@mohammadnoman24572 жыл бұрын
Thanks so much for this! Would love to see more mobile layout stuff with css
@lawrencechan5010 Жыл бұрын
Not sure why. But however on my end, the sr-only on the span from the button is not working. It is still visible on my chrome browser. Is there a reason why.. And do you guys have problems with it?
@__Phederal__2 жыл бұрын
You know I am shocked at how much Css I don’t even know to know, let alone use here in this video, talk about nugget-filled
@mevkok2 жыл бұрын
If you're going to use Javascript with a booleans for visibility just check if the attribute is there or not... if (primaryNav.hasAttribute('data-visible')) { primaryNav.removeAttribute('data-visible'); } else { primaryNav.setAttribute('data-visible', true); } or something like that.. without actually adding it to the html..
@pranavyeole1022 жыл бұрын
Learnt so much from this video, thankyou so much 😁
@denniskramp50552 жыл бұрын
I know its all about CSS here, but I think the JS part should follow the general standard. You mentioned the casting to a boolean and the unnecessary else if but didn't used it. One thing to make it even more "standard" would be to use a ternary here. Other than that great video! Liked the aria part on the span!