Build a Filterable Content Library with Claude Code

The Problem

You've got a growing collection of content — tutorials, articles, resources, whatever — and your website just stacks them top to bottom. Ten cards is fine. Twenty is a wall. Visitors can't find what they're looking for, so they leave. You know you need search and filters, but wiring up interactive filtering from scratch? That's an afternoon you don't have.

What You're Building

A single HTML file that works as a full content library — responsive card grid, live search, clickable category pills, difficulty badges, and sorting. Open it in a browser and it works. No Node.js, no frameworks, no build step. Drop in your own data and deploy it anywhere.

Milestone 1: The Card Grid

Every library starts with something to browse. Let's build the foundation — a responsive grid of content cards that already looks like a real product.

Prompt:

Create a single index.html file — a content library page. Add 9 sample cards in a responsive grid (1 column mobile, 2 tablet, 3 desktop). Each card has: title, short description (1 line), category badge (Productivity/Marketing/Finance/General), difficulty badge (Beginner = green, Intermediate = amber, Advanced = red), and read time. Make sure the 9 cards cover all four categories and all three difficulty levels. Use modern CSS — rounded corners, subtle shadows, smooth hover lift. No frameworks, no external CSS. Make it look like a premium learning platform. Include all styles in a style block.

What Claude Code does: It generates a complete HTML page with CSS Grid for responsive layout — no media query hacks, just clean grid-template-columns with auto-fit. Each card gets data attributes for category and difficulty, which we'll use for filtering later.

Try it: Open index.html in your browser. You should see 9 cards in a 3-column grid. Resize your browser — they should collapse to 2, then 1 column. Hover over a card — it should lift slightly.

Milestone 2: Live Search

A grid without search is just a prettier wall. Let's make it interactive.

Prompt:

Add a search bar above the card grid with a magnifying glass icon (use an SVG). As the user types, filter the cards in real-time — match against both the title and description. If nothing matches, show a centered "No results found" message with a subtle icon. The search should be case-insensitive and feel instant.

What Claude Code does: It adds an input listener that runs on every keystroke, comparing the search text against each card's title and description. Cards that don't match get hidden with display: none. This is client-side filtering — no server, no API, instant response.

Try it: Type "stock" in the search bar. Only cards with "stock" in the title or description should remain. Clear the search — all cards come back. Type something random — you should see the "No results" message.

Milestone 3: Category Filter Pills

Search helps people who know what they want. Category filters help everyone else — just click and browse.

Prompt:

Add category filter pills above the card grid (below the search bar): All, Productivity, Marketing, Finance, General. Each pill shows the count of cards in that category. Clicking a pill filters the grid. The active pill gets a solid primary color (indigo), inactive pills are light gray. Make sure search and category filters work together — if I search "stock" and click "Finance", it shows only Finance cards matching "stock."

What Claude Code does: It builds a composable filter system — the category filter doesn't replace the search filter, it stacks on top of it. Both conditions must pass for a card to show. The pill counts come from the data, so they're always accurate.

Try it: Click "Marketing" — only marketing cards show. Click "All" — everything resets. Now type "build" in search, then click "Productivity" — you should see only productivity cards with "build" in the title or description. Both filters working together.

Milestone 4: Difficulty Filters

Your visitors can search and browse by topic. But someone looking for a quick beginner win still has to scan every card. Let's fix that.

Prompt:

Add a second row of difficulty filter pills below the category pills: All, Beginner, Intermediate, Advanced. Style them differently from category pills — smaller, with a border outline instead of a filled background. The active one should be dark (inverted). All three filters (search + category + difficulty) must combine — if I pick "Marketing" and "Beginner", I only see beginner marketing cards.

What Claude Code does: It extends the filter function to check three conditions: search match AND category match AND difficulty match. This is composable filters in action — each layer is independent, but they all combine through a single filtering function. The same pattern powers every e-commerce site you've ever used.

Try it: Click "Finance", then "Intermediate" — only intermediate finance cards show. Add a search term on top. All three layers should narrow the results. Clear everything and all 9 cards return.

Milestone 5: Sorting + Polish

The filters narrow things down. Now let's give visitors control over the order — and make the whole page feel like a shipped product.

Prompt:

Add a sort dropdown next to the search bar with a sliders icon. Three options: "Recommended" (default order), "Easiest first" (Beginner → Advanced), "Shortest first" (by read time). When the user changes sort, the cards reorder with smooth transitions. Also add: a gradient header section with a title and subtitle, smooth transitions when cards show/hide, and a centered "Can't find what you need?" link at the bottom.

What Claude Code does: Sorting works by reordering DOM elements based on data attributes — it reads each card's difficulty or read time, sorts the array, and re-appends them to the grid in the new order. The CSS transitions handle the smooth visual effect.

Try it: Change the sort to "Easiest first" — beginner cards move to the top. Switch to "Shortest first" — cards reorder by read time. Combine everything: pick a category, a difficulty, sort by easiest, and search — it all works together. Resize to mobile — the entire page should be responsive.

What You Built

You started with an empty file and ended up with a fully interactive content library — search, two layers of filter pills, sorting, responsive layout, and a polished design. No React, no Next.js, no npm install. One HTML file you can open anywhere.

Remember that wall of content? You just turned it into something people can actually navigate. The patterns here — CSS Grid for responsive layout, client-side filtering for instant search, and composable filters that stack independently — are the same ones behind every content library you've ever used.

Take It Further

• Add your own data — replace the sample cards with your actual content. Each card is a block of HTML with data attributes.
• Add a table of contents — for longer content pages, extract headings and build a clickable navigation sidebar.
• Connect to a database — swap the static cards for data fetched from Supabase or Airtable and you've got a dynamic content platform.