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
- Screenshot
- Links
My Process
Author
Acknowledgments

Overview

📸 Screenshot

🔗 Links

Live Site URL: Recipe Page 🍔🍕

My Process

🚀 Built With

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
Young Serif - Font for headings
Outfit - Font for body
Responsive design principles

🌟 What I Learned

Throughout this project, I strengthened my understanding of semantic HTML and responsive design. Here are some code snippets that I am particularly proud of:

<div class="container">
  <header>
    <img src="./assets/images/image-omelette.jpeg" alt="Recipe Header Image" class="header-image">
    <h1>Simple Omelette Recipe</h1>
  </header>
</div>

.container {
  background-color: hsl(0, 0%, 100%);
  margin: 0 auto;
  max-width: 1440px;
  padding: 20px;
}

body {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  color: hsl(30, 10%, 34%);
  background-color: hsl(30, 54%, 90%);
  margin: 0;
  padding: 0;
}

🔄 Continued Development

In future projects, I aim to further refine my skills in:

Advanced CSS techniques: such as animations and transitions
JavaScript integration: to add interactivity to static pages
Accessibility (WCAG standards): to ensure my sites are usable for everyone

📚 Useful Resources

MDN Web Docs - A great reference for HTML, CSS, and JavaScript.
CSS Tricks - This site helped me understand Flexbox and Grid layouts more deeply.
Frontend Mentor - Where the challenge was sourced, providing a platform to practice with real-world projects.

👨‍💻 Author

GitHub - Ayyubiy90
Frontend Mentor - @Ayyubiy90
Twitter - @yourusername

🙏 Acknowledgments

Thanks to Frontend Mentor for providing this challenge. I also want to express my gratitude to the community for their continuous support and feedback. This experience was a fantastic opportunity to learn and grow as a developer.

Ayyubiy90 / recipe-page