Submitted 4 months ago

Responsive Recipe Page - React and Tailwind

shalri• 530

@shalri

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

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 am quite proud of using an external file to store all the contents for the page and just exporting them to the Recipe component. Designing unordered and ordered list can be a bit tricky, luckily Tailwind has utility classes that made it easy.

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

I just eyeballed the layout since I didn't have the .fig file. I focused on learning React and Tailwind and just did my best to make the design as close to the mockups.

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

I am all good for now. Enjoying these challenges. Frontend Mentor is so much fun!

Community feedback

takinabradley• 100

@takinabradley

Posted 4 months ago

Great job, especially considering you didn't have a figma file! Much closer than I've normally gotten on these so far.

Everything looks great for the most part. I like how you made the component reusable by making it accept a prop, though perhaps it would be better if the parent component fed the actual data into it.

I'm not sure how I feel about the empty Header component. Perhaps that could have been part of the App HTML/styling?

Marked as helpful

shalri• 530

@shalri

Posted 4 months ago

@takinabradley Thank you so much for the feedback. I am still feeling my way around React and I appreciate your suggestions.

Regarding the empty Header component, I just forgot to delete it from my template file.

Cheers!

Please log in to post a comment

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