Submitted 6 months ago

Recipe Page with HTML CSS

Matthew•200

@MattJM1007

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I got some of the design exactly where it needed to be using pixel perfect.

What challenges did you encounter, and how did you overcome them?

I struggled with formatting the lists and the table. I got the lists to be mostly good, but I struggled to get the table correct. It doesn't look bad but not what is in the design.

What specific areas of your project would you like help with?

How can I format tables and lists better? Any resources or tips to write it efficiently?

How can I make this responsive for mobile? Just use media queries and resize everything?

Community feedback

Account deleted

It looks great, congratulations!

In your table, you used <p> to wrap the table's description, but I think the <caption> tag maybe would be a better way to do that? (it improves the table accessibility), it's usually placed immediately below the <table> tag

The table <caption> element by MDN

<section class="nutrition">
      <h2 class="title">Nutrition</h2>
      <table>
        <caption>
          The table below shows nutritional values per serving without the additional fillings.
        </caption>
        <tbody>

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord