My daughter built her first website We're starting small, but we built something interactive and styled it with CSS

Just over a week ago, I asked my daughter if she'd be interested in writing some code and building a simple web page. We've played around with a few games on Code.org a few times as part of her homework during lockdown but never really built something from scratch.

Against my better judgement, using my lunch break to introduce my daughter to JavaScript.

View on twitter

I wasn't sure how it would work between us, I like mentoring as a side affect of what I do at work, but teaching isn't really my calling. But we gave it a shot and actually came up with something fun over in a little over an hour overall.

Starting with the basics

We kicked off with some HTML. I explained very loosely how tags worked and where certain tags sat.

Once we'd got through that, she was eager to get into building something and she was amazed that she could write out a few things and then see them in the browser. We literally started with a button that had no display value. She was unimpressed... until we added a display value. In our second session, we came back and structured the page a little better, but this was a great start although a button that does nothing will only impress someone for so long!

So we moved on to some basic JavaScript, and introduced her to the alert() function. That was a great step as she got it pretty quickly: "I can make a button do something when you click it".

Again, how long is that actually impressive for? The answer is a few minutes at best for a 7 year old...

So we brought in prompts. Now she could ask a question and remember the answer... but why would we do this? Oh wait, we can add the value in to our alert!

This was a bit that really impressed her and helped to keep her attention. We probably entered a value into the prompt 10 times, or more, as we tested.

In our second session, as well as a more structured page, we introduced some CSS, utf-8 characters (unicorns, of course) and introduced a second prompt that would influence how the page looks.

It was a really fun exercise and something I've thought about for years. I much prefer building dumb websites and I think that helps to make it easier to introduce some of these concepts. Everything else can wait until there's some real interest in the topic.

The code

I've uploaded what we've done to GitHub, you can find it at cchana/diya2021, feel free to browse through the code and share it with your young ones. We'd love to see what others do and maybe even some pull requests.

Above is a screenshot of the page after the initial load in all of its purple glory. If you want to see it in action and give it a go, head over to diya2021.1thingaweek.com.