Recipe Page

Hi,

I've reviewed your decision to use flexbox for building a responsive table instead of a table layout. I appreciate your choice in favor of flexbox.

I would like to suggest prioritizing semantic markup, similar to what you've done with the unordered and ordered lists.

Even when using flexbox, you can still apply styling directly to the table tag, treating it like any other element to maintain semantic integrity.

This approach ensures accessibility and clarity in your code structure.

Here is a solution:

<table>
  <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>

table tr {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 2rem;
}

table tr td {
  flex: 0 1 50%;
}

table tr td:nth-child(2) {
  font-weight: 700;
  color: var(--clr-primary-brandy-red);
}

table tr:not(:first-child) {
  border-top: 1px solid var(--clr-neutral-white-coffee);
}

Hope this can help!

Keep up the good work!

Hi Gideon, deciding to give the Preparation time almost the same color of the body background color make it look that there is a hole in the menu (unless intended to be so) :)