Web apps for Beginners

Register week 2 here:


Workshop Week 1


Course outline

Week 1 - Lets play!

Here are some examples of web applications to inspire you.
PH Scale || RGB Colour Slider || CSS Range Slider || Stopwatch || Accordion || Fidget Spinner || Weather App || Maps || Geometry Simulator || Binary || Connect 4 - AI || Tic Tac Toe - AI || Simon || Theremin Oscillator

Understand the three components of a webpage - HTML,CSS and Javascript

Basic HTML - using w3school.com - online web development environment

Understand how computers read colours

Use online tools to make basic web pages

Course outline

Week 2 - Refine the basics


Basic HTML, CSS and JS (cont)- using a text Editor - desktop/laptop environment

Email your webpage to yourself or a friend - Understand the problems to overcome when sharing a web page

Sharing: Host and share using free Amazon AWS account

Linking to other Web Pages/Navigation

Week 3 - Learn Basic Javascript


Alerts, console, elementById and document.write - Where does javascript output

Variables- Use skittles or mentos to explain how computers store memory

Arrays - How can you keep more than one variable in one place?

Functions- Blocks of code that run when you want

Events - Click a button to run code

Get user input - What is your name? exercise

Week 4 - Build Basic Web Apps (Live Demos)


Heads or tails Compare user answer to two random choices

Higher or lower Give the user clues until they guess - 10 random choices

Decision maker - Yes, no, maybe - three random choices

Scissors, paper, rock 3 circular choices

Dice Roll - Add images to your games
Homework - make a magic 8 ball web application

Week 5 - Build Basic Web Apps


Vowel replacer (LEET or Hacker Speak) - Pull apart a string of text and replace vowels with a number

Stopwatch Project - Use the timer to make a simple stopwatch

Week 6 - Information Page


Make a webpage that hides information until you roll over pictures: How much sugar?

Collapsible Accordian

Similar to this page, hide content until button clicked

Whats next?

Where to from here, review

Instructor: Jason Vearing Jason Vearing