Create a clean, modern navigation with HTML & CSS

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:00 - The HTML
02:40 - General layout styling
05:00 - Styling the navigation
08:55 - Rounding right side of the active nav item
16:30 - Adding the animation

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[GetPsyched]

Kevin, i just wanted to say, you're a really nice person and you make the world a better place. Thanks for all the amazing content you give us.

[memoryleakerz]

Kevin... for the past 2 years I've been watching you, you are still making me doubt my frontend skills and teaching me a whole new and awesome set of skills

[jameskamau]

I can't believe you solved an issue that took me 3 weeks to solve in just 15 minutes. This is amazing thanks

[easternadventures]

Seems like every time I'm about to implement something, you come out with a video for almost exactly what I need and make my life a little bit easier. Thanks!

[jimhillr]

Love your channel. Using a bit of geometry you know that the corner will be sqrt(2) * --border-radius away from ur before elements center. Sqrt(2) is 1.414 so if you make your box shadow stroke (0.5 * --border-radius) you are guaranteed to fill the gap while basically minimizing the chance of overlapping other content on the page.

[gbbarn]

Thank you Kevin for these super helpful videos!! Didn't know about the view-transition meta tag.

[ochferdi]

Hi there! As a trainer at a coding bootcamp, you so often already helped me give my students additional and deep informations on several topic just like Grid, Position etc.

Now to give something back for all the times you helped me: I personally use a <menu> element instead of <ul> for my navigation lists, as per definition by MDN Web Docs I find it more fitting. In the end it may not really matter much, as the browser treats "menu" exactly the same as "ul" (giving it the exact same default stylings, too). However, it makes reading and understanding code just this tiny bit more comfortable in my opinion.

[clevermissfox]

How did you know I was working on a left fixed nav?? Amazing, I’m sure this will help me level up !

[beardedraider]

The more I watch your tutorials, the more I believe I am a frontend dev, really enjoy seeing code come to life!

Thank you so much, you have helped me understand frontend so much over the two years I've been studying.

[tspander]

Cool project! I think you could achieve the rounded corners effect semantically cleaner though by keeping the pseudo elements square and using a radial gradient as the background image. For the top one you would have the center of the gradient be in the top left corner, and add a transparent color stop at --border-radius, then another color stop also at --border-radius that has the body-bg color. :)

[p_o_z_e]

Love these kind of videos, i gain so much new insight and it feels amazing. I do FE work but never the most intense design aspects of it so watching these is a great way to learn and improve.

[Wikkido]

12:58 I'm giggling, loving the videos as always!

[knolljo]

Your css intuition is so good, thats probably the result of years of building stuff with it

[deathone]

Minor suggestions before the transitions.
.nav-list li.active { background-color: transparent; ... }
.nav-list li.active::before { ... } for the box-shadow make it based on your --border-radius and gap bewteen nav and main, maybe a min() between the two.

[TitanBhaiya]

I was searching for that yesterday and guess what Kevin just read my mind . Thanks Kevin You're always a great help

[PrinceDalsaniyaYT]

Pretty straight forward. Lovely tutorial. Keep up the good work, we support you. 👍

[VedanthKUditya]

It was absolutely wonderful hover effects. I'd like to call videos as a session more than video. It's that useful

[williamburl]

Thanks Kev! Awesome content as always.

[Hoches]

Man, you are such a wizard! The vid gave me a brain freeze but I still love it. <3

[mnamhie]

I really enjoy listening to you, Kevin, and watching your videos. You have such an easy manner about yourself. The time just flies by because we enjoy it so much. And you’re a great teacher as well. Keep up the good work.