Your learning plan · 18 modules

Teen Web and App Developer

Build a connected web-development skill set, from HTML, CSS and JavaScript to React, APIs, databases and backend concepts. Keep your work in GitHub and complete an advanced frontend or full-stack project you can demonstrate and explain.

Web developmentHTML / CSS / JavaScript

Who it's for: Grades 9-12
Typically ages 14–18
Suggested duration: 8-12 months
How you learn: Concepts → practice → projects

Explore all 18 modules Download syllabus (PDF)

Age ranges are approximate. We'll confirm your starting module and class schedule before enrolment.

The goal

What you'll learn to do

Create responsive, accessible websites with HTML, CSS and JavaScript.
Build React apps using components, props, state, hooks, forms and routing.
Request API data with JSON and async JavaScript, including loading and error states.
Explain how backend APIs, databases, authentication and deployment fit together.
Use GitHub, clear project documentation and testing to keep work organised.
Complete and present a full-stack or advanced frontend capstone with a repository and live demonstration.

One module at a time

Your module-wise syllabus

Open a module to see the topics and hands-on practice. Start with the foundations and build up step by step.

Web Architecture and Developer Tools

What you'll explore

How browser, server and database work together
VS Code setup
Browser developer tools
Project folder structure
Basic terminal commands

Try it yourself

Set up development environment
Create your first project folder
Inspect a website using browser tools

HTML5 Professional Structure

What you'll explore

Use semantic HTML tags to describe each section of a page
Forms and validation attributes
Media elements
Tables
Accessibility basics
Use page titles and meta tags to help describe content to search engines

Try it yourself

Build a multi-section portfolio page
Add contact form and media
Check semantic structure

CSS3 Responsive UI Design

What you'll explore

Selectors and specificity
Box model
Flexbox
Grid
Transitions
Animations
Media queries

Try it yourself

Create a responsive landing page
Add animated services section
Test on phone and desktop widths

JavaScript Core Programming

What you'll explore

Variables, data types and operators
Strings and numbers
Arrays and objects
Functions and scope
Use modern JavaScript (ES6) syntax

Try it yourself

Complete a set of logic challenges
Build calculator functions
Organise sample student records as JavaScript objects

Conditions, Loops and Problem Solving

What you'll explore

If/else and switch
Logical operators
For, while and for-of loops
Break and continue
Plan and practise step-by-step solutions

Try it yourself

Solve grade-checker, FizzBuzz and number-pattern challenges
Explain one solution in class

DOM, Events and Browser Apps

What you'll explore

Select parts of a web page through the Document Object Model (DOM)
Changing content and styles
Events and event listeners
Form handling
Timers and date/time
Save small amounts of data in the browser with localStorage

Try it yourself

Build quiz app or expense tracker
Add validation and saved data
Improve user messages

APIs, JSON and Async JavaScript

What you'll explore

Read and organise API information in JSON format
Send API requests with Fetch and an introduction to Axios
Promises
Async/await
Show useful feedback while data is loading
Error handling

Try it yourself

Build weather app or movie search app
Display API data in cards
Handle failed searches

Git, GitHub and Documentation

What you'll explore

Use Git init, add, commit and status to track your work
GitHub repository
Write a README that explains how to use your project
Commit messages
Project screenshots and links

Try it yourself

Create GitHub repository
Push a web project
Write a simple README

React Setup and First Application

What you'll explore

Understand what React helps you build
Understand how a single-page application updates its interface
Set up a React application with Vite
Project structure
Learn JSX rules for writing markup in React components

Try it yourself

Create first React app
Edit App component
Run and test locally

React Components, Props and State

What you'll explore

Functional components
Reusable components
Pass content and data with props and children
Use useState to keep track of changing information
Update state so the interface reflects the latest information

Try it yourself

Build profile cards
Create counter and product card components
Pass data using props

React Rendering, Lists and Forms

What you'll explore

Choose what the interface displays using conditions
Display lists with a stable key for each item
Connect form inputs to React state
Form validation
Reusable form components

Try it yourself

Build a registration form
Create dynamic product list
Show validation messages

React Hooks and Effects

What you'll explore

Review useState and state updates
Use useEffect for effects such as requesting API data
Use useRef to refer to an input or other element
useMemo and useCallback basics
Introduce custom hooks for reusable logic

Try it yourself

Build an API dashboard
Add loading feedback and an error state
Create one small custom hook

React Router and Multi-page Apps

What you'll explore

React Router setup
Routes and links
Organise routes inside other routes
Use route parameters for pages such as product details
Provide default routes and useful error pages

Try it yourself

Build multi-page React website
Add product detail route
Add a helpful 404 page for missing routes

Backend and REST API Basics

What you'll explore

Understand requests between a browser and a server
Understand HTTP methods such as GET and POST
Plan REST API endpoints for different actions
Request and response
Test API requests and responses with Postman

Try it yourself

Create a simple API endpoint
Test with Postman
Connect one frontend request

Database and CRUD Concepts

What you'll explore

Database purpose
Compare SQL and NoSQL ways of organising data
Organise records in collections or tables
CRUD: create, read, update and delete stored information
Plan the fields and structure of stored information

Try it yourself

Design the database fields for your project
Plan how your project creates, reads, updates and deletes records
Explain the validation rules your data needs

Authentication and Security Basics

What you'll explore

Signup and login flow
Understand password hashing and why plain-text passwords should not be stored
Introduce JSON Web Tokens (JWT) in a login flow
Limit access to routes that require a logged-in user
Understand how different user roles can have different permissions

Try it yourself

Plan login feature for capstone
List which routes need a logged-in user
Write down user roles and what each role can access

Deployment and Project Hosting

What you'll explore

GitHub Pages basics
Netlify/Vercel frontend deployment
Backend hosting overview
Keep environment-specific settings separate from application code
Common deployment errors

Try it yourself

Deploy one frontend project
Share live URL
Find and fix a broken file or page path

Capstone Project and Demo Preparation

What you'll explore

Project planning
Feature list
Wireframes
Frontend-backend integration
Testing
Present your project and answer questions about how it works

Try it yourself

Complete capstone project
Prepare your GitHub repository and live demo link
Present final project

Make your learning visible

Projects & practice you can build on

These ideas come from the syllabus. Your teacher will help choose and adapt projects to your level.

A responsive portfolio or landing page
A quiz app or expense tracker with saved data
A weather or movie search app using an API
React profile cards, product lists and validated forms
A React API dashboard with loading and error feedback
A multi-page React site with a product detail route and a 404 page
A simple backend API connected to one frontend request
An advanced frontend or full-stack capstone with GitHub documentation and a live demo

Where could you go next?

Possible next steps to discuss once you're confident with this syllabus.

React Node, Express and MongoDB Django Backend Project Studio

Adapted for students and parents from the academy's module-wise syllabus. The downloadable PDF includes the original detailed teaching plan.