Skip to main content

​
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:
SectionWhat you’ll learn
IntroductionWhat you’ll build, who the course is for, and how to study it
Getting StartedInstall Node.js, set up VS Code, run your first JavaScript file
JavaScript CoreVariables, data types, functions, scope — the foundation
Working with DataArrays, objects, destructuring, JSON — how data moves around
Async & APIsPromises, async/await, fetch — how to talk to your backend
DOM & BrowserSelect elements, handle events, work with forms — the browser layer
React EssentialsComponents, props, state, effects — building interactive UIs
Full-StackConnect React to FastAPI — build a real CRUD application
Next StepsWhere 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