Submitted 8 months ago

Recipe page with React (+ Vite) & Simple CSS ✨

Czipa Szilárd• 20

@Cleshy

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

Hey ✌

This challenge was pretty nice. At first I thought maybe something is missing from the mobile design, but then I thought about it and did it as we see it. 😀

The display: none; and the display: block; rules makes sure to show the Ingredients part of the recipe when the brower width is greater than 700px.

Everything else is simple. When I uploaded the files I did a Lighthouse test, and I think I'll resize the omelette picture and do some Squosh too in the future. A WebP format would be great I think.

Here is a link to the Squoosh website. Pretty awesome thing. - Squoosh

I hope you like my solution.

Leave a comment if you think I should change something. ✌

Edit: I've changed the image from JPEG to WebP and my h1 font-weight was 700, so I had to change that too. ✅

Community feedback

ngdangtu• 120

@ngdangtu-vn

Posted 8 months ago

I don't understand, why do you need to hide Ingredients section? It apears in the mobile design, isn't it?

Czipa Szilárd• 20

@Cleshy

Posted 8 months ago

@ngdangtu-vn It's kinda funny. The Figma design which I've downloaded doesn't have the Ingredients section on mobile design. 😀

ngdangtu• 120

@ngdangtu-vn

Posted 8 months ago

@Cleshy It's more funny to me because you are not pro member, how do you have Figma design?

Czipa Szilárd• 20

@Cleshy

Posted 8 months ago

@ngdangtu-vn I was a Pro Member before, and I haven't used the designs. That's why I got 5 Figma Design now. ✌

ngdangtu• 120

@ngdangtu-vn

Posted 8 months ago

@Cleshy Whatever, those figma files on the internet are usually modified or removed certained parts due to the uploaders wanna troll or do not know how to use figma.

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