Build a multi-page recipe website with search and filtering

We're excited to introduce our new Recipe Finder Website challenge. This project is perfect for developers looking to build a complete multi-page website with real-world functionality like search, filtering, and responsive layouts.

What you'll build

Homepage and about page:

Recipes index and detail pages:

In this challenge, you'll create a recipe finder website that:

• Features four distinct pages: home, about, recipes index, and detailed recipe views
• Allows users to search for recipes by name or ingredient
• Lets users filter recipes by maximum prep or cook time
• Displays recipes in a clean, organized layout
• Shows detailed recipe information including ingredients, instructions, and cooking times
• Provides an optimal viewing experience across all device sizes
• Includes hover and focus states for all interactive elements

How to start

To get started, visit the Recipe Finder challenge page. There, you'll find:

• The Figma design file to guide your project
• Layouts for mobile, tablet, and desktop screens
• A professional design system with details on colors, fonts, and spacings
• Images optimized for the web
• A README file to help you set up
• A HTML file with pre-written content to get you started

This is a premium challenge, so you'll need a Pro subscription to start the project. Our premium challenges are of the highest quality and are designed to give you hands-on experience building industry-standard projects. They make excellent portfolio pieces!

Challenge yourself further

If you want to push yourself and customize the project, try adding features like:

• Implementing responsive images using the provided small and large image variations
• Creating smooth page transitions and micro-interactions without heavy frameworks
• Updating the data and adding new filters for dietary restrictions or difficulty levels
• Letting users adjust serving sizes and automatically recalculating ingredient quantities
• Allowing visitors to save favorite recipes that persist between sessions

Join the community

Need help or want to share your work? Join our Discord community, where many developers discuss projects, share resources, and support each other.

We look forward to seeing what you create. Happy coding!