PProtokol
Start free
← All paths

Frontend Developer

Build fast, accessible, beautiful interfaces with modern JavaScript and React.

Your progress

0/85 lessons · 0%

Next up: Programming Foundations

Start path
8 courses85 lessons13 projects~79h

Roadmap

Each step unlocks when the one before it is done.

  1. Programming Foundations

    Think like a programmer: values, logic, loops, functions and problem solving in JavaScript.

    ~14h17 lessons3 projectsbeginner

  2. Debugging Academy

    Diagnose and fix syntax, logic, runtime, API and UI bugs like a professional.

    ~10h10 lessons2 projectsintermediate

  3. Version Control with Git

    Locked

    Learn Git from first principles: commits, branches, merges, remotes, pull requests, and how to undo mistakes safely.

    ~6h9 lessons1 projectbeginner

  4. Web Foundations: HTML & CSS

    Locked

    Structure and style real pages with semantic HTML and modern CSS layout.

    ~12h10 lessons3 projectsbeginner

  5. The DOM & Browser Events

    Locked

    Learn to read and change a live web page with JavaScript: select elements, update content, create and remove nodes, and respond to user actions with events.

    ~8h9 lessons1 projectbeginner

  6. JavaScript Deep Dive

    Locked

    Go beyond the basics: master how JavaScript really works under the hood, from coercion and closures to classes, modules, and modern 2026 syntax.

    ~10h11 lessons1 projectintermediate

  7. Async JavaScript & APIs

    Locked

    Understand the event loop, master callbacks/promises/async-await, and learn to talk to real HTTP APIs with fetch.

    ~9h9 lessons1 projectintermediate

  8. React Fundamentals

    Locked

    Learn React from first principles: components, JSX, props vs state, events, lists, conditional rendering, effects, composition, and data fetching.

    ~10h10 lessons1 projectintermediate

  9. Projects you'll build

    • Build an API Client Layer

      Design a small but real API client layer: build request URLs safely, normalise messy API responses into clean shapes, classify errors usefully, and generate stable cache keys.

    • Filterable Product Dashboard

      Build a filterable dashboard that lists items, lets users search/filter/sort them, and manages UI state with React hooks.

    • Data Transformation Toolkit

      Build a small library of pure functions that group, summarise, sort, and validate arrays of records -- the exact kind of utility code real apps use to shape data for dashboards, reports, and forms.

    • Semantic Landing Page

      Structure a real landing page with semantic, accessible HTML.

    • Responsive Marketing Site

      Build a responsive, multi-section marketing landing page using semantic HTML, Flexbox/Grid, forms, and accessibility best practices.

    • Ship a Feature: Branch, PR, Conflict, Release

      Take a small project through the full real-world Git lifecycle: branch off main, open a pull request, resolve a merge conflict, and cut a tagged release.

    • Score Tracker

      Turn variables and types into a working score tracker used by a small games night app.

    • Interactive To-Do & Filter Widget

      Build a small interactive to-do list widget: add items, mark them done, and filter which ones are visible — all with vanilla DOM APIs and event listeners.

    • Bug Triage Lab

      Diagnose and repair five broken functions, one bug type at a time.

    • Ship the Analytics Bug-Fix Release

      Diagnose and fix a batch of realistic bugs in a small analytics utility library, then defend each fix with a written root-cause note.

    • Number Guessing Engine

      Build the logic engine behind a guessing game using conditions and loops.

    • Responsive Dashboard Layout

      Final project: a responsive dashboard laid out with Flexbox and Grid.

    • Study Coach

      Final project: a study coach that summarises practice sessions and reports back in plain English.

Skills you'll build

LoopsCSSVariablesDebuggingConditionalsFunctionsProblem SolvingHTMLAccessibilityCSS LayoutComputational Thinking