← Websites 📚

Documentation Site with Live Search

Build a real documentation site with a sidebar and a search box that filters as you type.

🟡 MediumDifficulty

3-4 hoursTime

JavaScript, TypeScriptLanguages

What you're building

A developer-docs-style website with a fixed sidebar of navigation links, scrollable content sections, and a search box at the top that instantly filters both the sidebar links and highlights matches as you type - the exact experience you get on sites like MDN or Stripe's docs.

What you'll unlock 🔓

Search-as-you-typeDOM TraversalLayoutString Matching

You'll need

Basic HTML
Basic CSS
Basic JavaScript

🗺️ Build roadmap

01 Set up sidebar and content layout → 02 Write the doc content sections → 03 Wire up sidebar navigation scrolling → 04 Build the live search filter → 05 Highlight matching text → 06 Add active-section tracking → 07 Polish and make responsive

🔒

Log in to start building

Your first project is free -- create an account to unlock it.