Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe page

P
Tsukimi 270

@hikawi

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm most proud of making it as dynamic as possible that as long as the recipe has items filled in, it can still display fine without hard-coding the recipe details.

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

I didn't know how to style tables properly and was having a lot of trouble getting the padding. I "overcame" them by just using flexbox because I don't know.

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

Tables styling, probably also lists because the design's ordered listing used normal numbers and i don't know how to set the css to use that instead of tabulars.

Community feedback

@riccardobellini

Posted

Great solution, almost a perfect replica of the design! I really like the "swap recipe" feature, as well. Regarding your question about table, you can achieve the desired result by using padding on the table cells, instead of the rows (on the rows padding doesn't work). Here's my solution, for example:

<table class="w-full table-fixed">
    <tbody>
    <tr class="border-b border-stone-150">
      <td class="py-3 pl-8">...</td>
      <td class="font-bold text-brown-800">...</td>
    </tr>
    <tr class="border-b border-stone-150">
      <td class="py-3 pl-8">...</td>
      <td class="font-bold text-brown-800">...</td>
    </tr>
    <tr class="border-b border-stone-150">
      <td class="py-3 pl-8">...</td>
      <td class="font-bold text-brown-800">...</td>
    </tr>
    <tr>
      <td class="py-3 pl-8">...</td>
      <td class="font-bold text-brown-800">...</td>
    </tr>
  </tbody>
</table>

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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