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 using TailwindCSS ( first time! )

Abdallah Hamada• 280

@AbdullahHamadax

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 achieved this result using Tailwind for the first time, I also got the exact length x width for the container.

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

I spent 4 hours trying to deploy my project to Vercel only to find out I had --watch in the package.json

I also spent roughly 45 mins reading through TailwindCSS docs and at the same time working on the project, it was challenging at first but I got everything in a short time!

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

I somehow forgot how to center the container and have margin at the top like in the design, I tried everything.

The margins and paddings, like for example, I don't know how to put space between the markers and text in TailwindCSS. You guys are going to notice the vast difference between my solution and the desired design.

In addition, making the Nutrition table, I used gaps to align the items but I feel like that was a horrible practice.

Community feedback

P. Ricardo• 2,370

@pRicard0

Posted

You did it great! I'll try to answer your questions.

  • About your first question... this is because your <body> tag has the same height as all of your content. You can fix this with min-h-screen or something like that.
  • About your second question... You can use padding-left, like... <li class="pl-10">
  • About your third question... You have many ways to do it instead of gaps... One example is to specify a width for your div and you should use "justify-between".
1

Abdallah Hamada• 280

@AbdullahHamadax

Posted

@pRicard0 Thank you so much, you're awesome!

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