Welcome to JavaScript for Web Dev - JavaScript for Web Dev

What you’ll build

By the end of this course, you’ll build interactive web UIs with React and connect them to a FastAPI backend. You’ll go from “I know Python” to “I can build a full-stack web app.”

// This is the kind of code you'll write confidently:
async function getUsers() {
  const response = await fetch("http://localhost:8000/api/users");
  const data = await response.json();
  return data;
}

UserList.jsx

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    getUsers().then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

That might look unfamiliar now. By Section 8, you’ll write code like this without thinking twice.

What you’ll learn

This course covers the JavaScript you actually need for web development — not everything JavaScript can do, but the 20% you’ll use 80% of the time.

JavaScript fundamentals — variables, functions, arrays, objects, and how they differ from Python
Async programming — fetch data from APIs, handle errors, manage loading states
DOM basics — select elements, handle events, work with forms
React — components, props, state, effects, and common UI patterns
Full-stack integration — connect a React frontend to a FastAPI backend with a complete CRUD app

This course has a companion repository: a production-ready FastAPI + React application you’ll reference throughout Section 8. You can find it on GitHub.

Course structure

The course is organized into 9 sections. Each one builds on the last:

Section	What you’ll learn
Introduction	What you’ll build, who the course is for, and how to study it
Getting Started	Install Node.js, set up VS Code, run your first JavaScript file
JavaScript Core	Variables, data types, functions, scope — the foundation
Working with Data	Arrays, objects, destructuring, JSON — how data moves around
Async & APIs	Promises, async/await, fetch — how to talk to your backend
DOM & Browser	Select elements, handle events, work with forms — the browser layer
React Essentials	Components, props, state, effects — building interactive UIs
Full-Stack	Connect React to FastAPI — build a real CRUD application
Next Steps	Where to go after this course

How the sections depend on each other:

JavaScript Core + Working with Data → the syntax and patterns React code is built on
Async & APIs → required before React data fetching feels natural
DOM & Browser → helps you understand what React is abstracting
React Essentials → prerequisite for the Full-Stack section
Full-Stack → combines everything into one app flow (frontend + FastAPI)

You don’t have to go in order, but the sections are designed to build on each other. If you already know some JavaScript, feel free to skip ahead to what’s new for you.

What’s next?

Before diving in, let’s make sure this course is the right fit for your background and goals.

Is this for you?

Check if your background matches what this course expects

​What you’ll build

​What you’ll learn

​Course structure

​What’s next?

Is this for you?

What you’ll build

What you’ll learn

Course structure

What’s next?