Build a multi-page recipe website with search and filtering

#webdev #javascript #frontend #challenge

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