Skip to content
Submitted 3 months ago

Solution using CSS and media queries

VeyronShark•130
@VeyronShark
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am proud of being able to reacreate it quite accurately. It gives me confidence to make whatever i can imagine

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

For the mobile view, the image needed to ignore the margins of the recipe element. To achieve thatI had to remove the img from the header and position it before the header to style it separately and force it to ignore margins

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

i would like to know any tips to make my css code less redundant

Code

Please log in to post a comment

Log in

Community feedback

  • RickyPWebDev•200
    @RickyPWebDev

    What’s Good:

    Uses semantic HTML tags appropriately (<article>, <header>, <main>, <section>)

    Clean and readable CSS — grouped logically, no clutter

    Mobile responsiveness handled with media queries — nice touch

    Font usage through @font-face is correctly implemented

    Color use is consistent and aligns with modern design trends

    Thought put into spacing, typography, and readability — well balanced

    You're showing a solid grasp of:

    Semantic HTML

    Responsive design

    Custom fonts

    Modular CSS

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