Frontend Developer roadmap

What you will learn

1. 1. HTML & CSS

   Semantic HTML and modern CSS layout with Flexbox and Grid.

   • Semantic HTML — Frontend Engineering · Semantic HTML
   • CSS, Flexbox & Grid — Frontend Engineering · CSS, Flexbox & Grid

2. 2. Accessibility & Responsive Design

   Build interfaces everyone can use, on every screen size.

   • Accessibility — Frontend Engineering · Accessibility
   • Responsive Design — Frontend Engineering · Responsive Design

3. 3. TypeScript Basics

   Primitive types and inference, and when to use interfaces or type aliases.

   • Primitive Types & Inference — TypeScript · Primitive Types & Inference
   • Interfaces vs Types — TypeScript · Interfaces vs Types

4. 4. React Foundations

   Components and JSX, props, state and events, and the useState and useEffect hooks.

   • Components & JSX — React · Components & JSX
   • Props, State & Events — React · Props, State & Events
   • useState & useEffect — React · useState & useEffect

5. 5. Testing Essentials

   Unit tests with Arrange-Act-Assert, then integration and end-to-end tests.

   • Unit Testing & AAA — Testing & Quality · Unit Testing & AAA
   • Integration & E2E Testing — Testing & Quality · Integration & E2E Testing

6. 6. Async JavaScript & the DOM

   Promises, async/await and the event loop, plus the DOM and fetch.

   • Promises, Async & Event Loop — JavaScript · Promises, Async & Event Loop
   • DOM & Fetch — JavaScript · DOM & Fetch

7. 7. Browser Rendering & Web Performance

   How browsers render pages and how to make them load and respond fast.

   • Browser Rendering — Frontend Engineering · Browser Rendering
   • Web Performance — Frontend Engineering · Web Performance

8. 8. Data Fetching & Forms

   Fetch and cache server data with React Query and build forms with solid validation.

   • Data Fetching & React Query — React · Data Fetching & React Query
   • Forms & Validation — Frontend Engineering · Forms & Validation

9. 9. Frontend Architecture & Security

   Structure frontends and their state, and protect them from client-side attacks.

   • Frontend Architecture & State — Frontend Engineering · Frontend Architecture & State
   • Frontend Security — Frontend Engineering · Frontend Security