Frontend Foundations
HTML and CSS once, then React and TypeScript properly.
Free to watch. Starting adds a personal copy to My Learning with progress tracking and a curated-path certificate on completion.
About this path
The HTML and CSS course in our catalogue is ten separate full courses of the same material, seventy-one hours in total. We take one crash course and one guided build from it, then move straight to React's real curriculum and TypeScript's type system, with the Figma skills to read a design before you build it.
What you'll learn
- Write semantic HTML and CSS that holds up on a real layout
- Build React components with state, props, and effects
- Fetch data and handle loading and error states
- Add TypeScript types that catch bugs instead of adding noise
- Read a Figma file and build what it specifies
The path, module by module
Each step is lifted from a full course in our catalog, and where a course repeats itself we keep only the lessons that earn their place.
Module 1 · from HTML & CSS for Beginners
HTML and CSS, Once
One crash course and one guided component build. The source playlist is ten different full courses covering identical ground across seventy-one hours; two lessons is the honest dose.
2 lessons · 2h 27m · hand-picked from 10
HTML Tutorial - Website Crash Course for Beginners · HTML / CSS Tutorial – Create an Order Summary Component
Module 2 · from HTML & CSS for Beginners
Web Reference & First Project
Our essentials reference and a responsive landing page project, so the fundamentals land as something you built.
2 lessons · 4m
HTML & CSS Essentials · Project: Build a Responsive Landing Page
Module 3 · from React JS Full Course
Components, Templates, and State
Components, templates, events, and useState. Net Ninja's React course is one of the few that never pads.
8 lessons · 58m
Full React Tutorial #1 - Introduction · Full React Tutorial #2 - Creating a React Application · Full React Tutorial #3 - Components & Templates
Module 4 · from React JS Full Course
Props, Lists, and useEffect
Props, lists, useEffect, and a local API. The point where React becomes an application rather than a page.
8 lessons · 40m
Full React Tutorial #9 - Intro to React Dev Tools · Full React Tutorial #10 - Outputting Lists · Full React Tutorial #11 - Props
Module 5 · from TypeScript Full Course
Types, Objects, and tsconfig
Types, objects, and tsconfig. Enough TypeScript to be useful without a detour into type-level programming.
8 lessons · 1h 1m
TypeScript Tutorial #1 - Introduction & Setup · TypeScript Tutorial #2 - Compiling TypeScript · TypeScript Tutorial #3 - Type Basics
Module 6 · from Figma for Beginners (2026)
Read a Design Before You Build It
Navigating files, buttons, components, and auto layout. Handoff goes better when you can open the file yourself.
4 lessons · 32m · hand-picked from 8
Navigate Figma Design files: Figma Design for beginners [3 of 13] · Create the button: Figma Design for beginners [6 of 13] · Components fundamentals: Figma Design for beginners [7 of 13]