I want to let you know what I realized from a five-year previous baby about HTML and CSS.
Simply after I opened my code editor and browser and started writing fundamental HTML boilerplate, my niece walked in. She is tiny and usually very loud, however was standing quietly subsequent to my desk on this specific day, as if she was on the lookout for one thing.
Niece: Wassat? Wassat you typing?
Me: One thing for the pc.
Niece: It seems to be humorous. All of the little strains.
Me: They're directions.
Niece: Instwu… inschu… instwushun?
Me: Directions.
I paused and remembered a Quora query I discovered 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 appeared it over.
Right here’s how I answered. It’s humorous how explaining one thing you do nearly naturally teaches you about your self and what you are taking as a right.
We’re constructing a “home” with “bricks”
My niece didn’t appear to care in regards to 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 taking place within the browser.
Niece: Oh. So, this huge field is your home?
Me: Type of, sure.
At the moment the display was empty, wanting extra like an enormous expanse than a webpage. I like that she noticed an enormous white house and likened it to a home that I used to be constructing. Her statement pushed me to elucidate probably the most fundamental a part of what I used to be doing.
I advised 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, a couple of texts appeared. She jerked her head backward a bit when the display refreshed and turned from an empty home to one thing with rendered components.
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 constructions 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 type of brick. The browser follows my directions for including the bricks I wish to the home.
Attempting to elucidate that to her compelled 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 muse that CSS and JavaScript can later depend on. With out these names, the browser wouldn’t know the place the completely different components ought to relate to 1 different. Already, I used to be discovering it powerful 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 cultured interface begins with a top level view. Earlier than any colours, house, or structure, all we have now is construction.
Explaining this to her made these fundamentals really feel necessary to me once more, like after I first realized the significance of getting a separation of issues between HTML, CSS, and JavaScript.
My niece started to stare at my display for an inordinate period of time, and the silence felt heavy. Though the construction was there, the web page nonetheless appeared empty to her and he or she lastly requested why the web page appeared like that.
She anticipated one thing extra like a home; one thing with shapes and rooms. What she noticed as an alternative 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 advised her. The
like the underside ground.
I defined to her that these components 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 saved it minimal by including a width, some peak and a border to one of many components. 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 somewhat unfamiliar symbols.
Then got here the second, I needed to take a step again once more and attempt to clarify CSS to her. I advised her what I used to be typing are additionally directions, identical to HTML, however as an alternative of directions for laying bricks, these have been directions for a way the bricks ought to look. For instance, I can inform the browser how giant a brick needs to 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 slightly form.
I do know there’s most likely a extra “educational” solution 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 colour is on the web page. That’s all fantastic and whatnot, however all of that’s gibberish to a five-year previous. I can’t even get into issues like aspect-ratio with out first entering into the essential width and peak. These fancy issues can look forward to now.
What I used to be on the lookout for was an “A-ha!” second. I continued the train and drew slightly home. Then I refreshed the web page and the construction lastly had a form.
It wasn’t a lot, in fact: slightly triangle that appeared like a roof, a sq. pretending to be a wall, two tiny squares for home windows, and a thin rectangle that I assume might be a door. It appeared like one thing you draw quick with a boring pencil. Regardless, my niece leaned in instantly, nearly bumping her brow on the display.
Niece: Why does the home not have colour? It seems to be so plain.
Me: I haven’t added colour but.
Niece: You forgot. You at all times forgot.
Me: I’ll add it.
I added slightly colour 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 colour factor make it fairly?
Me: That’s proper.
Niece: So HTML says what's there, and CSS makes it fairly.
Me: Precisely.
That statement 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 components ought to seem. With out styling, each ingredient 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 containers and the decorations that made them look the way in which they have been.
HTML lays down the items and CSS brings them to life with strains, colours, and different bits of ornament and positioning. This may nonetheless really feel magical even to us, proper? Getting my niece up to now jogged my memory why even the fundamentals of what we do is satisfying.
What I realized from a five-year previous
“Now I can do pc, too!” she introduced. That’s when my niece determined she was happy and bounced out of the room. I saved the little home on my display for some time longer and thought in regards to the change.
It’s straightforward to get right into a rut the place the magic of what we do is outmoded by different issues. We’ve a job we have to do and we sweep away the “boring” stuff to get issues accomplished. And as soon as these issues are accomplished, how typically will we pause and really take a look at what we’re doing, line by line?
That’s the largest factor I realized from my five-year previous niece: there’s nonetheless magic in what we do, irrespective of how huge or small the duty. We’d spend hours in weblog posts and social threads getting pedantic about most popular toolsets, particular methods, what’s thought-about finest apply, and the way issues needs to be named. And, sure, these do matter matter. However the transient time I spent with my niece felt extra necessary, significant, and satisfying than anything. Strip every part away and the internet nonetheless runs on one thing easy.
These few containers with colour on them seize my consideration longer than the project I used to be purported to be doing. I don’t even know why I saved observing it. Possibly as a result of I noticed I rush by way of these fundamentals with out even noticing. That second form of pushed me to decelerate and really take a look at what I used to be doing, line by line, as an alternative of leaping straight to the purpose.
HTML immediately 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 flexibility to mildew these supplies into lovely shapes like clay.
So, although my niece got here to me to assist her perceive HTML and CSS, she was really the one who taught me a factor or two about it. It was the way in which she appeared 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 best way she articulated the connection between HTML and CSS reduce straight to the purpose in a method nothing else has for me.
How would you clarify it?
Taking time to elucidate 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. Instructing 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 Method for studying is all about: educating to study.
Studying is a subjective journey somewhat than a one-size-fits-all form of deal. A few of us study visually, some study by studying, and others study by way of exercise. And, naturally, one thing like age drastically impacts issues. Adults are available in 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 might need taken a extra technical route with an grownup, maybe, discovering an analogy that resonates with one thing my niece pertains to was the way in which simpler path for her, even when it didn’t actually require writing code.
Which begs me to ask the query: How would you’ve approached explaining HTML and CSS to my niece? Or perhaps not my niece, however a five-year previous in your life that you recognize? What analogies would you utilize, if any? I believe it will be very cool so that you can take time to do precisely that and mirror on precisely what you stated. What does that let you know about what you recognize and assume about your work?
