Teaching Web Development with Boring Website Workshops

Earlier this week I had the pleasure of delivering a family workshop on behalf of MadLab. I decided to teach the young people a little bit about building websites by showing them how to edit some HTML (Hypertext Mark Up Language) The children thoroughly enjoyed it and several asked for more information so that they could carry on at home.

HTML is the code that all websites are made with and although lots of things in web development can be difficult to learn, HTML is quite easy, especially compared to most programming languages.

Lots of people think that they need a top of the range computer and lots of complicated software to start learning web development, but that’s not true. To start learning HTML all you need is a web browser (eg Chrome, Microsoft Edge or Safari) and a code editor. We chose to use Visual Studio Code (also known as VS Code.) During the workshop, the families used laptops provided by MadLab, which already had VS Code installed and at least one web browser.

During the workshop, we gave the families a folder containing the code for a simple website. The website had no styling, no images and very little content. It was a very very boring website, but it contained everything they needed to get started.

1 HTML file called index.html
1 CSS file called style.css (which was not applied)
1 folder called images containing 6 image files (sweets.jpg, kittens.jpg, puppies.jpg, unicorns.jpg, picture.jpg and claire.jpg
1 image file called claire-and-wapuu.jpg

After introducing them to our boring website, I talked them through the basics of how we use a code editor to change the content on a website and view our changes in the browser.

The children then started to update the boring website by editing the content to change the main heading and include the details of their favourite foods and their favourite books or films. We then moved onto HTML comments. Their index.html file contained several lines of code which were hidden with comments, including a picture of me at a conference, stood next to a mascot.

Once the children managed to include the “hidden” image, we showed them how to change the picture for one of the others stored in the images folder.

By the end of the hour the children (and their grown ups) had updated a website and learned how to edit several HTML elements. The next step would be to give the children chance to edit some of the CSS styling, but it’s always much better to leave people excited to learn more than overwhelmed with too much content crammed into a short time.

I had a wonderful time with the families and will be sending them a tutorial shortly.