PProtokol
start free
← all paths

Frontend Developer

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

8 courses13 projects85 lessons~79h

Skills you'll build

LoopsCSSVariablesDebuggingConditionalsFunctionsProblem SolvingHTMLAccessibilityCSS LayoutComputational Thinking

Your progress

0/85 lessons · 0%

Next step

Programming Foundations

start path

Courses in this path

  1. 01

    Programming Foundations

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

    ~14h17 lessons3 projectsbeginner

    start
  2. 02

    Debugging Academy

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

    ~10h10 lessons2 projectsintermediate

    start
  3. 03

    Version Control with Git

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

    ~6h9 lessons1 projectbeginner

    Finish Programming Foundations first.

    locked
  4. 04

    Web Foundations: HTML & CSS

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

    ~12h10 lessons3 projectsbeginner

    Finish Programming Foundations first.

    locked
  5. 05

    The DOM & Browser Events

    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

    Finish Programming Foundations first.

    locked
  6. 06

    JavaScript Deep Dive

    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

    Finish Programming Foundations first.

    locked
  7. 07

    Async JavaScript & APIs

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

    ~9h9 lessons1 projectintermediate

    Finish Programming Foundations first.

    locked
  8. 08

    React Fundamentals

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

    ~10h10 lessons1 projectintermediate

    Finish Programming Foundations first.

    locked

Projects you'll complete

  • Score Tracker

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

  • 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.

  • 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.

  • 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.

  • 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.

  • Filterable Product Dashboard

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

  • Number Guessing Engine

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

  • 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.

  • 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.