1 Thing A Week 1 Thing
A Week

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

Week 175.0 — 1st March '21

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.

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.

Diya's first website, 2021

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.

More from 1 Thing A Week
« Why Apple need to bring lux level support to HomeKit My dream Mercedes-Benz SEC restoration project 4 Comedies worth watching twice I ❤️ SASS but am I making the most of it? »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 175.1 – Monday
    1. The Aurora Tree Alyn Wallace on apod.nasa.gov
    2. Mars 2020 entry descent landing simulation eyes.nasa.gov
  2. 175.2 – Tuesday
    1. The UX on this small child is terrible mcsweeneys.net
    2. Nokia 2720 Flip   £79.99 nokia.com
  3. 175.4 – Thursday
    1. Kirk Franklin Tiny Desk (Home) Concert NPR Music on youtube.com
    2. Stars over an erupting volcano Giuseppe Vella on apod.nasa.gov
  4. 175.5 – Friday
    1. Hover boat bbc.co.uk
  5. 175.6 – Saturday
    1. Create Escape banksyfilm on youtube.com
  6. 175.7 – Sunday
    1. "Baggio: The Divine Ponytail" teaser trailer Netflix on youtube.com
    2. Kilobytes Gambit vole.wtf

Jump to notable items for Week #174, Week #176 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit