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.
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.
3:15 - starting the markup 3:15
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
CSS Variables: https://youtu.be/PHO6TBq_auI
Pseudo elements: https://www.youtube.com/playlist?list=PL4-IK0AVhVjPBX_HelwDlNsTiyr2YGSBw
Hamburger to X animation: https://youtu.be/FqbOu5ZRFag?t=24m50s
CSS Grid: https://www.youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
Support me on Patreon: https://www.patreon.com/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 YouTube channel, make sure to follow me on Instagram and Twitter.