Courses

Frontend Development

HTML, CSS, JavaScript, React, and modern web development

  • 9 lessons
  • 5.5 hours
  • Beginner
  • Graded labs: 2
Start course Course map & resources

What you will learn

  • Build semantic, accessible HTML pages that work with a keyboard and a screen reader.
  • Lay out responsive pages with Flexbox, Grid and media queries from 360px up.
  • Write JavaScript that handles events, transforms arrays and fetches data asynchronously.
  • Use Git and GitHub to save work, branch and open a pull request.
  • Compose React components with props and state and lift state when two components share it.
  • Add TypeScript types that catch bugs before the browser does.
  • Ship a routed Next.js app with data fetching and a production build.
  • Test components and measure performance against Core Web Vitals.

How you are assessed

Frontend skill is shown by working pages: quizzes check your mental model of the DOM and React, in-lesson exercises are checked in your browser, and graded labs verify your logic in plain JavaScript and TypeScript.

To pass this track
  • Complete every Foundations lesson
  • Average on first-try quizzes: at least 70%
  • Graded lab exercises to pass: 2
  • Challenges to solve: 1
  • Lessons

    Build the core

    Complete HTML & CSS, JavaScript, Git and React.

  • Quizzes

    Know why it works

    Average at least 70% on first-try quizzes about the DOM, the box model, state and props.

  • Lab exercises

    Write logic that passes tests

    Pass the JavaScript text-processing lab and the TypeScript typing lab.

  • Challenges

    Solve a web challenge

    Solve one frontend or web-security challenge on your own.

Curriculum

Module 1 · 4 lessons

Web fundamentals

HTML, CSS, JavaScript, Git and your first React components.

0/4
  1. 1.HTML & CSS — Your First Web Page

    The building blocks of the web. Learn semantic HTML5, CSS selectors, the box model, flexbox, grid, and responsive design. Every frontend developer starts here.

    45 min 4 exercises 1 quiz
    Challenge Try in Code Lab
  2. 2.JavaScript — Make Pages Come Alive

    The language of the web. Variables, functions, DOM manipulation, events, async/await, promises, and ES6+ features. JavaScript makes websites interactive.

    50 min 5 exercises 1 quiz Graded labs: 1
    LabChallenge Try in Code Lab
  3. 3.Git & GitHub — Save Your Work Like a Pro

    Version control is non-negotiable. Learn git init, commit, push, pull, branching, merging, and resolving conflicts. GitHub is where all your code will live.

    25 min 1 exercise 1 quiz
    Try in Code Lab
  4. 4.React — Think in Components

    The most popular JavaScript library for building UIs. Components, props, state, hooks (useState, useEffect, useContext), and the virtual DOM. Used by Meta, Netflix, and thousands of companies.

    35 min 2 exercises 1 quiz
    Try in Code Lab
Module 2 · 4 lessons

Modern frontend stack

TypeScript, Tailwind, Next.js and getting paid for your skills.

0/4
  1. 5.TypeScript — JavaScript with a Safety Net

    JavaScript with types. TypeScript catches bugs at compile time, improves IDE support, and makes large codebases maintainable. Now required at most tech companies.

    30 min 2 exercises 1 quiz Graded labs: 1
    Lab Try in Code Lab
  2. 6.Tailwind CSS — Style at the Speed of Thought

    Tailwind CSS and component libraries like shadcn/ui. Tailwind is now the industry standard for rapid UI development — learn utility-first CSS deeply.

    30 min 2 exercises 1 quiz
    Try in Code Lab
  3. 7.Next.js — React, Production-Ready

    The React framework for production. App Router, server components, file-based routing, API routes, image optimization, and static/dynamic rendering. The top choice for full-stack React apps.

    25 min 1 exercise 1 quiz
    Try in Code Lab
  4. 8.Getting Paid — Turn Skills into Income

    Turn your skills into income. Build a portfolio that converts, price yourself right, win your first clients on Mostaql/Upwork, and avoid the classic scams. The lesson every self-taught developer needs.

    35 min 1 quiz
    Try in Code Lab
Module 3 · 1 lesson

Quality and performance

Test it, measure it, ship with confidence.

0/1
  1. 9.Testing & Performance — Ship with Confidence

    Jest, React Testing Library, Lighthouse, Core Web Vitals, and bundle optimization. Untested and slow frontends don't survive production — these skills separate juniors from seniors.

    30 min 2 exercises 1 quiz
    Try in Code Lab

Run a real example

This is the kind of code you will write. Run it, then change it and run it again.

JavaScript (Node.js)

Rendering a comment list safely. The second comment is an attack: see how it is neutralized. Remove escapeHtml to see what a browser would execute.

Open in Code Lab

Recommended challenges

Put the skills to work against a puzzle with a flag or a test suite.

See all challenges

Badges

Earned automatically from your progress on this device.

  • Hello, Web

    Locked

    Finish your first lesson.

    0 / 1

  • Web Fundamentals

    Locked

    Complete every fundamentals lesson.

    0 / 4

  • Logic Builder

    Locked

    Pass 2 graded lab exercises.

    0 / 2

  • DOM Whisperer

    Locked

    Score 80% or more on the first try in 4 lesson quizzes.

    0 / 4

  • Frontend Developer

    Locked

    Complete every lesson in the track.

    0 / 9

Certificate of completion

Lessons completed: 0 / 9

Complete every lesson to unlock your certificate.