I want to inform you what I discovered from a five-year outdated little one about HTML and CSS.
Simply after I opened my code editor and browser and commenced writing primary HTML boilerplate, my niece walked in. She is tiny and usually very loud, however was standing quietly subsequent to my desk on this explicit day, as if she was in search of one thing.
Niece: Wassat? Wassat you typing?
Me: One thing for the pc.
Niece: It seems to be humorous. All of the little traces.
Me: They're directions.
Niece: Instwu… inschu… instwushun?
Me: Directions.
I paused and remembered a Quora query I came across few days earlier about explaining HTML and CSS to a toddler. I completely skipped the query — I used to be simply scrolling round on the time — however now with my niece standing subsequent to me, I discovered myself wishing I’d seemed it over.
Right here’s how I answered. It’s humorous how explaining one thing you do virtually naturally teaches you about your self and what you are taking without any consideration.
We’re constructing a “home” with “bricks”
My niece didn’t appear to care concerning the precise code I used to be writing, like the particular HTML tags that littered my code editor. No, she was extra involved with what was occurring within the browser.
Niece: Oh. So, this massive field is your home?
Me: Sort of, sure.
At the moment the display was empty, trying extra like an enormous expanse than a webpage. I like that she noticed a giant white area and likened it to a home that I used to be constructing. Her commentary pushed me to clarify probably the most primary a part of what I used to be doing.
I instructed her the editor is the place I place my constructing blocks — not completely not like having a spot the place she retains her LEGOS collectively as constructing supplies. She watched quietly whereas I added a easy heading, a brief line of textual content and a button that didn’t have any conduct but.
Her eyes have been glued on the display as I refreshed my browser, just a few texts appeared. She jerked her head backward a bit when the display refreshed and turned from an empty home to one thing with rendered parts.
She was getting it! No, she couldn’t learn the code. However she may see the connection between the home and LEGO items that gave it construction.
The LEGOS are simply bricks in the home
I defined that HTML is what buildings the home, merely stacking bricks on the white display. It has nothing to do with what these bricks ought to appear like. A heading is a heading, a paragraph is a paragraph, and a button is one other sort of brick. The browser follows my directions for including the bricks I need to the home.
Attempting to clarify that to her pressured me to decelerate. I discovered myself describing HTML because the vocabulary of the web page: it offers names to every piece so the browser can construct the doc tree behind the scenes. Then the tree turns into the inspiration that CSS and JavaScript can later depend on. With out these names, the browser wouldn’t know the place the totally different parts ought to relate to 1 different. Already, I used to be discovering it robust to explain HTML with out entering into the opposite core languages.
I paused, watching her response, and was reminded one thing. Each polished writing begins as a naked concept after which transforms into a top level view — identical to a refined interface begins with a top level view. Earlier than any colours, area, or structure, all now we have is construction.
Explaining this to her made these fundamentals really feel essential to me once more, like after I first realized the significance of getting a separation of considerations between HTML, CSS, and JavaScript.
My niece started to stare at my display for an inordinate period of time, and the silence felt heavy. Although the construction was there, the web page nonetheless seemed empty to her and he or she lastly requested why the web page seemed like that.
She anticipated one thing extra like a home; one thing with shapes and rooms. What she noticed as a substitute was a plain floor with nothing to carry on to. I identified the editor and confirmed the semantic tags I had written. The acts as a container, I instructed her. The
like the underside flooring.
I defined to her that these parts behave extra like rooms and doorways than ornament. They inform the browser what exists and the way one half pertains to one other one. They don’t make something look good, they “body” doc such as you body a home earlier than placing up doorways, partitions, paint, and carpet.
Adorning the home
As soon as the idea of construction clicked along with her, I started including some quite simple CSS guidelines. I stored it minimal by including a width, some peak and a border to one of many parts. She watched the characters seem in my darkish editor with the identical focus you’ll give to a puzzle. These properties names, curly braces and brackets look nothing like structure directions to her however slightly unfamiliar symbols.
Then got here the second, I needed to take a step again once more and attempt to clarify CSS to her. I instructed her what I used to be typing are additionally directions, identical to HTML, however as a substitute of directions for laying bricks, these have been directions for the way the bricks ought to look. For instance, I can inform the browser how massive a brick must be, the place it ought to sit, and the way it ought to seem.
That is the core of CSS, proper? You choose a brick and describe to the browser the way it seems to be. Saying it out loud jogged my memory that CSS is literal and logical.
A width. A peak. And a border. That’s all it takes so as to add somewhat form.
I do know there’s most likely a extra “educational” technique to train CSS. For instance, writing modes are most likely a superb start line to get into directionality and positioning earlier than a single splash of coloration is on the web page. That’s all effective and whatnot, however all of that’s gibberish to a five-year outdated. I can’t even get into issues like aspect-ratio with out first entering into the fundamental width and peak. These fancy issues can anticipate now.
What I used to be in search of was an “A-ha!” second. I continued the train and drew somewhat home. Then I refreshed the web page and the construction lastly had a form.
It wasn’t a lot, in fact: somewhat triangle that seemed like a roof, a sq. pretending to be a wall, two tiny squares for home windows, and a thin rectangle that I suppose may very well be a door. It seemed like one thing you draw quick with a boring pencil. Regardless, my niece leaned in immediately, virtually bumping her brow on the display.
Niece: Why does the home not have coloration? It seems to be so plain.
Me: I haven’t added coloration but.
Niece: You forgot. You all the time forgot.
Me: I’ll add it.
I added somewhat coloration to the home. And that’s when issues began to click on.
Niece: So this brick says what's there.
Me: Sure.
Niece: And this coloration factor make it fairly?
Me: That’s proper.
Niece: So HTML says what's there, and CSS makes it fairly.
Me: Precisely.
That commentary offered the proper alternative to make clear the separation between the HTML and CSS. HTML describes what exists within the doc tree. CSS describes how these parts ought to seem. With out styling, each aspect is technically current however visually absent.
“Now it seems to be actual!” she declared. She even pointed to the drawers within the room we have been in and associated them to the construction of bins and the decorations that made them look the best way they have been.
HTML lays down the items and CSS brings them to life with traces, colours, and different bits of ornament and positioning. This could nonetheless really feel magical even to us, proper? Getting my niece thus far jogged my memory why even the fundamentals of what we do is satisfying.
What I discovered from a five-year outdated
“Now I can do pc, too!” she introduced. That’s when my niece determined she was happy and bounced out of the room. I stored the little home on my display for some time longer and thought concerning the trade.
It’s straightforward to get right into a rut the place the magic of what we do is outdated by different issues. We’ve got a job we have to do and we sweep away the “boring” stuff to get issues completed. And as soon as these issues are completed, how typically can we pause and really have a look at what we’re doing, line by line?
That’s the largest factor I discovered from my five-year outdated niece: there’s nonetheless magic in what we do, irrespective of how massive or small the duty. We would spend hours in weblog posts and social threads getting pedantic about most popular toolsets, particular strategies, what’s thought of finest observe, and the way issues must be named. And, sure, these do matter matter. However the temporary time I spent with my niece felt extra essential, significant, and satisfying than the rest. Strip every part away and the internet nonetheless runs on one thing easy.
These few bins with coloration on them seize my consideration longer than the project I used to be imagined to be doing. I don’t even know why I stored watching it. Possibly as a result of I noticed I rush via these fundamentals with out even noticing. That second kind of pushed me to decelerate and really have a look at what I used to be doing, line by line, as a substitute of leaping straight to the purpose.
HTML all of a sudden seems to be much less like code and extra like constructing supplies to me. CSS, in the meantime, not solely steps in with a paint brush, however has the power to mildew these supplies into lovely shapes like clay.
So, despite the fact that my niece got here to me to assist her perceive HTML and CSS, she was truly the one who taught me a factor or two about it. It was the best way she seemed on the web page and noticed a home that made issues click on extra succinctly for me than how I’ve heard or learn it wherever else. The way in which she articulated the connection between HTML and CSS minimize straight to the purpose in a approach nothing else has for me.
How would you clarify it?
Taking time to clarify the fundamentals of HTML and CSS proved to me that educating what we do — or something, actually — reveals what we all know and particularly what we assume we all know. Educating somebody who has by no means seen or written a single line of code forces you to examine your self. Apparently, that’s what The Feynman Approach for studying is all about: educating to be taught.
Studying is a subjective journey slightly than a one-size-fits-all kind of deal. A few of us be taught visually, some be taught by studying, and others be taught via exercise. And, naturally, one thing like age drastically impacts issues. Adults are available with far more context and expertise than a toddler, even when that context and expertise has nothing to do with writing code. So, whereas I may need taken a extra technical route with an grownup, maybe, discovering an analogy that resonates with one thing my niece pertains to was the best way more practical path for her, even when it didn’t actually require writing code.
Which begs me to ask the query: How would you’ve got approached explaining HTML and CSS to my niece? Or perhaps not my niece, however a five-year outdated in your life that you realize? What analogies would you utilize, if any? I feel it might be very cool so that you can take time to do precisely that and mirror on precisely what you mentioned. What does that inform you about what you realize and assume about your work?
