Skip to content
Submitted about 1 month ago

Responsive recipe page using media queries

Abdul-Saidat•50
@Abdul-Saidat
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I tried this same challenge when I started coding last year and it was nothing close to the design, working on it again made me realize how much I have improved in less than a year

What challenges did you encounter, and how did you overcome them?

None

What specific areas of your project would you like help with?

I need reviews to know where I still need to improve

Code

Please log in to post a comment

Log in

Community feedback

  • Mustafa Sen•3,180
    @mustafasen97

    The design is great. It was a good idea to create a responsive design using the media tag.

    There are a few points you can improve in the code structure.

    Your HTML is not too bad in terms of semantics, but instead of using too many divs, you can prefer semantic tags like section and article. You can research semantic HTML and try to practice on this subject.

    Semantic HTML Example

    
<body>
  <header>...</header>
  <main>
    <section>
      <article>...</article>
      <article>...</article>
    </section>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>

    Apart from this, it would be better for you to set the class names in HTML more meaningfully and properly. In this way, you can prepare the design in a more practical way. I recommend you to research BEM to improve yourself on this subject.

    BEM (Block, Element, Modifier) ​​is a naming methodology that makes it easier to write consistent, readable, and maintainable code in large-scale CSS projects.

    BEM Example

    <article class="product-card">

  <img class="product-card__image" src="product.jpg" alt="product">
  <h2 class="product-card__title">Product Title</h2>
  <p class="product-card__description">Description</p>
  <button class="product-card__button product-card__button--buy">Buy Now</button>

</article>

    Another thing I want to talk about is variables. Before moving on to coding in CSS, you can define some variables, assign colors, font sizes, font weights and many more things that you will use frequently in the design to these variables. In this way, you will reduce code repetition. Keep improving yourself. Good luck.

    Variables

    variable definition

:root {
  --bg-color: hsl(217, 54%, 11%);
  --card-color: hsl(216, 50%, 16%);
  --text-secondary: hsl(215, 51%, 70%);
  --text-primary: hsl(0, 0%, 100%);
  --accent: hsl(178, 100%, 50%);
}

variable usage

body {
  background-color: var(--bg-color);
}
.value {
  color: var(--accent);
}
  • Jorge Rosales•50
    @Junkdog-04

    Hey! Nice job on the project! 👏

    One suggestion: consider using the custom fonts provided in the project files to better match the design. It’s a great opportunity to practice loading local fonts with @font-face.

    Also, try using more semantic HTML tags like <main>, <section>, <article>, and proper headings (<h1>, <h2>, etc.). This not only improves accessibility but also helps with SEO and keeps your structure clean.

    Keep it up — you’re doing great! ✌️😊

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord