Тёмный

Responsive navbar tutorial using HTML CSS & JS 

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

You can find the Frontend Mentor project here: www.frontendmentor.io/challen...
And the free Scrimba course here: scrimba.com/learn/spacetravel
🔗 Links
✅ Why I use HSL: • Are you using the WRON...
✅ More on feature queries (@supports): • Using Feature Queries ...
✅ More info on .sr-only: www.scottohara.me/blog/2017/0...
✅ CSS-Tricks article on disabling animations while resizing the viewport: css-tricks.com/stop-animation...
✅ Frontend Mentor: www.frontendmentor.io
✅ Scrimba: scrimba.com
⌚ Timestamps
00:00 - Introduction
01:23 - What we are starting with
03:38 - The flex utility class I am using
04:48 - Basic styling to get started
06:41 - The bold numbers
09:56 - Setting up the mobile version
14:50 - The blurry background effect
16:32 - Dealing with browser support for backdrop-filter
19:01 - Modifying the spacing with gap
20:49 - Adding the button to open and close the menu
24:36 - Styling the button
28: 16 - Making the button work - adding the functionality
41:48 - Styling the nav at larger screen sizes
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

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

 

15 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 406   
@CodeWithSahand
@CodeWithSahand 2 года назад
The Navbar looks amazing. I like the idea.
@spacemanstrikesagain
@spacemanstrikesagain Год назад
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 ❤❤
@KaerioMika
@KaerioMika 8 месяцев назад
That's so cool that you take your time and explain things well like with a friend. Really enjoyable to watch.
@mrCetus
@mrCetus 2 года назад
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.
@user-os4zb1wo6b
@user-os4zb1wo6b 9 месяцев назад
This man is pure gold. The sheer number of informative videos on CSS instead of just blabbering is insane. Get this man a subscription.
@electronicbasics1856
@electronicbasics1856 2 года назад
the tutorial everyone needed but no one asked for.
@dannyr2976
@dannyr2976 2 года назад
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!
@aakashkathait8328
@aakashkathait8328 2 года назад
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
@digitalalien3534
@digitalalien3534 2 года назад
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!
@LibraryOfTheOligarchs
@LibraryOfTheOligarchs 6 месяцев назад
Where are you along in your journey now? Good at JS?
@perkin524
@perkin524 2 года назад
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.
@aymenfyi
@aymenfyi 2 года назад
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! ♥
@joshuasteed899
@joshuasteed899 Год назад
🤣🤣🤣
@aymenfyi
@aymenfyi Год назад
@@joshuasteed899 what’s so funny?
@markdecilio491
@markdecilio491 2 года назад
i really like how you explain the details in a simple and understandable way! great tutorial Big Thanks
@Pavel-wj7gy
@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.
@ZANES-YT
@ZANES-YT 2 года назад
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.
@Anth-ony
@Anth-ony 2 года назад
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 RU-vidr!
@nv3796
@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
@davidtaylorgarcia8556
@davidtaylorgarcia8556 2 года назад
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!
@KevinPowell
@KevinPowell 2 года назад
Thank you so much for the kind words!
@nicolasnog26
@nicolasnog26 2 года назад
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!
@alexanderdavin1655
@alexanderdavin1655 2 года назад
It's really helpful explaining every attribute/property as you go along, thanks for that.
@user-ir9dm3yx4o
@user-ir9dm3yx4o 2 года назад
the design is just so clean and beautiful!! glad i found this, thanks for the video :D
@cemrekur5700
@cemrekur5700 2 года назад
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!
@CarlWicker
@CarlWicker 2 года назад
I'm currently working on this project in ReactJS, great project with some interesting challenges. It's very handy to have the figma files.
@Santino11238
@Santino11238 2 года назад
Thank you, as a MERN stack dev I'm always looking to learn more styling. Appreciate the content.
@steff9775
@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.
@rishabkumar5656
@rishabkumar5656 2 года назад
Hi Kev, this is one of the most easiest and well explained videos on youtube. Well done. Thanks for making it. 💖💖
@trentturner1546
@trentturner1546 2 года назад
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_ression
@dev_ression 2 года назад
Kevin is fantastic
@shishirjha1117
@shishirjha1117 2 года назад
your videos are kind of a one stop solution. thanks for explaining so well
@Petahsaur
@Petahsaur 2 года назад
Perfect timing Kevin, Just as I started to look into navbars and js last 2-3 days Thanks!
@shoumikkumbhakar6375
@shoumikkumbhakar6375 2 года назад
lol me too
@TiagoSilva-sq4gp
@TiagoSilva-sq4gp Месяц назад
Man you are the bomb, i was almost giving up of programing but with your videos i finally got it, thank you
@mirandasanchez4000
@mirandasanchez4000 10 месяцев назад
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 😊
@cohdalton
@cohdalton Год назад
Absolutely brilliant video, there's so much in it to go through and learn. Thank you, fantastic job!
@tmkdesigner
@tmkdesigner 9 месяцев назад
Thank you so much for all of your videos! Im learning so much!
@abadlibadreddine1960
@abadlibadreddine1960 Год назад
I started following this guys 2 months ago, i can now say that i fell in love with CSS
@myfavoritemusic2428
@myfavoritemusic2428 2 года назад
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!
@RayMaxey
@RayMaxey 2 года назад
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.
@nof123
@nof123 Год назад
been learning css for 2 months and wow I learned alot from this vid
@whoisitidk3980
@whoisitidk3980 2 года назад
Thank you for sharing so many useful HTML, CSS, and JS attributes, it really helped me a lot
@kevinwaag9976
@kevinwaag9976 2 года назад
really elegant way of doing this. Well done!
@SteveBonin
@SteveBonin 2 года назад
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
@sssself
@sssself 10 месяцев назад
You Are So Amazing Kevin!! Thanks for your existing👼
@Felipe-53
@Felipe-53 2 года назад
Wow, this came out right in I needed it. Thanks, you're awesome!
@DanteMishima
@DanteMishima 2 года назад
And you wonder why we call you king? How you knew this is what I needed is beyond me
@physlift9175
@physlift9175 2 года назад
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
@gabrielbaldez3178
@gabrielbaldez3178 11 месяцев назад
Excellent tutorial! Great things were taught and you explained in a very clear way.
@rheavictor7
@rheavictor7 2 года назад
Kevin, thanks man. I'm really improving m y CSS skills with your content!
@alex-suciu
@alex-suciu 2 года назад
props for making this accessible
@millermcdonell291
@millermcdonell291 2 года назад
You reall are CSS-king just like Kyle said. I have learned alot from you, thank you!
@mohammadnoman2457
@mohammadnoman2457 2 года назад
Thanks so much for this! Would love to see more mobile layout stuff with css
@Yuri-qr7ml
@Yuri-qr7ml 6 месяцев назад
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!
@ibnulferdous2349
@ibnulferdous2349 2 года назад
CSS from another planet! Loved it!
@roshanaryal310
@roshanaryal310 2 года назад
Great as always Kevin! I love your videos
@westonpeabody2420
@westonpeabody2420 7 месяцев назад
Just simply AWESOME! I love it!
@waardal
@waardal 2 года назад
My god just in time when i have to make a responsive portfolio as a school project, thank you so much!!
@sameerahlawat8480
@sameerahlawat8480 Год назад
Mr. Kevin you teaches the beauty of of html css & js in beast mode .
@chawza8402
@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
@ismailsossi3239
@ismailsossi3239 Год назад
you are a sweet person, thank you so much for trying!
@raho2005
@raho2005 2 года назад
holy cow, i learned a lot of new and interesting css features today. Thanks!
@aryan7069_
@aryan7069_ 2 года назад
I just did first challenge time management UI . I m glad i was able to do it without figma files
@maidenpotato
@maidenpotato 2 года назад
This was so amazing, thank you so much!
@sourav_96
@sourav_96 2 года назад
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 👍
@luiscarloscorderopena7030
@luiscarloscorderopena7030 2 года назад
I learned some very usefil tip watching this, thank you!
@06011983daniel
@06011983daniel 2 года назад
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.
@AbdicateDotNet
@AbdicateDotNet 2 года назад
As usual, a great, informative, and wonderful video!! 👏👏👏👏 Now I have to change my site! 😁
2 года назад
I can hear both hope and pleading in that sentence that 'Internet explorer is dead' :) Great video as always.
@StevenJGaming
@StevenJGaming 9 месяцев назад
I love you Kevin. You are my secret mentor.
@yajirushik2871
@yajirushik2871 2 года назад
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
@aynurseyfullazade786
@aynurseyfullazade786 2 года назад
more things like that wish you to be able to do🎉
@maloii_mylove
@maloii_mylove 2 года назад
I have been practicing the flex box whole right now 👍🏼
@trungduchua1786
@trungduchua1786 2 года назад
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!
@jen-vj4vq
@jen-vj4vq 2 года назад
Thank you for this video. I learned so many new things just watching it
@bunyameennurudeen173
@bunyameennurudeen173 2 года назад
Great lesson from a greater TechEducator
@xomgitsjay
@xomgitsjay 2 года назад
Yay an updated navbar video!
@aayushjamuar9900
@aayushjamuar9900 2 года назад
Dude 🥺🥺🥺🥺, i needed this sooo much
@TheMrFelin
@TheMrFelin 2 года назад
Awesome tutorial! Thanks for your nice explanation!
@kunal7066
@kunal7066 2 года назад
That was very helpful.Thank you so much!
@Mohammadreza-Dolati
@Mohammadreza-Dolati Год назад
Sir , your videos are full of useful contents, thanks a for your helping, big ❤️ from Iran
@GoldoMania.
@GoldoMania. 2 года назад
Hello Kevin! i realy love what you are doing, great job.
@chetankhulage
@chetankhulage 2 года назад
🥺🤤🤤🤤🤤🤤thankssss your channel is blessings for us🥺🥺🥺 I'm in super love with CSS 🤤🤤🤤🤤🤤
@fredfonseca1474
@fredfonseca1474 2 года назад
Good stuff I'm definitely taking a look on that course
@VitoOnYoutube
@VitoOnYoutube 2 года назад
Is there any advantage in making the span for "Menu" instead of setting aria-label=”Open menu” directly on the button?
@user-rb8bv8hw3g
@user-rb8bv8hw3g 7 месяцев назад
Than you soo Much,Really Help full,
@Ree-rr1js
@Ree-rr1js 2 года назад
I'M AMAZED !!!!
@christopherboe
@christopherboe 2 года назад
@supports is rad! I have never used that before thank you!
@sororbudwiser
@sororbudwiser 2 года назад
Great tutorial with excellent tips!
@thtasca
@thtasca 2 года назад
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.
@Oj-Gaming-vt6vd
@Oj-Gaming-vt6vd 5 месяцев назад
Hey kevin :D Amazing vids mate, they are really helping me progress on my own website :D Keep up the good work :)
@arifurrahman9133
@arifurrahman9133 2 года назад
Wow.thank kevin.always learn new from you.
@Wynorrific1
@Wynorrific1 7 месяцев назад
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
@ZionBetter
@ZionBetter Год назад
awesome video. helped save me tons of time on my project
@pranavyeole102
@pranavyeole102 2 года назад
This channel is really really useful
@WOLF91
@WOLF91 2 года назад
Cool stuff man, just subbed
@vavaiva4080
@vavaiva4080 2 года назад
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…
@jacquelinedawn9510
@jacquelinedawn9510 2 года назад
You're awesome! And you have a nice voice! Keep up the great work!
@bartekpaczesny508
@bartekpaczesny508 2 года назад
Thanks for the tutorial...it really helped out :)
@tonytony-fc6gq
@tonytony-fc6gq Год назад
THANK YOUI VERY MUCH!!!!!, this helped soo much
@everythingisfine9988
@everythingisfine9988 2 года назад
Nice slick design. Well done 👍✅
@pranavyeole102
@pranavyeole102 2 года назад
Learnt so much from this video, thankyou so much 😁
@timidjawa6324
@timidjawa6324 2 года назад
Absolutely Awesome!
@Daniel-pg8ln
@Daniel-pg8ln 2 года назад
Dude, this was awesome!! Hello from Brasil 😁
@tomisadone1145
@tomisadone1145 Год назад
Man you're the best
@SrckyBoi
@SrckyBoi 2 года назад
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.
@cavemutt
@cavemutt Год назад
Thank you 3000!!!
Далее
Create a clean, modern navigation with HTML & CSS
25:17
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 10 тыс.
26 Incredible Use Cases for the New GPT-4o
21:58
Просмотров 62 тыс.
23 CSS features you should know (and be using) by now
31:31
How to take control of Flexbox
16:01
Просмотров 81 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 878 тыс.
Incredible scroll-based animations with CSS-only
32:23
Просмотров 323 тыс.