Design comparison
Solution retrospective
This is the initial page to kickstart the project. I chose to build it using React, TypeScript, and TailwindCSS to establish a solid foundation for future expansion. My plan is to develop a simple Recipe API (or potentially integrate an existing one) and gradually add more advanced components as the project evolves.
What challenges did you encounter, and how did you overcome them?I struggled with applying Tailwind classes to lists. I’m sure there’s a way to style unordered and ordered lists to match the design in Figma.
Community feedback
- @herojk64Posted about 1 month ago
You got figma access, here are the things you need to consider about.
- You can look at height of the card component and if you want exact matching you can just hard code it same with the width.
- figma comes with line spaces like line heights and such so you can just match it with the figma.
- you can look how much spacing is used between the images and headers and such you can set margin to perfectly act that way.
- your bullets are inside which is not matching with the outside. if your using tailwind there is class for this like list-outside or list-inside. and then you can do marker:text-color for the bullet coloring
- your table value or table data colors hasn't been set.
Marked as helpful1@besopmacPosted about 1 month ago@herojk64 You're right. All of these points need to be implemented. As for the bullet points, I got a bit stuck on them, and since this is a beginner challenge, I decided to skip them for now and come back to them later—thanks for the feedback
1
Please log in to post a comment
Log in with GitHub
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