Loading Events
  • This event has passed.

Get Coding: Learn HTML, CSS & Javascript to Build an App – Mission 3

We will be using the Get Coding book by the Young Rewired State, a worldwide community of digital-makers aged 18 and under.

The Get Coding! book will not only teach you how to code, but also show you how fun and exciting it can be.

Coding is one of the most important skills young people can learn and there’s never been a better time to master it.

Together with the Get Coding! book and access to the www.getcodingkids.com website, we will learn how to code using three (3) essential programming languages:

  • HTML
  • CSS
  • Javascript

HTML, CSS & Javascript are three of the most important programming languages in the world. They are used by web developers to build the websites and web-based apps and games you use everyday.

In the workshops, following the book, you will learn real-life coding skills you can use to do all kinds of programming.

Get Coding! Workshops

There are six (6) exciting missions in Get Coding!. Our mission is to work through as a group each of the missions and learn how to code HTML, CSS & Javascript.

Mission 3: Build an App

In Mission 3 you are going to learn how to build an app using HTML and JavaScript. An app, which is a short for “application”, is a type of program built to help a user with a specific task. In this mission you are going to code a to-do list app. The user will be able to add tasks to create their to-do list. Then when they’ve completed the task, they will be able to remove it from the list by clicking on it.

To make the app, you first need to learn to create a button using JavaScript. Then you are going to use two APIs (Application Program Interfaces) called the DOM (Document Object Model) and localStorage. These APIs allow you to program you web browser to make things appear or disappear from screen and store information.

Code Skills: What will we learn in Mission 3

How to Build a Button

  • Use the input tag to create a button that the user can click.

Making buttons run code

  • Use the onclick attribute to make your button pop-up an alert when it’s clicked.

Methods and Properties

  • Find and change the contents of an HTML element using the DOM.

Adding new HTML Elements

  • Use the DOM to create and add new HTML elements to your app.

Building the Basic App

  • Get the template for the basic version of the app.

Removing a HTML Element

  • Use the DOM to remove a HTML element from your app.

Removing more than one HTML Element

  • Use the removeChild method to remove multiple HTML elements from your app.

Using the LocalStorage API

  • Store the information in your to-do list app in your browser using the localStorage API.

Build a To-Do List App

  • Use your new HTML and Javascript skills to code a to-do list app. You need to use the DOM and localStorage APIs.

Workshop Details: 8 Week 1 Hour Workshops, 3pm – 4pm

Appropriate for kids 9+ with no coding experience or knowledge required.

Each attendee will be provided with a Get Coding! book and a laptop with WIFI connection to use during the workshop.

Attendees do not need to bring anything but their enthusiasm & passion to learn coding plus a bottle of water!

Workshops will involve reading and solving the coding challenges together as a group as well as individually.

Once you have mastered Mission 3, then you can move onto the other missions.

Mission 1: Build a Web Page – DONE

Mission 2: Creating a Password – DONE

Mission 3: Build an App – ENROLLED

Mission 4: Maps & Planning Routes

Mission 5: Make a Game

Mission 6: Your Finished Website