Thumbnail for Recipe Page design
Free

1 - Beginner

Recipe Page

Recipe page with cooking instructions and review section

šŸ‘‹ Sign up to submit your solution!
Download DesignSubmit Solution
šŸ“ Overview
Create a stunning and functional recipe page perfect for sharing detailed recipes and engaging with users. This beginner-level challenge focuses on building a single-page layout with: ā€¢ A captivating hero section featuring a recipe image and introduction. ā€¢ Detailed recipe information, including ingredients, preparation steps, and cook time. ā€¢ Interactive sections and forms for user reviews. You'll practice essential front-end skills like structuring reusable layouts, using semantic HTML, adding interactivity using forms, and styling elements using the latest CSS techniques. šŸ³šŸ‘Øā€šŸ³
šŸŽ“ Learnings
  • šŸ“„ Structuring a multi-section page with clean, semantic HTML
  • šŸ“ Using Flexbox for creating responsive and adaptive layouts
  • šŸ“ Styling and validating interactive forms for better usability
  • šŸ“Œ Building a sticky navigation bar with CSS
  • šŸŒ Designing pages with accessibility and cross-browser compatibility in mind
āœ… Project Checklist

    Navbar includes a logo on the left and navigation links on the right.

    Hero image is displayed at the top with a linear gradient.

    Key recipe details such as title, cooking time, servings, and difficulty are shown on top of the hero image.

    Introduction card is rendered below the hero image.

    Ingredients are listed in a bulleted format.

    Cooking steps are presented in a clear, numbered list.

    Print Recipe and Share Recipe buttons are rendered.

    Related recipes section contains title, recipe cards, and an explore more recipes button.

    Each recipe card includes a thumbnail, title, description, CTA button, time, servings, and dificulty.

    Reviews section displays 2-3 user reviews.

    Each review includes a picture, name, date, review, stars, upvotes, and share button

    Review form includes fields for email, star rating, name, review, and a submit button.

    Sticky navbar ensures links remain accessible while scrolling.

šŸŒŸ Bonus Features

    Add dark mode which uses systems settings as default.

    Ensure the page is fully responsive across all screen sizes.

    Connect the review section to a backend or database.

    Add PDF generation for the Print Recipe button

    Add social plugins (Facebook, X, etc.) for recipe/review sharing

    Create an authentication system to allow saving recipes/leaving reviews easily

šŸ› ļø Instructions
  1. Click on the 'Download Design' button to get the .fig file.
  2. Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
  3. Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
  4. Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
  5. Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
  6. Submit your solution link here and try to get a perfect score!
šŸ”Ž Check out the FAQ page for any questions regarding challenges and solutions.