Recipe Page HTML and CSS

Community feedback

• 

  John•410

  @MiyaoCat

  Posted over 1 year ago

  Looks great! There's a couple small details that a slightly different. In the solution page, all of the <li>'s are aligned with the sub-headers (instructions, ingredients, etc). Your <li>s are indented. It takes some playing around with to get that to align. I just added a 1em margin-left to mine to get it to align.

  In the nutrition area I recommend using grid or table/tr/td elements. I went with table (which I think may be outdated, but I felt this was a good use case for it). That way the content will align better. Also, I noticed you used a div to create the lines. With the table you can use a border-top instead.

  Here's my solution for reference if you want to inspect.

  Otherwise, your page looks nearly identical!

  10

  Marked as helpful