Submitted 3 months ago

Recipe page

Tsukimi•780

@hikawi

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

Riccardo Bellini•100

@riccardobelliniPosted 3 months ago

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

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