Recipe page using TailwindCSS ( first time! )
Design comparison
Solution retrospective
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
- @pRicard0Posted 6 months ago
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 withmin-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@AbdullahHamadaxPosted 6 months ago@pRicard0 Thank you so much, you're awesome!
0 - About your first question... this is because your
Please log in to post a comment
Log in with GitHubJoin 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