Ages 12+
Build real web pages with HTML, CSS, and JavaScript — layouts, canvas games, APIs, and a portfolio.
Your First Web Page
Every website you've ever visited is text like this: HTML tags that describe the content. Write a few tags, press Run, and you've published a page.
Badge: 🏅 HTML Starter
CSS: Make It Look Good
HTML is the content; CSS is the style. Colours, fonts, spacing, rounded corners — all of it comes from a handful of CSS rules.
Badge: 🏅 CSS Stylist
Flexbox Layout
Real sites arrange things in rows and grids. Flexbox is the layout tool professionals reach for first — one line turns a stack into a row.
Badge: 🏅 Layout Engineer
JavaScript Meets the Page
HTML and CSS are static. JavaScript makes a page react. Find an element, change its text, and the page updates instantly.
Badge: 🏅 DOM Explorer
Click Events
Interactivity means listening. addEventListener waits for the user to click, then runs your function. This is how every button on the web works.
Badge: 🏅 Event Handler
Reading Form Input
Sign-ups, searches, comments — all of it starts with an input field. Read what the user typed and use it.
Badge: 🏅 Form Builder
Building a To-Do List
Instead of writing HTML by hand, JavaScript can create it. Type a task, press Add, and a new list item appears out of nowhere.
Badge: 🏅 App Builder
CSS Animations
Motion makes an interface feel alive. Keyframes describe how something changes over time, and the browser does the rest at 60 frames per second.
Badge: 🏅 Animator
Drawing on Canvas
Canvas is a blank rectangle you paint with code — the foundation of browser games, charts, and generative art.
Badge: 🏅 Canvas Artist
Game Loop with requestAnimationFrame
Games redraw the screen 60 times a second. requestAnimationFrame asks the browser for the next frame — clear, move, draw, repeat.
Badge: 🏅 Loop Engineer
Keyboard Controls
Now the player takes over. Listen for arrow keys, move a square, and you have the core of every arcade game ever made.
Badge: 🏅 Controls Coder
Fetching Data from the Internet
Modern apps get their data from APIs. fetch() asks another computer for information, and await waits politely for the reply.
Badge: 🏅 API Caller
Project: Build Your Portfolio Page
Final project: a complete personal page. Semantic HTML for structure, flexbox for layout, CSS for style, and JavaScript for one interactive touch — a dark-mode toggle.
Badge: 🏅 Web Developer