Web development with React
Twelve weeks from HTML to a deployed React application with real data, a public URL and a repository behind it.
- Grades
- 9–12
- Ages
- 14–18
- Length
- 12weeks
- Sessions a week
- 2
- Each session
- 90min
- Class size
- 15max
What this course is
A student who can build a web application has something demonstrable, and this course is built around getting to that as directly as honesty allows. The first three weeks are HTML, CSS and JavaScript without a framework, because React makes very little sense to somebody who has never had to update the page by hand.
From week four the course is React: components, props, state, effects and data fetching, each introduced when the application being built needs it. Students work in a real project from the start rather than in isolated exercises.
The course ends with deployment. Every student's final project is live on a URL they can put in a message, and the difference in how they talk about their work before and after that step is noticeable.
Week by week
Every week ends with something that did not exist at the start of it. That is what is listed under “ends with”.
- Week 01
Semantic HTML and the browser
Document structure, semantic elements and why they matter for screen readers and search engines. DevTools opened on day one.
Ends with: A hand-written, correctly structured multi-section page.
- Week 02
Modern CSS layout
The box model, flexbox, grid, custom properties, and responsive design from the small screen up.
Ends with: A responsive page built to match a supplied design.
- Week 03
JavaScript in the browser
Variables, functions, arrays, objects, the DOM, and event listeners. Updating the page by hand, so that the pain React removes is felt first.
Ends with: An interactive to-do list built with no framework at all.
- Week 04
First React application
Setting up with Vite, JSX, components and props. Splitting the week 3 page into components.
Ends with: The to-do list rebuilt as a React component tree.
- Week 05
State
useState, lifting state up, controlled inputs, and where a piece of state actually belongs.
Ends with: A working form with validation and live feedback.
- Week 06
Lists, keys and conditional rendering
Rendering arrays, why keys exist, and the bugs that appear when they are wrong.
Ends with: A filterable, sortable list view over a supplied dataset.
- Week 07
Fetching data
useEffect, async and await, and handling the loading and error states properly rather than assuming success.
Ends with: A component that fetches live API data and handles failure.
- Week 08
Routing and multi-page applications
Client-side routing, URL parameters, and pages that can be linked to directly.
Ends with: A multi-page application with a working detail page per item.
- Week 09
Project planning and design
Students write a one-page spec for their final project, sketch the screens, and have both reviewed before writing code.
Ends with: An approved specification and a set of screen sketches.
- Week 10
Building the project
Supervised build time, with the instructor reviewing commits and unblocking students individually.
Ends with: A working first version, committed daily.
- Week 11
Accessibility, performance and polish
Keyboard navigation, focus states, alt text, colour contrast, image sizing and a Lighthouse pass on the student's own project.
Ends with: A measurable improvement in the project's Lighthouse scores.
- Week 12
Deploy and review
Deploying to Vercel, writing a README, and presenting the live application to the group for questions.
Ends with: A live public URL and a documented repository.
What they will be able to do
- Build a multi-page React application from an empty folder
- Manage state and asynchronous data without copying a tutorial
- Write markup that is accessible and responsive by default
- Deploy and document a project so somebody else can run it
What they build
- A responsive page built to a supplied design
- A to-do application built twice: once in plain JavaScript, once in React
- A data-driven, filterable list application
- A deployed multi-page React project of the student's own design