Full stack development

Stage 1 of 7 · 8 lessons · ~4 months

Web foundations: HTML, CSS and JavaScript

The browser side, compressed: semantic HTML, responsive CSS and enough JavaScript for the DOM, events and fetch. If all of this is new, work through the first two stages of the Frontend roadmap first.

Start: How a request reaches a server

Lessons· one lesson for each topic, in this order

  1. 1How a request reaches a server
  2. 2Semantic HTML and forms
  3. 3Flexbox, Grid and responsive layout
  4. 4JavaScript values, functions and scope
  5. 5The DOM and events
  6. 6Promises and async/await
  7. 7The event loop
  8. 8Fetching data with loading, empty and error states

Start with· follow one of these

  • CoursePaid
    Grokking JavaScript Fundamentals

    Design Gurus · Beginner · $50

    Guided course on the language core if you want structure and quizzes

  • CourseFree
    The Odin Project

    The Odin Project · Beginner

    Free Foundations course: HTML, CSS and JavaScript built in your own editor

Practise

  • Frontend Mentor

    Real designs to rebuild, so layout and interactivity get proper practice

Keep handy

  • MDN Web Docs

    The reference for HTML, CSS, JavaScript and browser APIs

  • W3Schools

    Quick syntax lookups for HTML, CSS and JavaScript while you build

Also worth your time

Before moving on: Build a responsive page in plain JavaScript that loads data from a public API, filters it and handles loading, empty and error states.

Tauseef's advice
Do not rush this to get to the backend. Your API will be Python, but the React side still runs on JavaScript, and weak async code there causes most of the frontend bugs I see in student projects.

Mark this stage as not done?