Skip to content
Submitted about 2 months ago

Responsive Recipe page main using vite+React

Li, Jung-Gang•120
@jungang0414
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

What are you most proud of, and what would you do differently next time?

Completing the project using vite+React!!

What challenges did you encounter, and how did you overcome them?
  • Since I haven't unlocked Pro, I can't use Figma. Therefore, there might be some slight deviations in the implementation of the design.
  • I'm using Mark Man to measure the spacing in the image

Community feedback

  • Ken•160
    @ubcyukinyPosted about 2 months ago

    Hello!

    In recipe.css, you have multiple @media screen and (max-width: 768px) blocks , I suggest grouping them together into a block for easier maintenance.

    The background color, paddings and gaps looks a bit different than the design, but that's understandable because of not having the Figma design file. Other than that I think it looks very close to the original design.

    You use semantic HTML tags and the component is responsive on laptop and on mobile.

    Good job on finishing the project!

    1

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