Тёмный

Create a responsive navigation nav with no JS! 

Kevin Powell
Подписаться 907 тыс.
Просмотров 470 тыс.
50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

 

15 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 942   
@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!!
@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
@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.
@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.
@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!
@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!
@taipham6302
@taipham6302 3 года назад
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.
@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!
@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.
@arturhakobyan3022
@arturhakobyan3022 3 года назад
This channel is like an island with the treasures in form of CSS lessons. Great job Kev 🔥🔥🔥🔥🔥
@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.
@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
@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 :)
@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.
@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!
@user-of3xm7sv5g
@user-of3xm7sv5g 5 лет назад
Thank you, Kevin, for such a powerful, lesson.
@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 3 года назад
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.
@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.
@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
@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 4 года назад
This is the best hamburger recipe on RU-vid
@KevinPowell
@KevinPowell 4 года назад
Haha 😂
@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!
@mrmamun5830
@mrmamun5830 4 года назад
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!
@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 :(
@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!
@simonhallin1640
@simonhallin1640 5 лет назад
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.
@xnajx
@xnajx 5 лет назад
Thanks! This really helped. I just made my first website and I don't know JS yet.
@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!
@dimitridehouck9506
@dimitridehouck9506 5 лет назад
What a gem your channel is! Love it! Thank you so much for sharing!
@Nimbus_TheRainmaker
@Nimbus_TheRainmaker 2 года назад
Even old videos are gold. Thanks Kevin, I really meant 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!
@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! ;)
@lloyd7miller
@lloyd7miller 5 лет назад
Kevin, you're amazing. Love the CSS agility :)
@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!!!
@j.e.1620
@j.e.1620 4 года назад
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 3 года назад
+1
@ganeastefan4287
@ganeastefan4287 3 года назад
add new ul and give it a different class, display:block,position: relative/absolute respectively, style them and so on.
@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!
@ZainNL
@ZainNL 3 года назад
I think you made me enthusiastic about CSS animations in.. Forever! What an awesome video :)
@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
@markjordan7800
@markjordan7800 6 лет назад
we did miss you ;)
@KevinPowell
@KevinPowell 6 лет назад
Awww thanks 😊 I missed you guys too
@banicans5299
@banicans5299 11 месяцев назад
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
@meganrobinson4789
@meganrobinson4789 3 года назад
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. :)
@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!!!
@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
@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.
@kerrykreiter445
@kerrykreiter445 2 месяца назад
Echoing previous comments…thank you Kevin for all you videos, but especially this one. Maybe my favorite of any other RU-vid css/html tutorials. Note to anyone wanting to build a website: let this video be the first thing you watch!
@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.
@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!!
@kkkkk943
@kkkkk943 3 года назад
Thank you for this tutorial! New to web development, feel real great having RU-vidr like u!
@okellocharles3097
@okellocharles3097 4 года назад
Bro, you made it looks so simple. Thank you. Be blessed.
@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!
@mike82967
@mike82967 4 года назад
This is my leading CSS learning site, well done.
@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!
@Krispy2piece
@Krispy2piece 4 года назад
Great Video! I love all yiour videos! The way you explain things makes it so simple to understand!
@CartmanMthrFckr
@CartmanMthrFckr 3 года назад
Nice solution! I hadn't thought of that at all, thanks for that!
@yogawithcarlos
@yogawithcarlos Год назад
SCREEN READERS: I thought this sandwich menu would read some bizarre spans that made no sense. Turns out it doesn't. It quite simply reads the nav items. It is screen reader proof. On mac voiceover it reads: 'navigation; list (x) items, etc.' Nicely done Kevin. Cheers.
@kahsthrobkashthrob9761
@kahsthrobkashthrob9761 Год назад
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
@dildgemckenzie8597
@dildgemckenzie8597 5 лет назад
Just got yourself a new subscriber Kevin. Very glad to have found your excellent channel.
@AhmedHassan-cm3yn
@AhmedHassan-cm3yn 2 года назад
Every second of this video is worth watching. Thanks a lot Kevin :-)
@aravinds1267
@aravinds1267 4 года назад
Best Channel to Learn. High Quality Content. Thanks Kevin :)
@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 :)
@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!
@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!
@kevinbegin3049
@kevinbegin3049 3 года назад
Great video. Learned some new stuff and found a new rabbit hole to go down. Thank you!
@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 RU-vid that I can find. Much thanks to you, Kevin! really appreciate the video.
@KevinPowell
@KevinPowell 4 года назад
Really glad you liked it!
@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!
@Zeuchon
@Zeuchon 3 года назад
Excellent tutorial Kevin - thanks a lot!
@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!
@nnwebdigital
@nnwebdigital 4 года назад
This tutorial is 2 year's old, but still is a very good. Kevin, you are great!
@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.
@thobiaslarsen8336
@thobiaslarsen8336 3 года назад
This is very good for my school project haha. Amazing work. Love your videoes.
@VitalyVasilevsky
@VitalyVasilevsky Год назад
It's absolutely insane! So clear and easy to do! Thank you a lot!
@margaiwangara2863
@margaiwangara2863 5 лет назад
So cool, you just solved a problem I have had with transitions and display. Thanks a lot.
@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*
@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.
@cringelord2823
@cringelord2823 4 года назад
This is truly great, thank you so much friend, this youtube channel is everything
@Safrix
@Safrix 5 лет назад
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 5 лет назад
Thanks so much Antti, glad you're liking my content!
@williamgreen7048
@williamgreen7048 Год назад
I thought I was pretty good at CSS, then I started watching your videos! LOL. Great stuff Kevin!
@kacperasdd4835
@kacperasdd4835 5 лет назад
Thanks for another great tutorial! Totally worth to watch !
@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 :)
@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
@CapsLock33
@CapsLock33 2 года назад
the transition: transform 400ms ease-in-out; is super clean!!!!!
@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
@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 4 года назад
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
@jamesrosemary2932
@jamesrosemary2932 5 лет назад
Watching it one year later, I learned a few things!. Thanks!
@whitehoof
@whitehoof 7 месяцев назад
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!
@stahelpeter
@stahelpeter 5 лет назад
Hi Kevin thank you so much for this tutorial and all the valuable explanations. You helped me a lot!
@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.
@marklong2133
@marklong2133 4 года назад
This was great. Thank you for creating this video. The only think I would like to see in addition to what you did here is to add subnav items and drop down icons using the same technique.
@mihaichildesco8276
@mihaichildesco8276 5 лет назад
very good video, like because you explain what you do. I didnt know about grid lines that I can see in dev console. Now I want to see all your videos for learning, i hope to have time to do this
@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 RU-vid video❤. I just had to
@michalroesler
@michalroesler 7 месяцев назад
We want more long and in-depth videos. I'll watch it until the very end.
@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.
@christiancolewan6523
@christiancolewan6523 2 года назад
Its so amazing just how detailed the explanation of this tutorial
@emuemhonjieonosereme2495
@emuemhonjieonosereme2495 Год назад
Thank you. First time I’m seeing navbar with no JS
@SimonHallMelbs
@SimonHallMelbs 2 года назад
Extremely helpful video, well done.
@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 :)
Далее
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 2,8 тыс.
Secret bracelet
00:35
Просмотров 9 млн
Floats, Flexbox, Grid? The progression of CSS layouts
27:00
Create a clean, modern navigation with HTML & CSS
25:17
5 simple tips to making responsive layouts the easy way
15:54
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,3 млн
It's time for a change...
4:11
Просмотров 62 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 878 тыс.
How to take control of Flexbox
16:01
Просмотров 81 тыс.
23 CSS features you should know (and be using) by now
31:31