Recipe page challenge -HTML / CSS

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Rather than changing your whole approach, add more generic tags and more and more styles you should use the previous approach of ul,ol and table.

  Marked as helpful

  0
• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @VirginiaPat, 👋

  Your layout is visually appealing and responsive across screen sizes—great work! 😊 I have a few suggestions to improve the semantic structure of your code, making it more maintainable and accessible. Let's dive in! 🛠️

  ---

  1. Simplify bullet points with <ul> and <li>

  In your current implementation, you're using custom grid styles and icons for bullet points. While this works visually, it's unnecessarily complex. Using <ul> and <li> would achieve the same result with less code and better semantics.

  Example (Before):

  <div class="grid-4cols grid-5rows">
    <div class="dot-style col2-row1">
      <ion-icon name="ellipse"></ion-icon>
    </div>
    <p class="text16px-Stone600 col4-row1">
      <span>Total:</span> Approximately 10 minutes
    </p>
  </div>
  

  Refactor (After):

  <ul>
    <li><span>Total:</span> Approximately 10 minutes</li>
    <li><span>Preparation:</span> 5 minutes</li>
    <li><span>Cooking:</span> 5 minutes</li>
  </ul>
  

  💡 Why? Imagine explaining to a friend: instead of manually drawing bullet points, you use a pre-made list notebook. It’s quicker and less prone to mistakes!

  ---

  2. Ingredients section

  Similarly, your ingredients list can be simplified with a <ul> tag. It’s perfect for unordered lists like this.

  Example (Before):

  <div class="flex-container">
    <h2 class="ingredients-title">Ingredients</h2>
    <div class="grid-4cols grid-9rows">
      <div class="dot-style col2-row1">
        <ion-icon name="ellipse"></ion-icon>
      </div>
      <p class="text16px-Stone600 col4-row1">2-3 large eggs</p>
    </div>
  </div>
  

  Refactor (After):

  <h2>Ingredients</h2>
  <ul>
    <li>2-3 large eggs</li>
    <li>Salt, to taste</li>
    <li>Pepper, to taste</li>
    <li>1 tablespoon of butter or oil</li>
    <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
  </ul>
  

  ---

  3. Ordered lists for step-by-step instructions

  For sequential steps, an <ol> tag is ideal as it provides built-in numbering.

  Example (Before):

  <div class="grid-4cols grid-11rows">
    <p class="instrct-number col2-row1">1.</p>
    <p class="text16px-Stone600 col4-row1">
      <span>Beat the eggs:</span> In a bowl, beat the eggs...
    </p>
  </div>
  

  Refactor (After):

  <ol>
    <li><strong>Beat the eggs:</strong> In a bowl, beat the eggs...</li>
    <li><strong>Heat the pan:</strong> Place a non-stick frying pan over medium heat...</li>
    <li><strong>Cook the omelette:</strong> Once the butter is melted...</li>
    <li><strong>Add fillings (optional):</strong> When the eggs begin to set...</li>
    <li><strong>Fold and serve:</strong> As the omelette continues to cook...</li>
    <li><strong>Enjoy:</strong> Serve hot...</li>
  </ol>
  

  💡 Why? Think of reading instructions in a recipe book—it’s easier to follow when steps are clearly numbered.

  ---

  4. Use <table> for tabular data

  For the nutrition table, <table> tags make your data more semantic and easier for screen readers to interpret.

  Example (Before):

  <div class="nutrition-table">
    <p class="text16px-Stone600 col2-row1">Calories</p>
    <p class="nutri-col2 col4-row1">277kcal</p>
  </div>
  

  Refactor (After):

  <table>
    <tr>
      <th>Nutrient</th>
      <th>Amount</th>
    </tr>
    <tr>
      <td>Calories</td>
      <td>277kcal</td>
    </tr>
    <tr>
      <td>Carbs</td>
      <td>0g</td>
    </tr>
    <tr>
      <td>Protein</td>
      <td>20g</td>
    </tr>
    <tr>
      <td>Fat</td>
      <td>22g</td>
    </tr>
  </table>
  

  💡 Why? Tables are like spreadsheets. They group and align related data logically, making it easier for both humans and computers to parse.

  Final Thoughts

  By adopting semantic HTML, you’ll:

  • Simplify your code, making it easier to maintain 🧹.
  • Improve accessibility for screen readers 🎙️.
  • Reduce unnecessary CSS and markup 📉.

  Keep up the great work, and feel free to reach out if you have any questions! 🚀

  Best regards,
  Aakash

  Marked as helpful

  0

  ---

  

  P

  VirginiaPatrika•130

  @VirginiaPatPosted 2 months ago

  @skyv26 Thank you very much for your feedback! That was exactly the code I wrote before changing it. I should have tried more to find ways to style the lists and make them look exactly like the ones in the figma file.

  Best regards, Virginia

  1

  

  P

  Kamran Kiani•2,740

  @kaamiikPosted about 2 months ago

  @VirginiaPat There is no need to change the semantic tags to make it like the design. There are ways you can do it with the standard html tags. You can use ::marker pseudo class and span in each li to make your list items like the design. This is a challenge to practice writing html with more semantic tags. I suggest restructure your html.

  Marked as helpful

  0

  

  P

  VirginiaPatrika•130

  @VirginiaPatPosted about 2 months ago

  @kaamiik I changed my code. Thanks for your feedback,I really enjoyed refactoring my code! If you have time feel free to take a look.

  Best regards, Virginia

  0

  

  P

  Kamran Kiani•2,740

  @kaamiikPosted about 2 months ago

  @VirginiaPat Sure, my pleasure

  • Your HTML is much better now. In the structure after your article, you have four sections. You can use the section tag here because it makes sense. Follow the same approach you used for the article tag. Add an id attribute to your h2 and use aria-labelledby in each section. You can simply replace each div with a section tag.

  ---

  • Another issue with your HTML is that instead of using <div class="grey-line"></div> for a line separator, you can use <hr />, which has a role of separator and is more semantic.

  ---

  • In your CSS, I think you forgot to add a max-width, and the whole article becomes larger with the growth of the screen size. Add a max-width of 46rem to your main, and for your media query, I suggest changing the min-width to 46em.

  By the way, you did very well. Keep on the great work.

  Marked as helpful

  0

  

  P

  VirginiaPatrika•130

  @VirginiaPatPosted about 2 months ago

  @kaamiik thank you very much!

  0