Skip to content
Submitted 5 months ago

Página de receita responsiva

Mayra Matos•20
@mayramatos
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?

I'm proud because it's my first project that I finished without feeling uncapable. I started studying HTML and CSS in August last year for a month and spent around 7 months without studying or practicing. I returned in August and for the first time I managed to finish a project without getting discouraged despite the difficulties encountered, because now I know that I have the knowledge and it's not wrong to ask or research in moments of doubt.

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

Questions related to CSS such as list markers left me with a lot of doubts, but I looked for answers on reference sites.

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

Specially with CSS, i think that can exist a better to get to the same result.

Community feedback

  • Grace•31,090
    @grace-snowPosted 5 months ago

    Hi, this needs much of the same feedback as I've already left on your social links solution so make sure you apply the relevant parts here. Plus there are some very important extras needed in this one!

    1. All content in this design must go inside the main landmark. You can have sections within that if you wish but there is definitely no content in this that belongs in a header and everything must be inside main.
    2. This image is important content and must have a proper alt description.
    3. The nutritional table is tabular data so must use a table element. The header cells need to be marked up correctly as header cells, and include the scope attribute.
    4. The component needs a single max width in rem. There shouldn't be different max widths once all.os properly inside the one container. (This container could be the main landmark but it's more usual to use a div inside main for this kind of component as on a real site it is unlikely that every page would have this exact styling on the main landmark.)
    5. Styles should be mobile-first and media queries must be defined in rem or em not px. There are accessibility and layout problems when media queries are done in px.
    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