CAREER PATH · FRONTEND
We explain new ideas in plain language, practise repeatedly and build useful projects. Complete the HTML, CSS and JavaScript foundations first, or bring equivalent basic knowledge.
git init → build → test → deployYour first useful result is only a few careful steps away.EXPLORE BEFORE YOU START
Move from basic web pages to accessible, tested, responsive and deployable frontend products with a professional portfolio.
Complete the HTML, CSS and JavaScript foundations first, or bring equivalent basic knowledge.
You can read this outline without signing in or completing onboarding. Start with the welcome screen above when you are ready to practise. Use a current browser; a keyboard and larger screen can make longer coding tasks easier, but the lesson interface also adapts to phones.
The in-page coding tasks use pattern checks to confirm required pieces. They do not replace installing the relevant framework, design application, Python environment or hosted service for full execution. Each section includes guided practice, projects and a ten-question exam.
Read an explanation, study the example, try the task and review feedback. Keep your own project files and test them in their intended environment. Completing an activity or a course certificate is not an accredited qualification or a guarantee of employment.
Expand a section to read its chapters and projects. This is the actual course curriculum, not a separate list of promised future topics.
Use the terminal, Git and GitHub to make work recoverable and collaborative.
Section outcome: Create a repository with clear commits, branches and a useful README.
Navigate folders, run tools and understand paths without relying only on a graphical file browser.
Capture meaningful checkpoints with messages that explain completed changes.
Rebuild and vary the git commits and history example until every important piece feels familiar.
Develop isolated changes and combine them while resolving conflicts deliberately.
Use remotes, issues, pull requests and reviews to collaborate visibly.
Rebuild and vary the github collaboration example until every important piece feels familiar.
Recover a deleted change and explain which Git record made recovery possible.
Prepare a structured repository another developer can clone, understand and review.
Create meaningful document structure that works with keyboards and assistive technology.
Section outcome: Build and audit an accessible multi-page information service.
Use semantic regions and a logical heading outline to communicate page structure.
Keep controls reachable, visible and operable without a mouse.
Rebuild and vary the keyboard interaction example until every important piece feels familiar.
Associate labels, instructions and error messages with their controls.
Provide useful alternatives and declare language or captions where meaning requires them.
Rebuild and vary the images, media and language example until every important piece feels familiar.
Find and repair focus, label and heading problems on one page.
Build a small service site that passes a documented manual accessibility review.
Build resilient layouts from tokens, flexible sizing, Grid and Flexbox.
Section outcome: Create a responsive component library that survives varied content and screens.
Centralise repeated design decisions and control where styles win.
Let content and available space influence layout before adding breakpoints.
Rebuild and vary the intrinsic responsive layout example until every important piece feels familiar.
Choose the layout system that matches one-dimensional or two-dimensional relationships.
Adapt components and pages at meaningful content thresholds.
Rebuild and vary the container queries and media queries example until every important piece feels familiar.
Build one card pattern that handles short, long and translated content.
Create a dashboard tested across narrow phones, tablets, laptops and zoomed desktop views.
Organise behaviour into modules and use browser capabilities responsibly.
Section outcome: Build a modular client application with clear state and error boundaries.
Separate responsibilities with explicit imports and exports.
Connect user events to predictable state changes and rendered output.
Rebuild and vary the dom events and state example until every important piece feels familiar.
Use localStorage or query parameters for appropriately local, shareable state.
Preserve useful content and core actions when JavaScript is delayed or unavailable.
Rebuild and vary the progressive enhancement example until every important piece feels familiar.
Save, restore and remove locally stored reading items.
Build a progressively enhanced task interface with modular JavaScript and local state.
Fetch remote data, validate responses and communicate loading, empty and error states.
Section outcome: Integrate a public API without leaving users staring at uncertainty.
Sequence asynchronous operations while keeping success and failure paths readable.
Interpret status codes, headers and structured response data.
Rebuild and vary the http and json example until every important piece feels familiar.
Show what is happening and provide a recovery action when work fails.
Avoid stale results and unnecessary repeated requests.
Rebuild and vary the caching and cancellation example until every important piece feels familiar.
Render loading, success, empty and failure states from mocked API responses.
Build a searchable API-backed directory with cancellation, validation and recovery.
Prevent regressions with layered tests and disciplined diagnosis.
Section outcome: Create a test strategy and repair failures using evidence.
Turn a vague report into repeatable steps and an isolated cause.
Test small logic and connected interface behaviour at appropriate boundaries.
Rebuild and vary the unit and integration tests example until every important piece feels familiar.
Verify a few critical user outcomes in a production-like browser.
Run checks automatically before changes are merged.
Rebuild and vary the continuous integration example until every important piece feels familiar.
Document, isolate and protect one realistic frontend bug.
Add unit, accessibility and critical-journey checks to a portfolio project.
Measure real bottlenecks, reduce avoidable risk and make content findable.
Section outcome: Run and document a complete production-readiness audit.
Measure loading, responsiveness and layout stability before optimising.
Treat user input and remote content as untrusted and avoid unsafe injection.
Rebuild and vary the frontend security boundaries example until every important piece feels familiar.
Provide crawlable content, metadata, canonical URLs and useful internal links.
Collect only necessary data and explain measurement clearly.
Rebuild and vary the privacy and responsible analytics example until every important piece feels familiar.
Measure one page, fix the largest user-facing issue and compare results.
Audit and harden a complete frontend application before launch.
Ship reliable work and explain decisions to employers or clients.
Section outcome: Publish a polished capstone with evidence, documentation and a case study.
Separate local and production configuration and deploy repeatably.
Observe failures and keep a rollback or recovery path.
Rebuild and vary the monitoring and recovery example until every important piece feels familiar.
Explain the problem, constraints, decisions, evidence and result.
Demonstrate reasoning and trade-offs rather than reciting technology names.
Rebuild and vary the interview and client presentation example until every important piece feels familiar.
Publish a staging build, test it and practise a rollback.
Design, build, test, deploy and present a production-ready frontend capstone.
Guest progress is saved in this browser on this device. Clearing site data or switching browsers can remove access to that local progress. An optional account can synchronize supported course progress; it is not required to access the lessons. Download or back up project work separately.
Certificates recognize completion of the course activities on this site. They are not university credit, professional accreditation or proof that every program you write is correct.