I like to think of front-end web development as a tasty two-layer cake with a splash of decoration on top. Because, as Donkey reminded Shrek, CAKE! Everybody loves cakes! Cakes have layers!
HTML: The bottom layer
Semantic HTML forms the bottom layer of the cake.
It's the most important layer, because without it, the rest of our cake will fall apart. We need a solid foundation!
CSS: The top layer
The top layer of the cake is made of CSS.
We place it on top of the bottom layer so our cake isn't just a boring one-layer cake. A one-layer cake would taste just as good, but the second layer makes it a bit more exciting.
JS: The decorations (OPTIONAL)
The OPTIONAL decorations are created with JavaScript.
If it's a special occasion, we can add more bells and whistles. This is the time to add all the frosting, sprinkles, figurines... You name it.
But only if the occasion calls for it! There's no point in adding all that decoration when all we need is a simple sponge cake.
Summary
I'm essentially describing progressive enhancement. You should worry about your HTML first, then your CSS, then your JS.
In that order.
HTML + CSS + JS === 🎂