Recipe-page

Community feedback

• 

  P

  Matt Pahuta•580

  @MattPahutaPosted 2 months ago

  Hey there. Nicely done completing this challenges. Other than a few finer details, your solution is a close match to the design comp. Good use of semantic elements and responsive units for your font sizes as well. Here are a few things I've flagged for you:

  1. On mobile, the spacing between the image and the heading is a bit off. I think you can remove the margin top from the h1 to remedy that.
  2. You're missing a border radius on the accent box (prep time).
  3. Also, there should be a similar border radius applied to the card and the image on larger screens.
  4. The height and width you have set on the image have no effect and are not necessary.
  5. Also for the image, the alt attribute should be more descriptive. Image descriptions should not include words like 'image' or 'picture' because they are already an image role. There are good posts in the discord server in resources channel on this topic.
  6. The bolded words in the lists are an appropriate use case for the strong tag. The spans you're using have no semantic value. Switch them out for strong tags and save yourself some code in the styles.
  7. You're using a table element for the tabular data so that's great, but your missing header cells. The 'Calories', 'Carbs', 'Protein', and 'Fat' cells should be th elements with the scope attribute set to "row"

  Again, great job finishing the challenge! Keep going. Cheers!

  Marked as helpful

  1

  ---

  

  P

  Nikita Vologdin•470

  @NikitaVologdinPosted 2 months ago

  Thank you, @MattPahuta, for taking the time to review my code and provide feedback. I really appreciate you teaching me some new concepts.

  0