Skip to content
Submitted 5 days ago

Solution for Recipe Page

Marzia Jalili•230
@MarziaJalili
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 used to set up the font-size for each element individually😁😁, but for this one I have realized to do it generally. Also, I have become much faster. I finished this challenge within 2 hours😎.

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

I have put a fixed width for the main element that caused my element to overflow🥲. Then, I realized that I should have put a max-width and a fixed width of 100%😁.

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

Let me know whether I have used semantic for the layout or not😅. I will literally appreciate that. Other than that, all other feebacks are welcome 🙌.

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted 5 days ago

    Hey Marzia, nice job. It looks good for semantics and responsiveness.

    You could just use table for the nutrition part.

    Also i see you used some pseudo classes, so i am guessing you missed the last list item doesn't have a border bottom.

    .nutrition {
    & li:not(:last-child) {
        border-bottom: 2px solid var(--Stone-100);
    }
}
    Marked as helpful
    1
    Marzia Jalili•230
    @MarziaJaliliPosted 5 days ago

    Thanks a million @KapteynUniverse 🙌, Could you please also send me the code for the table because I also tried to use the table for it but then I could achieve the exact styles🥲. I will really appreciate that😁😁.

    0
    KapteynUniverse•2,170
    @KapteynUniversePosted 5 days ago

    @MarziaJalili

    I linked the webpage for tables on my first feedback, if you missed https://www.w3schools.com/html/html_tables.asp

    Basically it is like 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>

    table {
  width: 100%;
  border-collapse: collapse;
}

tr:not(:last-child) {
  border-bottom: 1px solid var(--Stone-150);
}

    I guess you can go deep and add table headers with a sr-only class for screen readers aswell.

    Marked as helpful
    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