AlgoCademy
Start learning free

CoursesBuild real appsFrontend

Build a shop’s storefront with HTML, CSS, JavaScript and React.

For people who know basic JavaScript and want to build for the browser. You start from an empty HTML file and end with a React app that has a cart and order pages. The checker opens your page and uses it like a visitor.

Start the first lesson See the plans
You type every line A real checker runs your code Nothing to install
Lessons
161
Chapters
11
Language
JavaScript
Level
Intermediate
Interview questions
24
Free
The first chapter
Before you start
JavaScript basics: variables, functions, arrays and loops.

What you build

The shop’s home page

HTML and CSS: product cards, a table, a form, and a layout that fits small screens.

A cart panel in plain JavaScript

Clicks, quantities and a total, in a cart the page remembers.

The storefront in React

Components, state, data from the shop’s API, and pages with React Router.

An order form

It sends the order to the API and handles slow, failed and refused answers.

Tools and topics

Syllabus

01HTML12 lessons
  1. Your First Pagefree
  2. Headings and Paragraphsfree
  3. Linksfree
  4. Imagesfree
  5. Listsfree
  6. The Regions of a Pagefree
  7. A Card for Each Productfree
  8. A Tablefree
  9. A Formfree
  10. Let the Browser Checkfree
  11. The Head of the Pagefree
  12. Project: The Shop's Home Pagefree
02CSS15 lessons
  1. Your First Rule
  2. Classes
  3. Pick the Right Elements
  4. Two Rules, One Element
  5. Which Rule Is Stronger
  6. What Children Inherit
  7. Padding, Border, Margin
  8. Variables
  9. Show and Hide
  10. Flexbox: A Row
  11. Flexbox: Cards That Wrap
  12. Grid
  13. Small Screens
  14. Hover, Focus, Disabled
  15. Project: Style the Shop
03JavaScript in the Browser18 lessons
  1. A Script on the Page
  2. Find Many Elements
  3. Read and Change Attributes
  4. Change Classes
  5. Build Elements
  6. Build a Card
  7. React to a Click
  8. Which Button Was It?
  9. State, Then Render
  10. Quantities and a Total
  11. Filter While Typing
  12. Handle a Form
  13. Say What Is Wrong
  14. Text Is Not HTML
  15. Remember the Cart
  16. Later: Timers
  17. Keys and Focus
  18. Project: The Cart Panel
04Talking to an API16 lessons
  1. Ask the API
  2. Read the Answer
  3. async and await
  4. While You Wait
  5. 404 Is Not an Error to fetch
  6. When the Network Fails
  7. When the Server Fails
  8. Send a Search
  9. Don't Ask on Every Key
  10. The Late Answer
  11. Send Data: POST
  12. When the Server Says No
  13. Change and Remove
  14. Load More
  15. One Helper for Every Call
  16. Project: Place the Order
05React Components and State18 lessons
  1. Your First Component
  2. JSX Is Not HTML
  3. Props
  4. Pass a Whole Product
  5. Lists and Keys
  6. Components Inside Components
  7. State
  8. Handlers
  9. State Changes on the Next Draw
  10. A Controlled Input
  11. Compute, Don't Store
  12. Checkboxes and Selects
  13. Share State: Lift It Up
  14. Arrays in State
  15. Change One Item
  16. Show One Thing or Another
  17. A Form in React
  18. Project: The Cart
06React Effects and Data15 lessons
  1. Effects: After the Draw
  2. Load the Products from the API
  3. Loading
  4. When Loading Fails
  5. Ask Again When Something Changes
  6. The Effect That Never Stops
  7. Clean Up
  8. Ignore the Old Answer
  9. Change Data on the Server
  10. While It Saves
  11. Show It First, Fix It If Needed
  12. Your Own Hook
  13. A Hook That Remembers
  14. Refs: Reach an Element
  15. Project: The Product Panel
07React Routes and Shared State14 lessons
  1. Pages Without Loading a Page
  2. React Router
  3. A Page per Product
  4. No Such Page
  5. Where Am I?
  6. One Frame for Every Page
  7. Filters in the Address
  8. Go There from Code
  9. Context: The Cart Everywhere
  10. A Hook for the Context
  11. A Reducer for the Cart
  12. Pages for Signed-in Visitors
  13. One Crash, Not a Blank Page
  14. Project: The Orders Pages
08Accessible, Fast, Correct10 lessons
  1. Every Field Has a Name
  2. Buttons Are Buttons
  3. Where the Focus Goes
  4. Say What Happened
  5. A Page You Can Skim
  6. Count the Draws
  7. Don't Recompute
  8. Keys Are Identity
  9. Money and Dates
  10. A Dark Mode Switch
09The Project Around the Code7 lessons
  1. package.json
  2. How the Page Starts
  3. import and export
  4. Styles and Images in Components
  5. Settings per Environment
  6. The Dev Server's Proxy
  7. Check Every Push
10Frontend with AI12 lessons
  1. The AI Used the Index as Key
  2. The AI's Effect Never Stops
  3. The AI Changed State in Place
  4. A Countdown Stuck at 9
  5. The AI Assumed It Works
  6. The AI Shows the Wrong Search
  7. The AI Trusted the Review
  8. The AI's Button Is a Span
  9. Two Orders
  10. $0.30000000000000004
  11. The AI Copied Props into State
  12. Project: Review an AI Pull Request
11Interview Questions24 lessons
  1. Debounce
  2. Throttle
  3. Write Array.prototype.map
  4. Write Promise.all
  5. An Event Emitter
  6. Memoize
  7. Deep Clone
  8. Curry
  9. An Undoable Counter
  10. FAQ Accordion
  11. Tabs
  12. A Modal Dialog
  13. Star Rating
  14. Autocomplete
  15. Multi-Step Form
  16. Two-Factor Code Input
  17. Image Carousel
  18. Countdown Timer
  19. Sortable Data Table
  20. Load More
  21. Toast Messages
  22. Tic-Tac-Toe
  23. Memory Game
  24. File Tree

Questions

Something else?
team@algocademy.com

Do I see the page I build?

Yes. Lessons have a Your page tab that shows it.

Is it real React?

Yes. React 18 with hooks and React Router.

More in Build real appsBackendFull-StackSecurityAll courses

LESSON 1

Your First Page

The first chapter is free, no card needed. The rest comes with PRO.

Start the lesson See the plans