Skip to content
Submitted 26 days ago

Recipe Page Responsive

Farid_Danilo•140
@FaridDanilo
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'm proud to have made good progress on this new project and to be able to do it as best I could, just like in the preview. I really enjoyed making this design and I'm very proud of having done it.

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

One of the biggest challenges this time was being able to properly adapt the "@media" to fit all existing devices so that it would look good depending on the device where the design is being viewed.

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

This time I don't have any specific area at the moment that requires guidance or help, but I know that I still need to improve and I know that I could further improve the design and the versatility and reduction of code for a more optimal page for everyone. Anything you have to tell me to change or correct, I know that it will be of great help to continue growing and advancing even more.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Andrey•4,320
    @dar-ju

    Hi, Farid_Danilo!

    Great job!

    This task can improve the semantics. The way you did it is not a mistake, but it can help search engines and readers understand the page better. Especially search engines, which will index the page better.

    For example, there are headings and subheadings, the name of recipe is the title, use the <H1> tag or higher, instructions and ingredients are the next heading tag in the hierarchy. By the way, the <section> tag requires an h1-h6 heading inside, then you will not have an error using this tag.

    Try to use the div tag for blocks and containers, for text there are p, h, span, strong tags and so on.

    You need to fill in the alt for the image, in the alt describe what you see in the image. Leave an empty alt for decorative and background images that search engines are not interested in.

    Otherwise, everything is fine, good luck with your development!

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