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
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?

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

@herojk64

Posted

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 helpful

1

P

@besopmac

Posted

@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

@herojk64

Posted

@besopmac no problem.

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