All comments

• 

  P

  Tsukimi• 270

  @hikawi

  Submitted 18 days 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

  20

  

  Riccardo Bellini• 90

  @riccardobellini

  Posted 18 days 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
• 

  German Pinto• 320

  @germanp007

  Submitted 7 months ago

  Hi there ☜(ﾟヮﾟ☜)

  I made this simple component with React, Tailwind, and Typescript... Please, I'd love to get feedback to improve something or get better practices. Enjoy coding!(●'◡'●)

  

  Social links profile React + TypeScript + Vite + Tailwind

  1

  50

  

  Riccardo Bellini• 90

  @riccardobellini

  Posted 21 days ago

  Really nice solution, looking exactly like the design!

  0
• 

  Diego• 70

  @diegoDevCodee

  Submitted 9 months ago

  

  Responsive card using React and Tailwindcss.

  1

  10

  

  Riccardo Bellini• 90

  @riccardobellini

  Posted 21 days 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• 70

  @LucasGabriel2806

  Submitted 24 days 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

  51

  

  Riccardo Bellini• 90

  @riccardobellini

  Posted 22 days 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