Web development

Time

28–38 weeks

Before this

Foundations of computer science

Leads to

Front-end developer, Back-end developer, Full-stack developer

People who want to build things others can use right away, in a browser.

1. Stage 1: HTML, CSS and how the web works , 4–6 weeks

   What to learn

   • Semantic HTML
   • Accessibility
   • CSS layout with flexbox and grid
   • Responsive design
   • Browser developer tools

   Free resources

   • Learn web development Course, MDN (Mozilla)
   • Learn HTML, CSS and Accessibility Course, web.dev (Google Chrome team)

   Build: A personal page that works on a phone and passes an accessibility check.

   Move on when: You can rebuild the layout of a site you like from scratch.

2. Stage 2: JavaScript in depth , 6–8 weeks

   What to learn

   • The DOM and events
   • Functions, closures and objects
   • Promises and async/await
   • Fetching data from APIs
   • Modules

   Free resources

   • The Modern JavaScript Tutorial Book, javascript.info
   • The Odin Project Course, The Odin Project (open source)

   Build: An app that uses a public API, such as a weather or book search app.

   Move on when: You can build an interactive page without a framework.

3. Stage 3: A front-end framework and TypeScript , 6–8 weeks

   What to learn

   • Components and state
   • Forms and validation
   • Routing
   • TypeScript types
   • Testing components

   Free resources

   • Learn React Docs, React team
   • The TypeScript Handbook Docs, Microsoft
   • Full Stack Open Course, University of Helsinki

   Build: A multi-page app with forms, saved state and at least a few tests.

   Move on when: You can explain when a component re-renders and why.

4. Stage 4: Back end and databases , 8–10 weeks

   What to learn

   • HTTP in detail
   • Building REST APIs
   • Login, sessions and tokens
   • PostgreSQL
   • Automated tests

   Free resources

   • Learn Node.js Docs, OpenJS Foundation
   • HTTP Docs, MDN (Mozilla)
   • PostgreSQL Tutorial Docs, PostgreSQL Global Development Group

   Build: An API with user accounts and a database, with tests, used by your front end.

   Move on when: You can design an API, store data safely, and test it.

5. Stage 5: Ship it, safely , 4–6 weeks

   What to learn

   • Deploying an app
   • Environment variables and secrets
   • HTTPS
   • Continuous integration
   • The OWASP Top 10

   Free resources

   • OWASP Top 10 Docs, OWASP Foundation
   • OWASP Cheat Sheet Series Docs, OWASP Foundation
   • GitHub Actions documentation Docs, GitHub

   Build: Deploy your full app with automatic tests on every push, and check it against the OWASP Top 10.

   Move on when: Strangers can use your app and you would know if it broke.

Back to all paths