Submitted about 2 months ago

Recipe page solution

Kevin Rasata Andrianome• 60

@kevinrasata

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 challenges did you encounter, and how did you overcome them?

This was actually the first challenge that I took on Frontend Mentor.

I can tell you struggled big time with the layouts. Hahahah!

Like it took me 3 days to figure it out.

But now I'm more confident with it and the other challenges felt easy afterwards.

I guess good practice makes perfect?

Community feedback

Thomas James• 160

@turtlethom

Posted about 2 months ago

Hey Kevin, solid layout!

I was checking out your design of the recipe page in Google Chrome. One thing I saw was around 700px view width, some of the text gets cut off on the left before transitioning to the mobile design.

I saw it in Chrome, but I'm not sure if it's affecting other browsers.
It's probably just a small adjustment with your media queries, but it's hardly noticeable.

Other than that, great job! It looks like a 1:1 ratio to the solution!

PS: Huge fan of your use of CSS variables throughout your application as well as your naming conventions :)

Marked as helpful

Kevin Rasata Andrianome• 60

@kevinrasata

Posted about 2 months ago

Thanks so much for your feedback man! I really appreciate it :D

Adhi• 240

@Adhi-S12

Posted about 2 months ago

Looks great! 👍🏻

Marked as helpful

Kevin Rasata Andrianome• 60

@kevinrasata

Posted about 2 months ago

Thanks @Adhi-S12 I really appreciate it! :D

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