How to build a responsive nav with no Javascript!

In this video, I’ll teach you to build fancy collapsible navigation without using any Javascript. Just HTML and CSS!

I love that we can make clever use of CSS and HTML to achieve something most people use Javascript for, but you won’t get far as a web developer without Javascript. That’s why I made this cheat sheet to help you learn it:

Want to Learn Javascript Faster?

Get my free reference with code examples for basic Javascript concepts. Jog your memory on variables, loops, if statements, and more with a quick glance! I’ll also share other resources to help kickstart your web dev career.

If you want to work along with the video, start from this pen. Open that and click the “Fork” button in the bottom-right so you can get your own copy to work with.

The CSS framework I used is Milligram. I like to use it because it takes just basic HTML and makes it look nice. I don’t have to sprinkle a bunch of wacky classes around to get something that looks decent.

I talk about the “+” selector and refer to it in the video as the “sibling selector.” More accurately, it’s the adjacent sibling selector. It only selects the UL if it is a sibling of the checked checkbox and also if the two are adjacent (meaning no elements between).

Hope you enjoy this tutorial! Tweet at me if you have questions.