My 7 yo daughter made a website. It’s pretty awesome.
I love the web. I’ve been making websites for years and I want to share that with my kids. I want to show them what I do and to introduce them to the big crazy world wide web.
My daughter is 7 now and the other day she was telling me how she had learned how to use Microsoft Word. So I thought:
What if I teach my daughter about the web by helping her to make a small part of it? What kind of website would a 7 year old make?
Before we go any further, I feel like a little background information is required. A Rock Cat is an imaginary creature that my daughter made up. It looks like a cat but it can pretend to be a rock. If you’d like to learn more, well, she made you a website.
My lesson plan
Before I started, I looked around the internet for a HTML tutorial that would be appropriate for kids. But they were all terrible.
When you want to teach kids, you need to show them something cool really quickly. You need a quick win. But most HTML tutorials waste 5–10 minutes setting up boilerplate and talking about files and body tags and other boring things. Now don’t get me wrong, that stuff is important for a professional web developer, but is it really the first thing I want to show a kid?
So I fired up codepen and helped her type in the simplest HTML I could think of.
In 2 minutes she had made her first website.
This little snippet of code is so simple, but there is so much going on. I got to talk about how websites are made by typing HTML into a text editor. About how HTML elements and tags are structured. About what a heading is. About so much cool stuff.
It lead to a very surprising discussion:
Me: Look at that, your very first website!
Her: Will everyone in the world be able to look at it?
Me: Yes
Her: How will they know I’m a kid?
Me: Well, they won’t, they’ll actually probably think it was made by a grown up.
What an amazing lesson. Now she understands how easy it is to mislead people on the web. In our age of fake news, isn’t this just a great way to teach kids not to believe everything they read online.
More HTML
Next I helped her type in some other simple non-nested tags like h2 and h3.
It took her a little while to get used to finding the special keys <, > and /. But she got there eventually.
I was surprised at how easy HTML is for kids. It’s oddly tolerant of errors and I was there to help out when she got stuck.
Then we tried some harder nested tags like ol, li.
Finally, we did a really hard one. An img tag with a src attribute.
Here’s the final code:
It’s just a couple of simple HTML tags. But if you think about it, that’s more than most people know about HTML. Even some software developers. You know who you are.
CSS
She really wanted to make her website pink which seemed like a good idea at the time. So I decided it was time to hop into CSS.
For CSS I kept it super simple. We only used tag selectors with color properties.
For the colors, we used named web colors. I found a nice table for her to pick from. Playing with the colors was probably her favourite part.
Conclusion
It was a really nice experience. I got to share something I love with a person I love and she got tell the world all about her imaginary creature.
What surprised me most was that seeing her make a website felt oddly like watching her doing a craft project. But instead of crayons or paint or clay, it was HTML and CSS. She just naturally treated web development as a new medium for her art. I like that.
