Submitted 9 months ago

Recipe page with resoponsive TailwindCSS

Ashley•80

@AshlavaDev

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 am proud that I managed to get this page very close to the design, although I am a little unsure just how exact it is. I would probably change my coding workflow a little bit next time, writing all the HTML instead of some and styling from the top down.

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

The biggest challenge I faced was styling the list items. My solution was to break down each li tag and understand what CSS affected which part, and what CSS would not work. From there I could do things like change the colour of the whole item then use spans to target specific parts that needed to go back or be different. It was clumsy, but it seems to have worked.

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

Any advice for more efficient ways of doing certain things (ie. list styling) would be nice but not necessary.

Community feedback

Rahul Kumar•570

@rahulkumar215Posted 9 months ago

Hello @AshlavaDev👋

Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

Use of HTML Tables

In your solution, you have used ul and li to make the Nutrition section, However the best practice to do so is by the use of HTML Tables so,

instead of this

        <div class="grid grid-cols-2 gap-4 px-8">
          <ul class="space-y-6 leading-normal">
            <li>Calories</li>
            <li>Carbs</li>
            <li>Protein</li>
            <li>Fat</li>
          </ul>
          <ul class="space-y-6 font-bold leading-normal text-nutmeg">
            <li>277kcal</li>
            <li>0g</li>
            <li>20g</li>
            <li>22g</li>
          </ul>
        </div>

use this

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

I hope you find this helpful 😄 Above all, the solution you submitted is great !

If you need any feedback or suggestions, I am happy to help

Have Fun Coding!

Ahmed•140
@Xandros9Posted 9 months ago
you design is very good and is perfect 👌
1

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