I like the split-screen animated format for explaining this topic.
This is a great tutorial—I just love the interactive parts that really help make things click.
It’s heavy on computer science, but this is a fascinating endeavour. It’s a work-in-progress book that not only describes how browsers work, but invites you to code along too. At the end, you get a minimum viable web browser (and more knowledge than you ever wanted about how browsers work).
As a black box, the browser is either magical or frustrating (depending on whether it is working correctly or not!). But that also make a browser a pretty unusual piece of software, with unique challenges, interesting algorithms, and clever optimizations. Browsers are worth studying for the pure pleasure of it.
See how the sausage is made and make your own sausage!
This is a truly wonderful web page! It’s an explanation from first principles of how cameras and lenses work.
Then you realise that every post ever published on this personal site is equally in-depth and uses the same content-first progressive enhancement approach.
This is a really good description of the role of a front-end developer.
That’s front end, not full stack.
Matt made this website to explain RSS to people who are as-ye unfamilar with it.
An excellent and clear explanation of specificity in CSS.
Everything you ever wanted to know about
I love how Remy explains front-end development to his kids:
The bones are the HTML. Each bone has a name, we call them tags (or elements).
…the skin and the paint on the skin, this is CSS.
I can see this coming in very handy at Codebar—pop any CSS selector in here and get a plain English explanation of what it’s doing.
This is a wonderful interactive explanation of the way CSS hierarchy works—beautiful!
This article by Cassie is so, so good!
First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
As well as graciously hosting Indie Web Camp Berlin on the weekend at Mozilla’s offices, Yulia has also drawn this super-cute comic.
The latest explainer/game from Nicky Case is an absolutely brilliant interactive piece on small world networks.
Some great ideas here about using metaphors when explaining technical topics.
I really like these four guidelines for good metaphors:
Such a great primer on game theory—well worth half an hour of your time.