React: Web foundations
Apply React through standards, structure, developer tools.
Intermediate / Structured learning draft / Version 0.9
Structured learning draftReact & Next.js 16
Build and test a responsive digital product. You will finish with a responsive, accessible application you can demonstrate.
This open learning manuscript is undergoing course-specific editorial review. It does not provide certification. Progress and notes are stored only in this browser.
Web developmentTool stack
ReactNext.js
12guided lessons
4focused modules
1reviewable project
PDFoffline workbook
The problem
What this course helps you do
React & Next.js 16 is a structured, practical course covering React, Next.js, App Router. It emphasizes explainable methods, checked work and a final outcome that can be reviewed.
Who it is for
Learners building accessible, maintainable web products.
Prerequisites
- Comfort using a browser and text editor
Portfolio-ready project
Produce a reviewable React & Next.js 16 project using React, Next.js, App Router.
Deliverable: A working React & Next.js 16 artefact plus an evidence-based self-review.
Practice fileResponsive interface starterA semantic HTML starter with a clear project region.Planning template · MarkdownProject briefDefine the user, outcome, boundaries, evidence and acceptance criteria before building.Printable workbook · PDFComplete course workbookA4-ready lesson prompts, project worksheets, evidence logs and references.
Downloads open without an account. Practice data is fictional; review each file before using it in another system.
Definition of done
- The output matches the stated outcome.
- Inputs and decisions are reproducible.
- Boundary and failure evidence is included.
- Limitations and responsibility considerations are explicit.
Course plan
From first concept to finished work
Next.js: Core implementation
Apply Next.js through components, state and data, responsive layout.
App Router: Quality
Apply App Router through accessibility, testing, performance.
React: Production practice
Apply React through security, deployment, maintenance.
Source-led learning
Authoritative references
Course claims are grounded in primary documentation and recognized public guidance. Recheck version-sensitive information before professional use.
- Learn web developmentMDN Web Docs
- WCAG 2.2W3C