</> LEARN BY BUILDING

Small projects. Real skills.

Choose a project at your level, follow the task in the editor, and build practical skills with HTML, CSS, and JavaScript.

Your project progress

Completed projects are saved on this device.

0 / 0 complete
START HERE

Beginner

Practise the core building blocks of the web.

01 Not started
HTML & CSS · BEGINNER

Personal Profile Card

Create a polished profile card with a name, short bio, avatar, and social links.

Your goals

  • Use meaningful HTML structure
  • Style the card and make it responsive
  • Add a visible hover or focus state
02 Not started
HTML, CSS & JAVASCRIPT · BEGINNER

Interactive To-Do List

Build a simple task list that lets someone add tasks and remove them when they are done.

Your goals

  • Read a task from the input field
  • Add tasks to the list with a button
  • Let each task be removed
03 Not started
HTML & CSS · BEGINNER

Product Showcase Card

Design a responsive product card with a clear title, price, description, and call-to-action.

Your goals

  • Arrange content with Flexbox or Grid
  • Make the card adapt to narrow screens
  • Make the action button stand out
04 Not started
HTML, CSS & JAVASCRIPT · BEGINNER

Tip Calculator

Turn a bill amount and tip percentage into a helpful little calculator.

Your goals

  • Accept a bill amount and tip percentage
  • Calculate the tip and total
  • Show results when the button is clicked
BUILD ON YOUR FOUNDATIONS

Intermediate

Connect components, work with data, and add richer interactions.

05Not started
HTML, CSS & JAVASCRIPT · INTERMEDIATE

Expense Tracker

Record income and expenses, then see your running balance update.

Your goals

  • Add and remove transactions
  • Calculate income, spending, and balance
  • Persist entries in local storage
06Not started
HTML, CSS & JAVASCRIPT · INTERMEDIATE

Interactive Quiz

Create a multiple-choice quiz that gives feedback and keeps score.

Your goals

  • Render questions and answer choices from data
  • Track answers and calculate a score
  • Show a results state and restart option
07Not started
HTML, CSS & JAVASCRIPT · INTERMEDIATE

Searchable Directory

Build a searchable directory with live text and category filters.

Your goals

  • Render a collection of items from an array
  • Combine search and category filters
  • Show a helpful empty state
TAKE ON A BIGGER BUILD

Expert

Put state management, safe rendering, and advanced browser APIs into practice.

08Not started
HTML, CSS & JAVASCRIPT · EXPERT

Drag-and-Drop Kanban

Organize work across columns with draggable task cards.

Your goals

  • Create, move, and delete tasks
  • Support drag-and-drop between columns
  • Save board state and restore it on reload
09Not started
HTML, CSS & JAVASCRIPT · EXPERT

Markdown Live Preview

Turn a small, supported subset of Markdown into a live preview safely.

Your goals

  • Support headings, emphasis, and lists
  • Escape HTML before rendering user text
  • Update the preview as the user types
10Not started
HTML, CSS & JAVASCRIPT · EXPERT

Habit Tracker

Track daily habits, visualize a week of activity, and calculate streaks.

Your goals

  • Record completion by date
  • Render a weekly activity view
  • Persist data and calculate current streaks