PRACTICE WITH A PURPOSE

Turn an idea into something you can build.

Apply what you have learned through interactive coding exercises and guided projects you build in your own files.

One small build. One useful skill.

  1. Understand the goal. See what you are building and where you would use it.
  2. Write and experiment. Edit the starter code and follow the live preview, or download a guided project’s starter files.
  3. Check and improve. Use the solution checks and hints, or a guided project’s self-review checklist, to review your result.

No account needed. Editor drafts stay in this browser; downloaded project files stay on your computer.

Practice checkpoints in your courses

These activities appear in the guided path after their prerequisite lessons. Use the course outline to learn in order, or revisit a practice below.

View all courses →

Your first step starts here

— / 67 required steps complete · Saved in this browser.

Course 1 of 6 · HTML fundamentals

Start: Build your first HTML page →

Follow the recommended order or open any step. Optional previews, challenges, and playgrounds do not block completion.

  1. HTML fundamentals · Step 9HTMLBeginner · 5–10 minutes

    Structure a study plan

    Turn plain text into headings, paragraphs, and a list.

    Progress loads in this browser
  2. Local projects · Step 2HTMLBeginner · 5–10 minutes

    Fix broken file paths

    Reconnect stylesheets, scripts, images, and links using a folder tree.

    Progress loads in this browser
  3. HTML fundamentals · Step 16HTMLLocal project · self-reviewBeginner · 30–45 minutes

    Build your first complete HTML webpage

    Combine your HTML skills in a personal learning portfolio built in your own files.

    Progress loads in this browser
  4. CSS fundamentals · Step 6CSSBeginner · 5–10 minutes

    Style a reading card

    Give a simple card readable text and comfortable spacing.

    Progress loads in this browser
  5. Flexbox · Step 3FlexboxBeginner · 10–15 minutes

    Center a card with Flexbox

    Build a centered welcome card by writing the CSS yourself.

    Progress loads in this browser
  6. Flexbox · Step 5FlexboxBeginner · 15–20 minutes

    Build a responsive navbar

    Arrange a brand and menu that adapt to small screens.

    Progress loads in this browser
  7. CSS Grid · Step 3CSS GridBeginner · 15–20 minutes

    Build a responsive card grid

    Build three equal feature cards that stack on mobile.

    Progress loads in this browser
  8. CSS Grid · Step 6Flexbox + GridIntermediate · 25–35 minutes

    Build a complete landing page

    Combine a responsive navbar, centered hero, and feature grid in one page.

    Progress loads in this browser
  9. JavaScript · Step 11JavaScriptBeginner · 10–15 minutes

    Build a click counter

    Make buttons change a number with click events.

    Progress loads in this browser
  10. JavaScript · Step 12JavaScriptBeginner · 10–15 minutes

    Build a greeting form

    Read a name and respond when a form is submitted.

    Progress loads in this browser
  11. Local projects · Step 5DebuggingBeginner · 15–20 minutes

    Fix this page

    Investigate three bugs in a small counter page.

    Progress loads in this browser
  12. Local projects · Step 6JavaScriptLocal project · self-reviewBeginner · 45–60 minutes

    Build a weather interface with asynchronous data

    Build a sample-weather interface locally, with loading, missing-data, and error states.

    Progress loads in this browser