Submitted 3 months ago

Responsive Recipe Page with Flexbox

vinirangel•40

@vinirangel

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'm proud of designing a working mobile and desktop version. The mobile design looks good, but the desktop version could look better.

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

I would like feedback on my html structure.

Community feedback

biwwabong•140

@biwwabongPosted 3 months ago

I could mention a few little things in the layout, but it really would be nitpicking. The only change I can see from a brief look is that I would of used a table for the Nutrition section at the bottom instead of divs

<section class="nutritional-value"> <h4>Nutrition</h4> <p> The table below shows nutritional values per serving without the additional fillings. </p>

        <table>
          <tr>
            <td data-cell="nutrients">Calories</td>
            <td data-cell="nutrient-value">277kcal</td>
          </tr>
          <tr>
            <td data-cell="nutrients">Carbs</td>
            <td data-cell="nutrient-value">0g</td>
          </tr>
          <tr>
            <td data-cell="nutrients">Protein</td>
            <td data-cell="nutrient-value">20g</td>
          </tr>
          <tr>
            <td data-cell="nutrients">Fat</td>
            <td data-cell="nutrient-value">22g</td>
          </tr>
        </table>
      </section>

all in all great job :)

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