I’d like to tell you what I learned about HTML and CSS from a five-year-old child.
Just as I opened my code editor and browser and started writing simple HTML boilerplate, my niece walked in. She is small and normally very loud, but on this particular day she stood quietly next to my desk, as if looking for something.
Niece: Wassat? Wassat you typing?
Me: Something for the computer.
Niece: It looks funny. All the little lines.
Me: They are instructions.
Niece: Instwu… inschu… instwushun?
Me: Instructions.
I paused for a moment and remembered one Quora question I stumbled upon explaining HTML and CSS to a child a few days earlier. I totally skipped the question—I was just scrolling at the time—but with my niece standing next to me, I wished I’d looked at it again.
Here’s how I answered. It’s funny how explaining something you do almost naturally teaches you about yourself and what you take for granted.
We build a “house” with “bricks”
My niece didn’t seem to care about the actual code I was writing, such as the specific HTML tags that were in my code editor. No, she was more concerned about what was happening in the browser.
Niece: Oh. So, this big box is your house?
Me: Kind of, yes.
At that point, the screen was blank and looked more like a vast area than a web page. I love that she saw a big white space and compared it to a house I was building. Her observation prompted me to explain the most basic part of what I was doing.
I told her that the editor is where I put my building blocks – not unlike a place where she keeps her LEGOs together as building materials. She watched quietly as I added a simple headline, a short line of text, and a button that had no behavior yet.
Her eyes were glued to the screen as I refreshed my browser, a few texts appeared. She pulled her head back slightly as the screen refreshed, changing from an empty house to something with rendered elements.
She got it! No, she couldn’t read the code. But she saw the connection between the house and the LEGO pieces that gave it structure.
The LEGOS are just bricks in the house
I explained that HTML structures the house by just stacking bricks on the white screen. It has nothing to do with what those stones should look like. A headline is a headline, a paragraph is a paragraph, and a button is a different kind of brick. The browser follows my instructions for adding the bricks I want to add to the house.
When I tried to explain that to her, I had to slow down. I found myself describing HTML as the vocabulary of the page: it gives names to each piece so the browser can build the document tree behind the scenes. Then the tree becomes the foundation on which CSS and JavaScript can later rely. Without those names, the browser would not know where the different elements should relate to each other. I was already finding it difficult to describe HTML without diving into the other core languages.
I paused, watching her reaction, and was reminded of something. Any polished writing starts as a bare idea and then turns into a draft, just as a polished interface starts with a draft. Before any color, space or layout, we only have structure.
Explaining this to her made those fundamentals feel important to me again, just as they did when I first realized the importance of keeping interests separate between HTML, CSS, and JavaScript.
My niece started staring at my screen for an inordinate amount of time, and the silence felt heavy. Even though the structure was there, the page still looked blank to her and she finally asked why the page looked like that.
She expected something more like a house; something with shapes and rooms. What she saw instead was a flat surface with nothing to stick to. I pointed to the editor and showed the semantic tags I had written. The acts as a container, I told her. The
I explained to her that those elements behave more like rooms and doorways than decoration. They tell the browser what exists and how one component relates to another. They don't make anything look good, they 'frame' documents like you frame a house before hanging doors, walls, paint and carpet.
Decorate the house
Once she liked the concept of structure, I started adding some very simple CSS rules. I kept it minimal by using one widthsome height and a border to one of the elements. She saw the characters appear in my dark editor with the same focus you would give to a puzzle. To her, those property names, curly brackets, and brackets don't look like layout instructions, but rather like unfamiliar symbols.
Then came the time when I had to take a step back and try to explain CSS to her. I told her that what I typed are also instructions, just like HTML, but instead of instructions for laying bricks, these were instructions for what the bricks should look like. For example, I can tell the browser how big a rock should be, where it should be and what it should look like.
This is the core of CSS, right? You select a stone and describe what it looks like in the browser. Saying it out loud reminded me of that CSS is literal and logical.
A width. A height. And a border. That's all it takes to add a little shape.
I know there is probably a more "academic" way to teach CSS. For example, writing modes are probably an excellent starting point to get into directionality and positioning before even a hint of color appears on the page. That's all fine and all, but that's all nonsense to a five-year-old. I can't even go into things like aspect-ratio without first diving into the basics width And height. Those beautiful things can wait now.
What I was looking for was an “A-ha!” moment. I continued the exercise and drew a house. Then I refreshed the page and the structure finally had a shape.
Of course, it wasn't much: a small triangle that looked like a roof, a square that pretended to be a wall, two small squares for windows, and a skinny rectangle that I suspect might be a door. It looked like something you would draw quickly with a dull pencil. Anyway, my niece immediately leaned forward and almost hit her forehead on the screen.
Niece: Why does the house not have color? It looks so plain.
Me: I haven’t added color yet.
Niece: You forgot. You always forgot.
Me: I’ll add it.
I added some color to the house. And then it started to click.
Niece: So this brick says what is there.
Me: Yes.
Niece: And this color thing make it pretty?
Me: That’s right.
Niece: So HTML says what is there, and CSS makes it pretty.
Me: Exactly.
That observation provided the perfect opportunity to clarify the separation between HTML and CSS. HTML describes what exists in the document tree. CSS describes what those elements should look like. Without styling, every element is technically present but visually absent.
“Now it seems Real!” she declared. She even pointed to the drawers in the room we were in and related them to the structure of the boxes and the decorations that made them look that way.
HTML captures the pieces and CSS brings them to life with lines, colors, and other bits of decoration and positioning. This can still feel magical even to us, right? Bringing my niece to this point reminded me why even the basics of what we do are fulfilling.
What I learned from a five year old
“Now I can use the computer too!” she announced. Then my niece decided she was satisfied and bounced out of the room. I kept the house on my screen for a while longer and thought about the exchange.
It's easy to get into a rut where the magic of what we do is replaced by other things. We have a task to do and we sweep away the 'boring' stuff to get things done. And once those things are done, how often do we pause and look at what we're doing, line by line?
That's the biggest thing I learned from my five-year-old niece: There is still magic in what we do, no matter how big or small the task. We may sit for hours in blog posts and social discussions and become pedantic about preferred tool sets, specific techniques, what is considered best practice and what things should be called. And yes, these matter. But the short time I spent with my niece felt more important, meaningful, and fulfilling than anything else. Remove everything and the web still runs on something simple.
Those few boxes with color on them hold my attention longer than the assignment I should have done. I don't even know why I kept staring at it. Maybe because I realized that I'm rushing through these basics without even noticing. That moment forced me to slow down and actually look at what I was doing, line by line, instead of jumping straight to the point.
To me, HTML suddenly looks less like code and more like building materials. CSS, meanwhile, not only steps in with a paintbrush, but also has the ability to cast those materials into beautiful shapes like clay.
So even though my niece came to me to help her understand HTML and CSS, she was actually the one who taught me a thing or two about them. It was the way she looked at the page and saw a house that made things click for me more succinctly than how I've heard or read it elsewhere. The way she articulated the relationship between HTML and CSS was straight to the point, in a way that nothing else has done for me.
How would you explain it?
Taking the time to explain the basics of HTML and CSS has proven to me that teaching what we do (or anything, really) reveals what we know and especially what we assume we know. Teaching someone who has never seen or written a single line of code forces you to check yourself. Apparently that's something The Feynman technique because learning is about: teaching to learn.
Learning is a subjective journey and not a one-size-fits-all arrangement. Some of us learn visually, some learn by reading, and others learn through activity. And of course, something like age drastically affects things. Adults come in with a lot more context and experience than a child, even if that context and experience has nothing to do with writing code. So while I might have taken a more technical route with an adult, finding an analogy that resonates with something my niece is dealing with may have been the most effective path for her, even if it didn't actually require writing code.
That begs the question: how would you have gone about explaining HTML and CSS to my niece? Or maybe not my niece, but a five-year-old in your life that you know? What, if any, analogies would you use? I think it would be really cool if you took the time to do just that and think about exactly what you said. What does that say about what you know and assume about your work?
Read more
#time #explain #HTML #CSS #year #niece #CSS #tricks