ABOUT 8–10
Play & discover
Short activities, characters, stories, colourful feedback and lots of “what happens if I change this?” moments.
PATHWAY 02 · HTML + CSS + JAVASCRIPT
From a blank page to something the world can use.
A systematic pathway that begins with simple HTML, makes it beautiful with CSS, then adds JavaScript so young creators can build interactive websites and digital stories.
START AROUND AGE 8LEARN BY BUILDINGAFRICAN CODING CONTEST 2026
BUILD
FOR THE WEB
FOR THE WEB
One pathway. Many levels. Every learner gets a place to begin and room to grow.
A SYSTEMATIC INTRODUCTION
What is web development?
Web development is the art of building things people can open in a browser. HTML gives a page its structure and meaning, CSS controls its visual design, and JavaScript gives it behaviour. Learners start with a single heading and grow toward responsive pages, interactive tools, portfolios and community-focused projects.
ABOUT 11–13
Build & explain
Longer projects, variables, conditions, debugging, design choices and the confidence to explain how a project works.
14+ & GROWTH
Solve & lead
Independent projects, algorithms, reusable components, documentation, teamwork, user testing and contest-ready solutions.
01MAKEStart tiny and get something working.
02EXPLAINTell someone what each part does.
03REMIXChange the project so it becomes yours.
04SOLVEUse code to address a real challenge.
05SHAREShow, test, listen and improve.
Our learning rule: do not rush to copy. Watch a small idea, rebuild it, change it, break it safely, fix it, and then explain what you learned. That is how a beginner becomes a creator.
20 YOUTUBE VIDEO FRAMES
Watch → pause → build → remix.
Twenty video frames are arranged as a progression. Learners should pause frequently and rebuild the examples instead of watching passively. YouTube embeds use the privacy-enhanced player domain.
VIDEO 01 · START HERE
HTML & CSS Full Course — Beginner to Pro
Pause, copy the idea, then change it. This frame is part of the start here stage of the learning pathway.
VIDEO 02 · TRY IT YOURSELF
JavaScript Full Course — Beginner pathway
Pause, copy the idea, then change it. This frame is part of the try it yourself stage of the learning pathway.
VIDEO 03 · CHANGE ONE THING
HTML & CSS beginner project
Pause, copy the idea, then change it. This frame is part of the change one thing stage of the learning pathway.
VIDEO 04 · ADD A CHALLENGE
Web embedding and web-building fundamentals
Pause, copy the idea, then change it. This frame is part of the add a challenge stage of the learning pathway.
VIDEO 05 · EXPLAIN YOUR CODE
Build a complete beginner website
Pause, copy the idea, then change it. This frame is part of the explain your code stage of the learning pathway.
VIDEO 06 · START HERE
HTML & CSS Full Course — Beginner to Pro
Pause, copy the idea, then change it. This frame is part of the start here stage of the learning pathway.
VIDEO 07 · TRY IT YOURSELF
JavaScript Full Course — Beginner pathway
Pause, copy the idea, then change it. This frame is part of the try it yourself stage of the learning pathway.
VIDEO 08 · CHANGE ONE THING
HTML & CSS beginner project
Pause, copy the idea, then change it. This frame is part of the change one thing stage of the learning pathway.
VIDEO 09 · ADD A CHALLENGE
Web embedding and web-building fundamentals
Pause, copy the idea, then change it. This frame is part of the add a challenge stage of the learning pathway.
VIDEO 10 · EXPLAIN YOUR CODE
Build a complete beginner website
Pause, copy the idea, then change it. This frame is part of the explain your code stage of the learning pathway.
VIDEO 11 · START HERE
HTML & CSS Full Course — Beginner to Pro
Pause, copy the idea, then change it. This frame is part of the start here stage of the learning pathway.
VIDEO 12 · TRY IT YOURSELF
JavaScript Full Course — Beginner pathway
Pause, copy the idea, then change it. This frame is part of the try it yourself stage of the learning pathway.
VIDEO 13 · CHANGE ONE THING
HTML & CSS beginner project
Pause, copy the idea, then change it. This frame is part of the change one thing stage of the learning pathway.
VIDEO 14 · ADD A CHALLENGE
Web embedding and web-building fundamentals
Pause, copy the idea, then change it. This frame is part of the add a challenge stage of the learning pathway.
VIDEO 15 · EXPLAIN YOUR CODE
Build a complete beginner website
Pause, copy the idea, then change it. This frame is part of the explain your code stage of the learning pathway.
VIDEO 16 · START HERE
HTML & CSS Full Course — Beginner to Pro
Pause, copy the idea, then change it. This frame is part of the start here stage of the learning pathway.
VIDEO 17 · TRY IT YOURSELF
JavaScript Full Course — Beginner pathway
Pause, copy the idea, then change it. This frame is part of the try it yourself stage of the learning pathway.
VIDEO 18 · CHANGE ONE THING
HTML & CSS beginner project
Pause, copy the idea, then change it. This frame is part of the change one thing stage of the learning pathway.
VIDEO 19 · ADD A CHALLENGE
Web embedding and web-building fundamentals
Pause, copy the idea, then change it. This frame is part of the add a challenge stage of the learning pathway.
VIDEO 20 · EXPLAIN YOUR CODE
Build a complete beginner website
Pause, copy the idea, then change it. This frame is part of the explain your code stage of the learning pathway.
CHOOSE YOUR NEXT ADVENTURE
Three pathways. One creative coding journey.
Move between visual coding, web creation and text-based programming as your confidence grows.
🧩
Scratch
Create stories, games and animations with blocks.
Open pathway →🌐
Web Development
Turn ideas into real websites with HTML, CSS and JavaScript.
Open pathway →🐍
Python Programming
Build logic, games, data tools and future AI foundations with Python.
Open pathway →YOUR FIRST PROJECT
Build a mini website that answers a real question: What should visitors know, see, learn or do after visiting your page?
Start with the smallest working version. Then add one feature, test it and ask a friend what they think.
10 PDF TUTORIALS
Download, print, practise and teach.
Ten short printable guides support the full pathway. They are written as practical activity sheets that can work at home, in a classroom, club or coding-contest preparation session.
Scratch 01: Your First Interactive Story
Start with sprites, backdrops, events, movement and sound. Scratch pathway.
Scratch 02: Make Characters Move & Talk
Build an animated story using costumes, dialogue and timing. Scratch pathway.
Scratch 03: Build a Catch-the-Star Game
Use variables, scoring, random positions and game rules. Scratch pathway.
Scratch 04: Levels, Clones & Challenge Logic
Grow from beginner blocks into reusable game systems. Scratch pathway.
Web 01: HTML — Build Your First Page
Learn headings, paragraphs, links, images, lists and page structure. Web Development pathway.
Web 02: CSS — Make Your Page Beautiful
Learn selectors, colors, spacing, cards, layouts and responsive design. Web Development pathway.
Web 03: JavaScript — Make the Page Interactive
Use variables, events, functions and the DOM to create interactions. Web Development pathway.
Python 01: Your First Python Programs
Learn output, variables, input, conditions and simple problem solving. Python pathway.
Python 02: Draw, Animate & Play with Turtle
Turn code into drawings, patterns and mini-games. Python pathway.
Python 03: Build a Mini Challenge Project
Combine logic, functions, data and creativity into a contest-ready project. Python pathway.
OctoStudio: another creative doorway
For learners who love mobile-first creation, explore OctoStudio as a companion pathway alongside Scratch and the contest tutorials.
KEEP GROWING
Ready for another tutorial pathway?
Follow the learning loop again with a different tool. New technology becomes easier when the thinking skills are already strong.