Skip to content
OverviewSolutions
6
Comments
4
Riccardo Bellini
@riccardobellini

All comments

  • Tsukimi•780
    @hikawiSubmitted 3 months ago
    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.

    Recipe page

    1
    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
    0
  • Riccardo Bellini•100
    @riccardobelliniPosted 3 months ago

    Really nice solution, looking exactly like the design!

    0
  • Riccardo Bellini•100
    @riccardobelliniPosted 3 months ago

    Really good solution and final look, also made me want to experiment with Tailwind! I can see only one minor issue with respect to the task given: the article title is missing the hover and focus states.

    0
  • Lucas Gabriel•80
    @LucasGabriel2806Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I managed to make the project identical to the design, using beginner properties, and Flexbox to align the main div vertically and horizontally. I did this project once, it wasn't identical so I'm redoing it, I'm happy because I managed to fix the content well, improve the design in code form.

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

    At first it was difficult to center the main div vertically, to center it horizontally I used margin: auto, but after studying more and getting to know Flexbox, I learned how to center it vertically and horizontally in a very simple way.

    Flexbox used to align the main div vertically and horizontally.

    1
    Riccardo Bellini•100
    @riccardobelliniPosted 3 months ago

    I would avoid using margins for the card component and center it both horizontally and vertically using flexbox:

    body {
  display: flex;
  align-items: center;
  justify-content: center;
}
    Marked as helpful
    0