Create a responsive navigation nav with no JS!

  Рет қаралды 471,537

Kevin Powell

Kevin Powell

Күн бұрын

Start creating responsive layouts with confidence with my free responsive layouts course: courses.kevinpowell.co/conque...
My very first video that I published here is one on creating a navigation. It worked, it looks good, and it's insanely popular (by far my most popular video). The problem is, it isn't responsive and is a bit old school in that it uses floats.
**** An important note, I've edited the CodePen a few times since publishing this. One is to not use `all: unset;` which Edge doesn't support. Another edit, which I talk more about lower in the description, was to make it tab-able ****
In this video, I take that same navigation but I update it to take advantage of modern CSS, making it fixed top, adding a semi-transparent background, creating the dropdown without any javascript, using flexbox and CSS grid to lay it out, and changing up the pseudo-element transitions to be higher performance.
A commenter kindly pointed out that this isn't tabbable, which is an issue and causes accessibility issues. I've updated my CodePen to take this into account. Basically, I changed the 'display: none' on the input, which makes it almost useless, to instead have a position absolute on it and moved it way off screen. Then, I made it so when the input gains focus, the label gets highlighted to give us a visual clue as well. If you'd like to check it out, the codepen link is down below.
Timestamps
0:00 - introduction
3:15 - starting the markup
5:15 - starting the CSS
13:40 - creating the mobile toggle
23:55 - adding in the animation
31:20 - styling it for large screens
39:00 - adding the pseudo elements
Codepen: codepen.io/kevinpowell/pen/jx...
Related videos
CSS Variables: • CSS Variables - An int...
Specificity: • CSS Specificity explained
Pseudo elements: • Before and After - CSS...
Hamburger to X animation: • Video
CSS Grid: • CSS Grid videos
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Пікірлер: 943
@arsalanshaikh3763
@arsalanshaikh3763 6 жыл бұрын
This channel is a gem on youtube ....
@KevinPowell
@KevinPowell 6 жыл бұрын
Thanks so much 😊
@techtipsuk
@techtipsuk 6 жыл бұрын
Yeah I agree my favourite web based channel and I sub to a few.
@AM-lz5yn
@AM-lz5yn 5 жыл бұрын
lost devtips but found kevin so i'm glad
@saidfatkhana4930
@saidfatkhana4930 5 жыл бұрын
couldn't agree more haha
@bambooindark1
@bambooindark1 5 жыл бұрын
With 20/80 rules, high quality channel like this is hard to find at the same time. And there is too much unorganized stuff flooding on youtube stream.
@lindsayreiner9872
@lindsayreiner9872 2 жыл бұрын
My CSS guru! 3 years later and this video is still saving us junior developers. I honestly don't know what I'd do without you!!
@ChrisGearys
@ChrisGearys 4 жыл бұрын
I love how you show what every change does and the effect on the other elements. You've really helped me get my head around css and I'm now finding myself anticipating the commands you will use to achieve what you describe at each step which is reassuring for me. I personally like the longer video with the time stamp so all the info is in the same place without having to search for other videos. Thanks and keep up the great content.
@ldlouis
@ldlouis 5 жыл бұрын
Kevin, I'm a 70 year old and trying to create a website for a hobby. I have watched many of your tutorials now and I can honestly say your videos are the great. I have learned so much in a short time. Your delivery, techniques and explanations have made life so much easier. Thank you for being there and keep up the good work.
@KevinPowell
@KevinPowell 5 жыл бұрын
Thanks for the very kind words Louis! I'm glad that you're enjoying my content :D
@alecmoore
@alecmoore 4 жыл бұрын
When you get a Wix ad on a Kevin Powell video: "I'm about to end this ad's whole career" Amazing stuff Kevin! I'm learning html/css and stuff like this gets me even more motivated and excited.
@ItsSunnyMonster
@ItsSunnyMonster 3 жыл бұрын
I don't like making websites with Wix. Yes, it is convenient, but you don't get the fun of typing the HTML and CSS by yourself.
@gorillaau
@gorillaau 2 жыл бұрын
@@ItsSunnyMonster With Wix, you are not building a web site but adding to their product. A Wix site is not portable, in the slightest.
@justpeachyrl
@justpeachyrl Жыл бұрын
Thank you so much Kevin, from 4 years in the future! I have been consuming your content like crazy recently and the way you teach is absolutely perfect for my style of learning. It is ESSENTIAL for me to understand the WHY behind every piece of code I am writing, so I deeply appreciate the time you take to eliquently explain those details. Thank you again!
@lholland5212
@lholland5212 3 жыл бұрын
Been diving into the world of web development this past year and coming from a non-technical background i have to say you absolutely rule! You have no idea the type of impact your channel has had on my career trajectory. Thankyou!
@devinjansa9329
@devinjansa9329 2 жыл бұрын
As I am learning to code, Kevin you are my go to guy! love the content, I have used multiple of your videos in building my first webpage. Thank you a million.
@devmrin
@devmrin 6 жыл бұрын
Honestly Kevin! This is the most - I mean that sincerely - the most I learnt watching any long format CSS video. This format helps unearth some of the gems which you'd otherwise never find that easily. Cheers!
@KevinPowell
@KevinPowell 6 жыл бұрын
Thank you so much for the kind words! Really happy to hear that you got a lot of value out of this, you just made my day :D
@holdencn
@holdencn 5 жыл бұрын
@@KevinPowell I'm with that guy Kevin. Really well done!
@judahnime
@judahnime 3 жыл бұрын
hey guys, I encounter a problem.. when I demo my code, somehow my checkbox can only be checked and cannot unchecked.. so basically i can only show my nav menu by check the checkbox, but i cannot close my nav because i cannot unchecked the checkbox.. can anyone help me?
@Nashiuz
@Nashiuz 2 жыл бұрын
@@KevinPowell You're awesome Kevin thanks a lot
@clifhodges1509
@clifhodges1509 5 жыл бұрын
nice video man! i just discovered a quick way to make the hamburger... where you put your "X" type in "|||" and then style it with transform:rotate(-90deg)
@playmatee1
@playmatee1 5 жыл бұрын
2019 is 3d, can we makethe hamburger as an object in space with shadow and animate/transform ? / Thanks for the tutorial m8 ur great !
@Loopmootin
@Loopmootin 5 жыл бұрын
I know i'm 7 months late, but you could also just do the ­☰ symbol instead of rotating ||| .. But the cool way of doing it Kevin's way, is that you get to define with width to thickness ratio, the distance between each bar and the possibility of curving the edges.. With the symbols it's kind of limited by the font you're using :-)
@kalingagm4829
@kalingagm4829 4 жыл бұрын
Can also just use this instead: &#9776
@rickyanthony
@rickyanthony 4 жыл бұрын
Cool. There's a simple html symbol for it. Goes to show how much effort we waste sometimes just because we don't know something exists. Speaking of, when will CSS allow to make changes to any other element based on :hover etc of one element? It should be possible.
@arturhakobyan3022
@arturhakobyan3022 3 жыл бұрын
This channel is like an island with the treasures in form of CSS lessons. Great job Kev 🔥🔥🔥🔥🔥
@dereklawrie6672
@dereklawrie6672 6 жыл бұрын
Kevin, I have watched many of your tutorials now and I can honestly say your videos are the best. I have learnt so much in a short space of time. Your delivery, techniques and explanations have made life so much easier. Thank you for being there!
@KevinPowell
@KevinPowell 6 жыл бұрын
Thank you so much Derek, really glad that you're enjyoing my videos :D
@zanereeder125
@zanereeder125 6 жыл бұрын
I love that you are following the "Mobile First" design principle. I now understand what that really looks like in practice. Thanks for your great content! Subbed for more!
@KevinPowell
@KevinPowell 6 жыл бұрын
Glad you enjoyed the video, and my approach, and thanks a lot for subbing :)
@user-of3xm7sv5g
@user-of3xm7sv5g 5 жыл бұрын
Thank you, Kevin, for such a powerful, lesson.
@taipham6302
@taipham6302 4 жыл бұрын
Thank you so much for all your free contents! ive recently discovered this channel less than a week ago in my journey into fullstack development and ive been on kevins page quite literally everyday since.
@osoriodanny
@osoriodanny 4 жыл бұрын
Thank you, thank you, thank you!!! for this updated version. I follow the tutorial for your first nav bar but I had to give it up for all the reasons you mention in THIS video. Awesome channel!
@Protoscribe
@Protoscribe 6 жыл бұрын
Was definitely worth the watch. Did not know of unset all thing.
@KevinPowell
@KevinPowell 6 жыл бұрын
I've known about it for awhile, but this was the first time that it ever made sense to use it. It's a pretty neat feature.
@Protoscribe
@Protoscribe 6 жыл бұрын
It is indeed a neat feature. I am sure to pay more attention to CSS and HTML docs from here on in.
@srajaiah9846
@srajaiah9846 3 жыл бұрын
Kevin Powell how do I subscribe to your newsletter?
@srajaiah9846
@srajaiah9846 3 жыл бұрын
I did not see the link
@boggeshzahim3713
@boggeshzahim3713 5 жыл бұрын
This is the best hamburger recipe on KZfaq
@KevinPowell
@KevinPowell 5 жыл бұрын
Haha 😂
@gearsighted
@gearsighted 3 жыл бұрын
This was excellent. I've been learning web development for around 3 months now and more advanced CSS is still pretty tricky. I'm can't wait to get into the rest of your content. Keep up the great work!
@MaakBow
@MaakBow 3 жыл бұрын
Thanks kevin. You explain things (even mistakes) so simply. I like how you separate extraneous code up front, so many other tutorials when you remove the extraneous css unrelated to the task at hand, you get two lines of actual tutorial code.
@Toulkun
@Toulkun 6 жыл бұрын
I absolutely love your channel. Im building my first ever portfolio and first ever own web site, i know basics of html, css and a bit of JS and Jquery. Keep up the great tutorials, you deserve more sub's.
@KevinPowell
@KevinPowell 6 жыл бұрын
Very glad you're liking my videos Begichh!
@amirgheitasi3638
@amirgheitasi3638 6 жыл бұрын
That's one of the most useful tutorials I've seen in a long time. A thousand Thanks Kevin. You're awesome
@KevinPowell
@KevinPowell 6 жыл бұрын
So happy to hear that Amir!
@mrmamun5830
@mrmamun5830 5 жыл бұрын
Whoaa that was really a mind blowing tut for me! This is what I have been looking for. You are just awesome! Thank you very much for this amazing video!
@victorespinozalucena9163
@victorespinozalucena9163 3 жыл бұрын
Amazing! You showed me how to simplify a lot of things that've been taking me a lot of work. Thank you!
@xnajx
@xnajx 5 жыл бұрын
Thanks! This really helped. I just made my first website and I don't know JS yet.
@hugocsl
@hugocsl 6 жыл бұрын
And the new propert of the week goes to "all:unset" thats so cool!
@KevinPowell
@KevinPowell 6 жыл бұрын
Yeah, doesn't come into play often, but can be really handy, we just have to be careful because of browser support for it though.
@holdencn
@holdencn 5 жыл бұрын
I just hope the 'all' property gets widely adopted or I wont be able to use it. We have millions of users across MANY different backgrounds and systems. It has to be compatible with everything.
@IceMetalPunk
@IceMetalPunk 3 жыл бұрын
@@holdencn At my job, some of our clients still use IE 11.... you can imagine how sad that makes me since I have to develop around it 😂
@holdencn
@holdencn 3 жыл бұрын
@@IceMetalPunk I work at a university in Canada, so I feel your pain. Would you believe IE9 (and some on IE6) on Windows 7? **shudder** its true.
@IceMetalPunk
@IceMetalPunk 3 жыл бұрын
@@holdencn I would believe it, but... it hurts to hear :(
@CrashDSInc
@CrashDSInc 5 жыл бұрын
This is my first time watching one of your videos, and I subscribed right away. Good stuff! I appreciate how thoroughly you explain things. I'll be digging around the rest of your stuff in the future.
@bxrclxys
@bxrclxys 4 жыл бұрын
Currently in college working on developing websites for my work, and came across this video. Super helpful tutorial, even if you don't know EXACTLY how everything works but you understand the basics then it is still easy to follow and grasp the concept - and can help you understand how they all come together. Watching almost 2 years later and is still one of the most helpful responsive navigation tutorials on KZfaq that I can find. Much thanks to you, Kevin! really appreciate the video.
@KevinPowell
@KevinPowell 4 жыл бұрын
Really glad you liked it!
@VinhLe-gc8ws
@VinhLe-gc8ws 6 жыл бұрын
Havent watched it yet but excited for a css grid video with nav as i have been struggling with it!
@KevinPowell
@KevinPowell 6 жыл бұрын
I hope it met your expectations!
@j.e.1620
@j.e.1620 5 жыл бұрын
how can I add a sub menu to one of the list items of the menu with same drop down effect? since the menu uses a check box, how would I go about recreating this with a sub menu?
@tumbler9428
@tumbler9428 4 жыл бұрын
+1
@ganeastefan4287
@ganeastefan4287 3 жыл бұрын
add new ul and give it a different class, display:block,position: relative/absolute respectively, style them and so on.
@JulianColeman03
@JulianColeman03 5 жыл бұрын
I thought I was seasoned in CSS, but I always find myself learning something new, or rediscovering the basics when I come across a video by you. If there's a channel I genuinely appreciate, it's this one. Thank you
@KevinPowell
@KevinPowell 5 жыл бұрын
I still run across new stuff all the time. One of my favourite things about CSS is discovering new things. Glad to know I'm not alone in that! I'm glad that you're enjoying my channel!
@bobdinitto
@bobdinitto 2 жыл бұрын
Wow, this looks great Kevin. You've packed so much into this video I'll have to watch it seven times just to absorb it all. Thank you so much. I've seen the checkbox trick before but your clear explanation made it all that much more obvious what was going on. Also the use of :checked pseudo-class was awesome thus eliminating the need for Javascript. Interesting how you made the burger. Nice use of the fade effects and awesome trick using scale to get the transition! I love that.
@joseantoniostramucci351
@joseantoniostramucci351 5 жыл бұрын
Hi Kevin! Thanks a lot, great content! Just a question... is there anyway to collapse the navbar after clicking the desired link??
@eliphinobeats
@eliphinobeats 5 жыл бұрын
I'd love to know the answer to this too. I'm thinking with JS, click event on the a tags to set the checkbox to unchecked. Obviously this tutorial was JS free but...
@masilli
@masilli 3 жыл бұрын
Hi! I have the same question... and I was wondering if you managed to do it, without JS. Thanks! ;)
@bonbonpony
@bonbonpony 3 жыл бұрын
There's one thing that I think could be improved: the moment it switches from horizontal menu to vertical menu, this menu is visible for a split second and then hides instead of being hidden to begin with. Is there a way to have it start hidden after it breaks to mobile width?
@simaopacheco4529
@simaopacheco4529 2 жыл бұрын
bro you will never see that happen, or you see in a mobile no chance that you get to pc layout, if you are in a pc layout as a user u wont shrink the website not even once think as a user have u ever do that?
@simaopacheco4529
@simaopacheco4529 2 жыл бұрын
stop over complaining. but something like in media queries use that section display:none ?
@natashamoore5691
@natashamoore5691 Жыл бұрын
This doesn't feel like an "over-complaint" to me. I see the same thing and it would be great to have this tidied up. Really appreciated the video Kevin!
@dimitridehouck9506
@dimitridehouck9506 5 жыл бұрын
What a gem your channel is! Love it! Thank you so much for sharing!
@mike82967
@mike82967 4 жыл бұрын
This is my leading CSS learning site, well done.
@markjordan7800
@markjordan7800 6 жыл бұрын
we did miss you ;)
@KevinPowell
@KevinPowell 6 жыл бұрын
Awww thanks 😊 I missed you guys too
@banicans5299
@banicans5299 Жыл бұрын
Why does my code never work... i set nav display to none and it's still there, if i set other elements to display non they disappear but the only thing i actually want to disappear doesn't
@simonhallin1640
@simonhallin1640 6 жыл бұрын
After trying to make a nav with CSS grid this legend shows me the way, great video Kevin
@dawnhouston6484
@dawnhouston6484 4 жыл бұрын
Kevin, I am sooo happy I found you. You explain things so well including your reasoning behind your actions. Thank you for helping me understand CSS better. I am really trying to improve my technique so you have been amazing. If you have any other resources, please let me know. I am always looking for new resources for learning.
@jonah5908
@jonah5908 4 жыл бұрын
Hey there is a big problem with this nav in Chrome in some instances. The nav scale transition will fire off on refresh and it even shows in your video (when codepen refreshes) you can see the nav scale firing off. Now I couldn't fix the auto firing of the transition, I did remove the background color and instead placed it in the :checked state and it fixed it. EDIT**: So far there are two solutions which I have found. 1) (Without javascript) Hide the fact that there is a bug by setting the background only on the "checked" state. That way the transition will still misbehave but there is no background property, so we can't see it! 2) (With javascript) Use javascript to disable transitions on page load. Link here --> css-tricks.com/transitions-only-after-page-load/ for more info.
@bdavibes
@bdavibes 4 жыл бұрын
Thank you for this. There's also the issue of still seeing the nav items misbehave. I changed their color to transparent and added it back on checked and in the media query. I also had to change how I selected them to retain the black hover color as well
@Nimbus_TheRainmaker
@Nimbus_TheRainmaker 2 жыл бұрын
Even old videos are gold. Thanks Kevin, I really meant it!
@mathiasmatanda8848
@mathiasmatanda8848 6 жыл бұрын
Welcome back Kevin, you just came in when i was struggling with this topic, keep up the good work and i thank God for people like you
@KevinPowell
@KevinPowell 6 жыл бұрын
Always nice when things are timed perfectly for someone, glad it helped Mathias :)
@jekkuh222
@jekkuh222 6 жыл бұрын
Thank you so much, I love your videos and look forward to them. I’ve learned so much from watching you!!!
@aravinds1267
@aravinds1267 4 жыл бұрын
Best Channel to Learn. High Quality Content. Thanks Kevin :)
@lloyd7miller
@lloyd7miller 5 жыл бұрын
Kevin, you're amazing. Love the CSS agility :)
@rasmuslundby6041
@rasmuslundby6041 4 жыл бұрын
What a heavy job making this video and at the same time putting it on codepen!! Wow, well done and thanks a lot! Reards from DK
@JLA85
@JLA85 3 жыл бұрын
I'm not even halfway through this video and I gave it a thumbs-up. This is a really good channel everything is broken down well, and I'm learning new things. Going to rebuild most of my sites in my Web Dev Portfolio I have so much CSS elements and practices that I should revise and use less code/clean-up my code, that it isn't funny. Glad I found this channel!!!
@ZainNL
@ZainNL 3 жыл бұрын
I think you made me enthusiastic about CSS animations in.. Forever! What an awesome video :)
@Protoscribe
@Protoscribe 6 жыл бұрын
Your first video appeared in my feed and after a refresh this one did. What nostalgia Kev!
@KevinPowell
@KevinPowell 6 жыл бұрын
Haha, that's awesome!
@Safrix
@Safrix 6 жыл бұрын
Thank you so much for this great tutorial! I have watched many of your videos and I must say that you are a great teacher! Keep up the good work! 💪
@KevinPowell
@KevinPowell 6 жыл бұрын
Thanks so much Antti, glad you're liking my content!
@meghrajraee873
@meghrajraee873 5 жыл бұрын
Loved the smooth explanation of each and every code. You have got a new subscriber.
@KevinPowell
@KevinPowell 5 жыл бұрын
Glad you liked it enough to sub, welcome aboard!
@kashthrob
@kashthrob 2 жыл бұрын
Kevin you are a life saver ,This is the best i have watched so far ,you made it easy , thank you and God bless you
@Krispy2piece
@Krispy2piece 4 жыл бұрын
Great Video! I love all yiour videos! The way you explain things makes it so simple to understand!
@AbhishekGhosh1805
@AbhishekGhosh1805 5 жыл бұрын
Probably one of the best tutorials so far! So many things to learn!!
@KevinPowell
@KevinPowell 5 жыл бұрын
Thanks Abhishek, so glad you liked it
@AhmedHassan-cm3yn
@AhmedHassan-cm3yn 2 жыл бұрын
Every second of this video is worth watching. Thanks a lot Kevin :-)
@kiranbokhari7750
@kiranbokhari7750 6 жыл бұрын
Hey Kevin. Just wanted to say that your videos are awesome and as a token of my gratitude and appreciation for all the hard work that you put in making these free videos for people like us I have signed up as a supporter of your channel at Patreon :D You sure as hell deserve more subscribers.
@KevinPowell
@KevinPowell 6 жыл бұрын
Amazing, thank you so much Kiran! I really appreciate it :)
@pliniojr95
@pliniojr95 2 жыл бұрын
Thank you for this video! Since i started to learn HTML and CSS, your videos have being recommended to me, but i wasn't paying too much atention to it. But i came across with this very problem you solved in this video and i couldn't be happier with such first impression that you gave me. I've already hitted the subscribe button and gonna look for more content you added to help improve my skills. Thank you again, and greetings from Brazil.
@Yuhg1
@Yuhg1 4 жыл бұрын
I know this video is like a year old, but thanks a lot for it. I'm forming myself as a web designer and this helps a lot. Definitely gonna check your other videos and learn from what i don't get to see in the classroom. Thanks!
@GauravSingh-sv5cw
@GauravSingh-sv5cw 3 жыл бұрын
Watching one video of Kevin and I end up learning 10 amazing things! Masterful ideas and ways of working! True for ALL videos!! Thank you thank thank you!!
@cringelord2823
@cringelord2823 4 жыл бұрын
This is truly great, thank you so much friend, this youtube channel is everything
@kerrykreiter445
@kerrykreiter445 3 ай бұрын
Echoing previous comments…thank you Kevin for all you videos, but especially this one. Maybe my favorite of any other KZfaq css/html tutorials. Note to anyone wanting to build a website: let this video be the first thing you watch!
@ericcomstock4888
@ericcomstock4888 6 жыл бұрын
First, I love the newsletter. Please keep them coming. This was a great tutorial because you incorporated so many of your previous mini classes. THANKS!
@KevinPowell
@KevinPowell 6 жыл бұрын
You're welcome Eric, so happy that you're enjoying the newsletter! And the video too, of course :)
@matthewshelton1538
@matthewshelton1538 5 жыл бұрын
You are my new favorite teacher. Very good job I love to complain but you have really put in the effort to explain and providing your source code to follow along with made my Heart swell with joy. Continue your awesome videos. Appreciate you, -Matthew
@dildgemckenzie8597
@dildgemckenzie8597 6 жыл бұрын
Just got yourself a new subscriber Kevin. Very glad to have found your excellent channel.
@meganrobinson4789
@meganrobinson4789 4 жыл бұрын
Thank you so much for sharing this with us all. I've found your tutorial to be immensely helpful as I work my way through building my first website. :)
@kkkkk943
@kkkkk943 3 жыл бұрын
Thank you for this tutorial! New to web development, feel real great having KZfaqr like u!
@jinx12373
@jinx12373 2 жыл бұрын
Been watching you for a while and it's your 3yr old video outro that got me to subscribe lol. Just didnt even think about subscribing, but I'm happy to show my support however I can.
@VitalyVasilevsky
@VitalyVasilevsky Жыл бұрын
It's absolutely insane! So clear and easy to do! Thank you a lot!
@saboya_dev7947
@saboya_dev7947 3 жыл бұрын
The only video that had the exact thing that I was looking for. Amazing, Thank you so much!!!!!! True master of his craft right here!!!!! Thanks allot
@whitehoof
@whitehoof 9 ай бұрын
Awesome tutorial, it's given me understanding of how things work. Thank you very much, Kevin, for your cool stuff on youtube. Your explanations always rock!
@okellocharles3097
@okellocharles3097 4 жыл бұрын
Bro, you made it looks so simple. Thank you. Be blessed.
@napalm_exe
@napalm_exe 5 жыл бұрын
Kevin Powell, you're on my list of people who I plan on donating to once I get my first job as a developer. Thank you so much and keep up the amazing work!!
@KevinPowell
@KevinPowell 5 жыл бұрын
Thanks Marco :)
@sirisiri2416
@sirisiri2416 3 жыл бұрын
amazing, as usual Kevin !!!! Awesome :D
@fionamorris8093
@fionamorris8093 3 жыл бұрын
Thank you so much!! Your directions were so clear, so I could understand everything--and I was able to play around and make my own design from it. Thank you, again!
@thobiaslarsen8336
@thobiaslarsen8336 3 жыл бұрын
This is very good for my school project haha. Amazing work. Love your videoes.
@AtomoSato
@AtomoSato 6 жыл бұрын
Incredible, really incredible, easy to follow, easy to understand and very well explained. As @Protoscribe said, I didn't know about the unset feature that it's very useful but until IE or EDGE didn't assume it's necessary to unset "by hand". Anyway, one of the better CSS trick explained and easy about a Nav bar. Congrats!
@KevinPowell
@KevinPowell 6 жыл бұрын
Very glad that you liked it Atomo! Sadly IE will never support unset, Microsoft has stopped development of it, other than security patches :\. Edge, on the other hand, is being pushed pretty hard, it's a good browser :). It should have support relatively soon I would guess.
@zbigniews497
@zbigniews497 4 жыл бұрын
thank You for recording!! Good Job!!
@heisteemi3428
@heisteemi3428 Жыл бұрын
This was actually the simplest tutorial on nav bar animations I’ve ever seen❤❤❤❤❤❤❤🎉🎉🎉🎉. You’ve really helped me a lot😊
@heisteemi3428
@heisteemi3428 Жыл бұрын
First time I’m commenting on a KZfaq video❤. I just had to
@katem1102
@katem1102 4 жыл бұрын
Thanks for the video. Honestly, to do all this as a beginner in CSS, it was a lil bit of a challenge, but worth it.
@opelGSi2006
@opelGSi2006 5 жыл бұрын
Thanks Kevin, It was really easy to follow. I hope you continue to make amazing informative content like you've been doing.. Great stuff, take care bro
@KevinPowell
@KevinPowell 5 жыл бұрын
Glad you enjoyed it Steven! Thanks for the kind words :D. And I've got not plans on stopping anytime soon.
@williamgreen7048
@williamgreen7048 Жыл бұрын
I thought I was pretty good at CSS, then I started watching your videos! LOL. Great stuff Kevin!
@lardosian
@lardosian 5 жыл бұрын
Cool, added those nice animations to my nav, thanks!
@kacperasdd4835
@kacperasdd4835 6 жыл бұрын
Thanks for another great tutorial! Totally worth to watch !
@nnwebdigital
@nnwebdigital 4 жыл бұрын
This tutorial is 2 year's old, but still is a very good. Kevin, you are great!
@rahxephon76
@rahxephon76 5 жыл бұрын
Thanks for this vid, I was looking for something like this for a long time. You sir just got a new subscriber.
@KevinPowell
@KevinPowell 5 жыл бұрын
Awesome, glad it helped and thanks for the sub!
@kevinbegin3049
@kevinbegin3049 3 жыл бұрын
Great video. Learned some new stuff and found a new rabbit hole to go down. Thank you!
@a_ricky
@a_ricky 2 жыл бұрын
I cannot thank you enough Kevin. Your videos have been transformative in my current learning process in college; my drive is back! I can watch and re-watch a video for an hour or two and feel I get a better understanding of how it all works better than any textbook reading or lecture video. You make it look easy while clearly explaining the areas that one may get stuck on. Keep it up! :)
@davidsuchan1641
@davidsuchan1641 3 жыл бұрын
Oh my god! This tutorial is a gold mine! Thank you for this, now i really do know how to make mobile first with no js which is great! *subscribed*
@margaiwangara2863
@margaiwangara2863 5 жыл бұрын
So cool, you just solved a problem I have had with transitions and display. Thanks a lot.
@CartmanMthrFckr
@CartmanMthrFckr 3 жыл бұрын
Nice solution! I hadn't thought of that at all, thanks for that!
@Zeuchon
@Zeuchon 3 жыл бұрын
Excellent tutorial Kevin - thanks a lot!
@SandraSun8
@SandraSun8 4 жыл бұрын
Just found your channel today and your way of explaining things click with me very well. Starting with this video to finally build the hamburger menu that I tried to build for the last weeks. Very confident that it's going to succeed now with the help of this video. And there's a big plus...: you're cute!
@codebrew420
@codebrew420 4 жыл бұрын
Awesome video, looking forward to more!
@bojan10294
@bojan10294 5 жыл бұрын
YOU ARE AWESOME! KEEP GOING! WISH YOU ALL THE BEST!!!
@aybak3k
@aybak3k 2 жыл бұрын
really best css tutorials are here im always sure I'll understand everything just like when I watch Elzero tuts unlike most CSS content out there
@parthparmar9798
@parthparmar9798 2 жыл бұрын
every time i get here on Kevin's channel, i learn something new about CSS.
@lexy3754
@lexy3754 5 жыл бұрын
hell yeah what an amazing video/guide
@KevinPowell
@KevinPowell 5 жыл бұрын
Glad you liked it lexy!
@VideosofIrishFarmingLife
@VideosofIrishFarmingLife 5 жыл бұрын
Great video! What a cool trick the checkbox toggle in css is instead of having to use js.. Thanks alot
@benney25
@benney25 2 жыл бұрын
I totally missed the poll, but if I had been there for the poll I would've voted for long form. Thank you for keeping it around :)
@jasonp6810
@jasonp6810 3 жыл бұрын
I just started coding, age 27. I dropped my Udemy courses for Kevin Powell's channel. Dude, I thought people were doing too much when they referred to you as the KING of CSS, but now...I'm really starting to believe that's an injustice. GOD OF CSS, mate. Here's why: You mention the intangibles of almost every piece of code at the beginner level. I can only assume you are phrasing in beginner terms because as a beginner myself, I completely understand. You'd make a killing on Udemy. Love you, and please continue to teach in the exact same way you are. Your CHANNEL will feed many homes.
Get your media queries working with the meta viewport HTML tag
3:41
Learn CSS Grid the easy way
37:04
Kevin Powell
Рет қаралды 876 М.
Универ. 10 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:04:59
Комедии 2023
Рет қаралды 2,8 МЛН
Khó thế mà cũng làm được || How did the police do that? #shorts
01:00
Please be kind🙏
00:34
ISSEI / いっせい
Рет қаралды 176 МЛН
MEU IRMÃO FICOU FAMOSO
00:52
Matheus Kriwat
Рет қаралды 33 МЛН
Container Queries are going to change how we make layouts
24:24
Kevin Powell
Рет қаралды 170 М.
5 CSS mistakes that I see way too often
19:03
Kevin Powell
Рет қаралды 359 М.
CSS em and rem explained #CSS #responsive
16:54
Kevin Powell
Рет қаралды 378 М.
Responsive Navbar Tutorial
13:35
Web Dev Simplified
Рет қаралды 500 М.
How to take control of Flexbox
16:01
Kevin Powell
Рет қаралды 113 М.
The secret to mastering CSS layouts
17:11
Kevin Powell
Рет қаралды 267 М.
min(), max(), and clamp() are CSS magic!
18:12
Kevin Powell
Рет қаралды 290 М.
Responsive design made easy
42:40
Kevin Powell
Рет қаралды 488 М.
Responsive Navigation Bar with mobile menu Using HTML & CSS
9:21
JavaScript Academy
Рет қаралды 58 М.
Are you using the right CSS units?
6:30
Kevin Powell
Рет қаралды 443 М.
Универ. 10 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:04:59
Комедии 2023
Рет қаралды 2,8 МЛН