Learn React from the ground up
Start with HTML, CSS, and JavaScript. Complete a lesson to unlock the next.
Start learning: Your First Web Page
51 lessons · sign in to save your progress
HTML
The structure of every web page, and the tree of elements React builds for you.
- 1Lesson 1 · Up nextYour First Web PageWhat a browser does with an HTML file, and the skeleton every page shares.HTML structureYour First Web Page
- Lesson 2 · LockedElements and TagsOpening tags, closing tags, and the headings and paragraphs you will use everywhere.HTML structureComplete the lesson before it to unlock this one.
- Lesson 3 · LockedAttributesExtra information on an element: id, class, href, src, and alt.AttributesComplete the lesson before it to unlock this one.
- Lesson 4 · LockedNesting and ListsPutting elements inside other elements, and building ordered and unordered lists.HTML structureComplete the lesson before it to unlock this one.
- Lesson 5 · LockedLinks and ImagesConnecting pages with anchors and showing pictures with accessible alt text.AttributesComplete the lesson before it to unlock this one.
- Lesson 6 · LockedForms and InputsCollecting input with forms, labels, text fields, checkboxes, and buttons.HTML formsComplete the lesson before it to unlock this one.
- Lesson 7 · LockedSemantic HTMLChoosing elements by meaning: header, nav, main, section, article, and footer.Semantic HTMLComplete the lesson before it to unlock this one.
- Lesson 8 · LockedThe DOM TreeHow the browser turns HTML into a tree of objects, the same tree React updates for you.The DOM treeComplete the lesson before it to unlock this one.
CSS
Selectors, the box model, and layout with flexbox and grid.
- Lesson 1 · LockedAdding CSS to a PageRules, properties, and values, and the three places CSS can live.Colors & textComplete the lesson before it to unlock this one.
- Lesson 2 · LockedSelectorsTargeting elements by type, class, id, and position, and which rule wins.SelectorsComplete the lesson before it to unlock this one.
- Lesson 3 · LockedColors, Text, and UnitsColor formats, fonts, and the difference between px, rem, and %.Colors & textComplete the lesson before it to unlock this one.
- Lesson 4 · LockedThe Box ModelContent, padding, border, and margin, and why box-sizing matters.Box modelComplete the lesson before it to unlock this one.
- Lesson 5 · LockedFlexboxLaying out items in a row or column, with alignment and spacing.FlexboxComplete the lesson before it to unlock this one.
- Lesson 6 · LockedGridTwo-dimensional layouts with rows, columns, and gaps.CSS gridComplete the lesson before it to unlock this one.
- Lesson 7 · LockedClasses vs Inline StylesReusable classes, one-off inline styles, and how React uses both.Selectors · Styling componentsComplete the lesson before it to unlock this one.
- Lesson 8 · LockedResponsive BasicsMedia queries and flexible units so pages work on phones and laptops.Responsive designComplete the lesson before it to unlock this one.
JavaScript
The language features React leans on: functions, arrays, objects, modules, and the DOM.
- Lesson 1 · LockedVariables and ValuesStoring values with const and let, and the basic types: strings, numbers, and booleans.VariablesComplete the lesson before it to unlock this one.
- Lesson 2 · LockedFunctionsPackaging code into reusable pieces with parameters and return values.FunctionsComplete the lesson before it to unlock this one.
- Lesson 3 · LockedArrow FunctionsThe short function syntax you will see in almost every React component.FunctionsComplete the lesson before it to unlock this one.
- Lesson 4 · LockedConditionals and Template Literalsif, ===, the ternary operator, &&, truthy and falsy values, and building strings.ConditionalsComplete the lesson before it to unlock this one.
- Lesson 5 · LockedArraysOrdered lists of values: indexes, length, and adding items.ArraysComplete the lesson before it to unlock this one.
- Lesson 6 · LockedCallbacksPassing a function to another function so it can call it later.CallbacksComplete the lesson before it to unlock this one.
- Lesson 7 · Lockedmap and filterTransforming and narrowing arrays without loops, the way React renders lists.Array methodsComplete the lesson before it to unlock this one.
- Lesson 8 · LockedObjectsGrouping related values under named keys, and reading them back.ObjectsComplete the lesson before it to unlock this one.
- Lesson 9 · LockedDestructuringPulling values out of objects and arrays into variables in one line.Destructuring & spreadComplete the lesson before it to unlock this one.
- Lesson 10 · LockedSpread and RestCopying and combining arrays and objects without changing the originals.Destructuring & spreadComplete the lesson before it to unlock this one.
- Lesson 11 · LockedModulesSplitting code across files with import and export.ModulesComplete the lesson before it to unlock this one.
- Lesson 12 · LockedDOM ManipulationFinding elements and changing their text, attributes, and children from JavaScript.DOM manipulationComplete the lesson before it to unlock this one.
- Lesson 13 · LockedEventsResponding to clicks and typing with addEventListener.DOM eventsComplete the lesson before it to unlock this one.
- Lesson 14 · LockedPromises and fetchWaiting for slow work like network requests with promises, async, and await.Promises & fetchComplete the lesson before it to unlock this one.
React
Components, props, state, and hooks, ending with a small app of your own.
- Lesson 1 · LockedWhy React?Describing what the screen should look like instead of how to change it.ComponentsComplete the lesson before it to unlock this one.
- Lesson 2 · LockedJSXHTML-like syntax inside JavaScript, and the rules that make it different from HTML.JSXComplete the lesson before it to unlock this one.
- Lesson 3 · LockedComponentsFunctions that return JSX, and building pages out of them.ComponentsComplete the lesson before it to unlock this one.
- Lesson 4 · LockedPropsPassing data into components so one component can show many things.PropsComplete the lesson before it to unlock this one.
- Lesson 5 · LockedChildrenWrapping content inside a component with the children prop.Props · CompositionComplete the lesson before it to unlock this one.
- Lesson 6 · LockedConditional RenderingShowing different JSX with if, the ternary operator, and &&.Conditional renderingComplete the lesson before it to unlock this one.
- Lesson 7 · LockedLists and KeysRendering arrays with map, and why every item needs a stable key.Lists & keysComplete the lesson before it to unlock this one.
- Lesson 8 · LockedStyling ComponentsclassName, the style prop, and conditional classes.Styling componentsComplete the lesson before it to unlock this one.
- Lesson 9 · LockedState with useStateGiving a component memory that survives re-renders.StateComplete the lesson before it to unlock this one.
- Lesson 10 · LockedHandling EventsonClick, onChange, and passing handlers instead of calling them.Event handlersComplete the lesson before it to unlock this one.
- Lesson 11 · LockedUpdating Arrays and Objects in StateReplacing state with new copies so React notices the change.State · Destructuring & spreadComplete the lesson before it to unlock this one.
- Lesson 12 · LockedForms and Controlled InputsKeeping input values in state and handling form submission.Forms & controlled inputsComplete the lesson before it to unlock this one.
- Lesson 13 · LockedLifting State UpSharing state between components by moving it to their closest common parent.Lifting stateComplete the lesson before it to unlock this one.
- Lesson 14 · LockedEffects with useEffectRunning code after render to sync with things outside React, and cleaning up.EffectsComplete the lesson before it to unlock this one.
- Lesson 15 · LockedFetching DataLoading data in an effect and showing loading and error states.Data fetching · EffectsComplete the lesson before it to unlock this one.
- Lesson 16 · LockedCompositionBuilding flexible components from smaller ones instead of adding options.CompositionComplete the lesson before it to unlock this one.
- Lesson 17 · LockedCustom HooksExtracting stateful logic into reusable use functions.Custom hooksComplete the lesson before it to unlock this one.
- Lesson 18 · LockedContextPassing data deep into the tree without threading props through every level.ContextComplete the lesson before it to unlock this one.
- Lesson 19 · LockedSimple RoutingShowing different pages for different URLs, built from state you already know.RoutingComplete the lesson before it to unlock this one.
- Lesson 20 · LockedCapstone: Planning an AppBreaking a small app into components and deciding where each piece of state lives.Components · Lifting stateComplete the lesson before it to unlock this one.
- Lesson 21 · LockedCapstone: Building the AppPutting it all together into a working reading-list app.State · Forms & controlled inputs · Lists & keysComplete the lesson before it to unlock this one.