Skip to content
Submitted 5 days ago

Responsive Recipe Card

Abigail Figaro•80
@abigailjulie
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?

Figuring out wrapper div

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

I didn't remember how to create the break line or adjust it's appearance, googled it

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

Nothing, i'm ready to move on from cards

Community feedback

  • Dylan Heslop•1,570
    @dylan-dot-cPosted 5 days ago

    Looking good, other than the spacing/sizing there are a few things you can improve semantically.

    You could make use of the main element for the first div you have in the webpage and for each sections of the cards, you don't actually separate them semantically so you can have a section for each h2/h3 you have.

    On mobile the markers for the ul should be centered vertical to the li text. Small feature so don't worry.

    Finally it would be better to have the header wrap the img, h1 and the text which would be a p tag.

    Anyways good job and looking for to see more solutions from you. You can also take a look at mine and see what could have been done differently.

    0
  • Y39WebDeveloper•120
    @Y39WebDeveloperPosted 5 days ago

    a

    0
    Abigail Figaro•80
    @abigailjuliePosted 5 days ago

    @Y39WebDeveloper Come again?

    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