Frontend Mentor - Recipe page solution

This is a solution to the Recipe page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the recipe page layout optimized for their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/recipe-page-solution-Adis_h_8tO
• Live Site URL: https://recipe-page-solution-101.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties (CSS Variables)
• Flexbox
• Mobile-first workflow
• Google Fonts (Young Serif & Outfit)
• Responsive design principles

What I learned

During this project, I reinforced my knowledge of several key concepts:

CSS Custom Properties: Using CSS variables for consistent color management throughout the project made the design system more maintainable.

:root {
  --white: hsl(0, 0%, 100%);
  --stone-100: hsl(30, 54%, 90%);
  --rose-800: hsl(332, 51%, 32%);
}

Semantic HTML Structure: Implementing proper semantic elements like <main>, <section>, and appropriate heading hierarchy for better accessibility.

<main class="recipe-card">
  <section class="ingredients">
    <h2>Ingredients</h2>
    <!-- content -->
  </section>
</main>

Custom List Styling: Creating custom bullet points and numbered lists using CSS pseudo-elements:

.ingredients li::before {
  content: "•";
  color: var(--brown-800);
  position: absolute;
  left: 0;
}

Responsive Design: Implementing mobile-first approach with media queries to ensure the design works well across different screen sizes.

Continued development

Areas I want to continue focusing on in future projects:

• CSS Grid: While this project used Flexbox effectively, I want to explore more complex layouts using CSS Grid
• Advanced CSS animations: Adding subtle micro-interactions to enhance user experience
• Accessibility improvements: Implementing better screen reader support and keyboard navigation
• Performance optimization: Optimizing images and CSS for better loading times

Useful resources

• MDN Web Docs - CSS Custom Properties - This helped me understand how to effectively use CSS variables
• CSS-Tricks - Complete Guide to Flexbox - An excellent reference for Flexbox properties and usage
• Google Fonts - Used for typography choices (Young Serif and Outfit fonts)

Author

• Website - Seyed Ahmad Gholami
• Frontend Mentor - @seyedahmaddv
• LinkedIn - Seyed Ahmad Gholami

---

Challenge completed as part of Frontend Mentor's design-to-code challenges.#