New challenge: Build a multi-page tech conference site

We've launched a new premium challenge: a multi-page tech conference site. You'll build the home page, full schedule, and speaker directory for a fictional dev conference called DevHorizon 2026 — including a filterable schedule that lets visitors save talks.

It's an intermediate-level project that pulls together a wide range of frontend patterns in a single, realistic build.

What you'll build

The site has three pages:

• Home — a hero section, featured keynote, conference tracks, featured speakers, and schedule highlights
• Schedule — the full talk listings, filterable by day and track, with each talk expandable for details
• Speakers — a grid of all 20 speakers, each opening into a modal with their bio and talk

Visitors can save talks to a personal "My Schedule" with the bookmark button on each talk, then filter the schedule down to just their saved sessions.

What's in the design files

The Figma file covers desktop, tablet, and mobile across all three pages — plus hover states, the speaker modal, and the mobile navigation pattern. There's also a complete design system page with the color palette, type scale, spacing tokens, and component examples.

What you'll practice

This challenge gives you a structured space to work on:

• Working with structured, related data (speakers, talks, and tracks all reference each other)
• Filtering and combining filters (single-select day + multi-select tracks)
• Persisting state across sessions with localStorage for the saved-talks feature
• Accessible modals — focus management, keyboard handling, the <dialog> element
• Multi-page navigation and passing filter state between pages
• Responsive layout across cards, filter chips, and the schedule list

How to start

Head to the challenge page on Frontend Mentor and download the starter files. You'll get the full Figma design, the starter HTML for all three pages with the static content already in place, and a data.json file with the conference content.

A note on AI: we'd always recommend getting comfortable hand-typing your way through projects before reaching for an AI coding assistant — that's how you build real coding fluency. If you do choose to work alongside one, the starter also includes an AGENTS.md file that tunes the assistant to support you at an intermediate level rather than just handing you complete answers.

Take it further

Once you've finished the core build, you might try:

• Pulling the conference data from a headless CMS (like Sanity, Contentful, or Storyblok) instead of the local JSON file
• Letting users download their saved schedule as a .ics file for Google Calendar or iCal
• Persisting filter state in the URL so users can share a link to a filtered schedule view
• Building as a progressive web app (PWA) for mobile installation and offline schedule access
• Adding a search bar to find talks and speakers by name, title, or keyword

The CMS option is the most realistic. Conference sites, marketing sites, and events sites are a big slice of frontend work, and they almost always pull from a CMS rather than a local data file. Wiring this challenge up to a Sanity, Contentful, or Storyblok project gives you genuine practice with the kind of editorial setup you'd see on the job.

Join the community

Stuck on something, or want feedback on your build? Join our community — it's a friendly place to ask questions, share progress, and get a fresh pair of eyes on your code. Once you've finished, share your solution in the #finished-projects channel so the rest of the community can take a look.

Take your skills to the next level

This challenge is part of Frontend Mentor Pro. A Pro subscription gives you:

• Access to 50+ portfolio-ready premium challenges, including this one
• Professional Figma design files with desktop, tablet, and mobile layouts plus a full design system
• AI-powered solution code reviews to help you learn more with each submission

Upgrade to Pro and start building projects that look great on your portfolio and resume.