Skip to content
Submitted 10 months ago

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

Czipa Szilárd•20
@Cleshy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

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-vnPosted 10 months ago

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

    0
    Czipa Szilárd•20
    @CleshyPosted 10 months ago

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

    0
    ngdangtu•120
    @ngdangtu-vnPosted 10 months ago

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

    0
    Czipa Szilárd•20
    @CleshyPosted 10 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. ✌

    0
    ngdangtu•120
    @ngdangtu-vnPosted 10 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.

    0

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