Skip to content
Submitted 10 months ago

Recipe Page CSS

Danh Pham•120
@danhpham2000
Preview site (opens in new tab)View code (opens in new tab)
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 can practice my UI skills in web development.

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

My tiny problem was the bullet points were not the same as the design objectives. However, the bullet points for number, which I managed to make it the same as the target webpage. I utilized the online resources and W3 school to styling my recipe.

Community feedback

  • Rahul Kumar•570
    @rahulkumar215Posted 10 months ago

    Hello @danhpham2000👋

    Congratulations on successfully completing the challenge! 🎉

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

    • In the nutrition section of your solution, You have used div and grid-layouts to represent a Table like layout, However there is a better way of doing that by using HTML Tables

    so instead of this

          <div class="value">
        <p>Calories</p>
        <p>277kcal</p>
      </div>
      <div class="value">
        <p>Carbs</p>
        <p>0g</p>
      </div>
      <div class="value">
        <p>Protein</p>
        <p>20g</p>
      </div>
      <div class="value">
        <p>Fat</p>
        <p>22g</p>
      </div>

    you should 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!

    Marked as helpful
    0
    Danh Pham•120
    @danhpham2000Posted 10 months ago

    @rahulkumar215 Cool, thanks for your suggestion!

    0

Please log in to post a comment

Log in with GitHub

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