Web apps for Beginners


Register week 2 here:

WORKSHOP VIDEOS

Workshop Week 1

apps

Course outline

Week 1 - Lets play!

Outline
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

Outline

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

Outline

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)

Outline


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
(continued)

Outline

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

Outline

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