Responsive Recipe Page (Flexbox + Media Queries)

Community feedback

• 

  Riska997•110

  @Riska997Posted 6 months ago

  Great job on completing the project!

  • Your code is easy to understand because you've used clear class names and added comments where needed. - You made sure your webpage looks good on different devices by using media queries.
  • Also, your typography system gives clear rules for fonts, making everything look nice together.

  Some improvements

  • Consider grouping related CSS rules together, such as all styles for the .section-omelette-recipe, .section-preparation-time, etc.
  • This can enhance readability and maintainability, especially as your stylesheets grow.

  /* Group related styles together */
  .section-omelette-recipe,
  .section-preparation-time,
  .section-ingredients,
  .section-instructions,
  .section-nutrition {
      /* Your styles */
  }
  

  • Instead of .omellete-recipe-header, you can simply use h1.omellete-recipe-header.
  • This helps in reducing specificity and makes your CSS more efficient.

  /* Simplify selectors */
  .omellete-recipe-header {
      /* Your styles */
  }
  

  • In some cases, you're using pixel values for font sizes (font-size: 2.5rem) while in others, you're using rem.

  /* Normalize font sizes */
  h1, h2, h3 {
      font-size: 2.5rem;
  }
  

  • Ensure that all images have appropriate alt attributes for accessibility purposes.

  /* Ensure accessibility */
  .img-omelette {
      /* Your styles */
  }
  

  Overall, you've done a commendable job

  Keep up the great work!

  Marked as helpful

  1

  ---

  

  P

  Mussie Habtemichael•400

  @mussiehPosted 6 months ago

  @Riska997 thanks for the detailed breakdown. I will make sure to improve on what I can.

  1