Recipe Page

Community feedback

• 

  Nitiema Allassane•140

  @NitiemaDevPosted 4 days ago

  I find your solution very similar to the proposed design, and it's really beautiful 😊. You use CSS variables for colors, which is awesome. Great job!

  But if I may give some feedback on your code 🙂...

  Your HTML code is well-structured and clear. It's simple to understand with the comments, which is cool.

  But look:

  <!-- Preparation Time -->
  <div class="preparation-time">Preparation Time</div>
  

  Here, you write "Preparation Time" inside a generic tag. It works, sure, but it would be better to put it in a heading tag like this:

  <!-- Preparation Time -->
  <h3 class="preparation-time">Preparation Time</h3>
  

  This way, it's clear that it's a heading, specifically for the preparation card.

  Another remark:

  Ingredients title

  <!-- Ingredients Title -->
  <span class="ingredients-title">Ingredients</span>
  

  Instructions title

  <span class="instructions-title">Instructions</span>
  

  Nutrition title

  <!-- Nutrition Title -->
  <span class="nutrition-title">Nutrition</span>
  

  These are all titles, so they should be in heading tags. Also, their class names should be more consistent since they all share the same style.

  For example:

  Ingredients title

  <!-- Ingredients Title -->
  <h2 class="subtitle">Ingredients</h2>
  

  The same goes for the others.

  Regarding the CSS, I think you should add a bit of padding to the "preparation-card" class:

  .card .preparation-card {
      background-color: var(--rose-50) !important;
      width: 100%;
      border-radius: 12px;
      padding: 20px;
  }
  

  You can choose the appropriate padding value.

  Otherwise, amazing work. I love it! 😁😁

  Marked as helpful

  0
• 

  free-care•40

  @free-carePosted 5 days ago

  This wonderful!

  0