Phase 1: web foundations

Learn semantic HTML, responsive CSS, accessibility and browser developer tools. Build small pages without copying a framework template so you understand layout and structure.

Phase 2: JavaScript

Practise variables, functions, arrays, objects, modules, asynchronous code and DOM events. Use APIs and handle loading, success and error states.

Phase 3: frontend applications

Learn component design, routing, forms and state using a framework such as React. Keep accessibility and performance in the workflow rather than treating them as final polish.

Phase 4: backend and data

Choose Node.js or Python/Django and learn request handling, validation, authentication, authorisation, REST APIs and database design. Understand SQL even if you also use a document database.

Phase 5: professional delivery

Use Git, environment variables, tests, logs and secure defaults. Deploy applications and learn how production differs from local development.

Portfolio sequence

  1. A responsive content site.
  2. An API-driven frontend.
  3. An authenticated database application.
  4. A deployed capstone solving a real problem.

Do not rush through every tool. Repeat the full build cycle until you can make decisions independently and explain them clearly.