Recipe Page // HTML & CSS

Community feedback

• 

  Saima Ahmed Sial•1,020

  @saimasial-bitPosted 14 days ago

  "Great job on the solution! The layout looks clean and responsive. However, I noticed that you haven't used semantic HTML elements like <article> and <section>. Adding them would improve accessibility and readability. Also, on smaller screens, the text alignment looks slightly off. Adjusting the padding/margins might help. Keep up the great work!"

  Marked as helpful

  0

  ---

  

  P

  Kristian Haug•140

  @klhaugPosted 13 days ago

  @saimasial-bit Thank you so much! I'll look into it!

  0
• 

  P

  Kuvashnee Naidoo•450

  @KuvashneeNaidooPosted 14 days ago

  Hi @klhaug

  Your solution is an excellent depiction of the orginal recipe page! Nice work!⭐👏⭐

  I just picked up one semantic issue when I tested your code using the The W3C Markup Validation Service:

  Here is the error:

  <div class="table-row">
    <p>Fat</p>
    <p>22g</p>
  </div class="table-row"> <!-- Invalid closing tag -->
  

  Basically in your closing </div> tag, you are using an attribute class="table-row", which is not allowed. You only need to use it in the opening <div> tag.

  Therefore you can simply remove the class:

  <div class="table-row">
    <p>Fat</p>
    <p>22g</p>
  </div>
  

  This was just one HTML syntax issue, otherwise, you really did nail this challenge! 🚀🚀🚀

  Happy coding :)

  Marked as helpful

  0

  ---

  

  P

  Kristian Haug•140

  @klhaugPosted 13 days ago

  @KuvashneeNaidoo Hey!

  Thank you so much for such an in-depth helpful comment. I really appreciate it. People here are really kind and helpful. Wow!

  0
• 

  Emiliano-DM•70

  @Emiliano-DMPosted 14 days ago

  Very good Kristian! Nothing to say!

  1
• 

  Saima Ahmed Sial•1,020

  @saimasial-bitPosted 14 days ago

  "Great job on the solution! The layout looks clean and responsive. However, I noticed that you haven't used semantic HTML elements like <article> and <section>. Adding them would improve accessibility and readability. Also, on smaller screens, the text alignment looks slightly off. Adjusting the padding/margins might help. Keep up the great work!"

  0