After planning a future makers event, an introduction to coding and building a DIY Gamer, the Future Makers turn their attention to Building for the Web, learning HTML and CSS.

The open source learning material can be used as learning tool or to plan a Future Makers event, a fun way to give children and young people a taste of programming. Go to part 1 to plan your event, part 2 for an introduction to programming and part 3 DIY Gaming. Part 4 introduces Future Makers to building for the web. It covers the basics which will be used later on for a Games Jam workshop.

In this session Future Makers will:

  • Learn about the history of the web.
  • Use a variety of web tools to learn about HTML, CSS and JavaScript.
  • Build their own website and publish it online.

This workshop was structured solely for the 8-11 year olds as it was felt this group would benefit from having more time to learn HTML/CSS/JavaScript code.

Introduction
Introduction to HTML and CSS
Explore the code behind any webpage
Have fun!

Introduction (1 hour)

Coderdojo delivered a talk about the development of web communication – from the early origins of the World Wide Web – to provide history and context to the workshop. This was a very interactive exercise which helped to warm up the group before moving onto coding exercises.

Introduction to HTML and CSS (up to 2 hours)

The session went over the basic constructs of HTML and CSS.Identifying servers

The HTML included the basic elements: title, headers (h1 and h2), paragraphs, images, footers. For the style of the page (CSS) the session covered: changing the font, changing text size and colour, changing the background to be an image, aligning the text and putting the content in a box. A group with more experience might benefit from covering media queries in the style that allows the website to be displayed correctly on a mobile.

The session used CodePen, a free online code editor which allows participants to preview instantly the code as they write it. Notepad++ or Sublime could also have been used but CodePen had the advantage of hosting code online and automatically links the files. Users don’t need to save changes and reload to preview what they’re building.

The pace of this session was constantly adjusted depending on the participants’ level of understanding. Using template slides with basic HTML they began to format their own websites, creating headers and inserting images and content.
Content and layout were the most important part of the lesson. The facilitators encouraged the participants to make their websites more aesthetically pleasing – again by using code to change background colours etc.

Explore the code behind any webpage
Mozilla X-Ray Go (30-45min)

Participants were invited to explore X-Ray Goggles individually or in pairs. X-Ray Goggles is part of a suite of Mozilla Webmaker tools, ‘designed to help everyone learn how the web works and design their own web experiences’. With X-Ray Goggles, you can see the building blocks that make up websites. Activate the goggles to inspect the code behind any webpage, then remix elements with a single click, swapping in your own text, images and more.

  • Visit the Mozilla X-ray goggles website.
  • Follow the online instructions to add x-ray goggles to your browser’s bookmark bar.
  • Activate X-ray Goggles on your favorite website. Hover the mouse over the page to see the different elements that make up the page.
  • Select an element to edit the HTML.
  • Discuss: what websites did you use X-ray Goggles to edit?


Have fun!

htmlintro2

htmlintro

Click here for part 5 – Wearable Technology

Go back to part 3 – DIY Gamer