Ages 13–17 · Class 8–12

Web Builder

HTML, CSS and JavaScript — ship a real website.

Web Builder takes students from a blank HTML file to a published personal portfolio site. Tabs for HTML, CSS and JS render live into a sandboxed preview pane — change a line and the page updates instantly.

Start track All tracks

Why it matters

The web is the default platform — every app, every dashboard, every shop.
Visual feedback makes it the most motivating first language for many students.
Portfolio sites give students a real shareable artefact for college applications.

Who it's for

Class 8–12 students who finished Python Foundations or want a visual start
Future entrepreneurs who need a landing page
Schools building a Micro-Entrepreneurship elective

Modules

Module 1
HTML basics
Structure a page with semantic tags — the skeleton every website shares.
Module 2
Headings & links
Connect pages with anchors and add a short about section.
Module 3
CSS basics
Colour, fonts, and spacing — make your page readable on mobile.
Module 4
The box model
Every element is a box — content, padding, border, and margin control spacing.
Module 5
Flexbox
Lay out rows and columns without tables — perfect for nav bars and project grids.
Module 6
Responsive design
One HTML page that reads well on phone and laptop — viewport meta and fluid widths.
Module 7
JS basics
Make the page react — buttons, scripts, and the browser console.
Module 8
DOM events
Respond to clicks and taps — the bridge between static pages and interactive apps.
Module 9
Capstone prep
Checklist before you publish your portfolio — accessibility, links, and mobile preview.
Module 10
Publish & share
Ship your portfolio — meta tags, Open Graph basics, and a checklist before you share the link.

Capstone

Personal Portfolio Site

Build a 3-section portfolio: hero with your name, projects grid (3+ projects), contact section. Must be responsive on mobile.

All 3 sections present (2 pts)
Looks good on a phone (2 pts)
At least one CSS animation/transition (2 pts)
At least one JS interaction (2 pts)
Bonus: dark mode toggle (2 pts)

Outcomes

Build a responsive multi-section website from scratch
Style with Flexbox and CSS variables
Add interactivity with vanilla JavaScript
Publish a personal portfolio you can share

FAQ

Do I need a code editor?

No. Everything runs in the browser. We use Monaco — the same editor that powers VS Code — inside your dashboard.

Can I host my finished portfolio?

Yes — at the end of the track we walk you through publishing it free on Netlify or GitHub Pages.