Skip to content
Submitted 7 months ago

Responsive recipe page with Media Queries

accessibility, bem, bootstrap, vanilla-extract, semantic-ui
Mythos•30
@IMythos
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?

Improve responsive design for desktop

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

Upload the project to github pages, I had problems with ssh but thanks to contributions from a community I was able to solve it

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

In the specific use of flexbox

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Christian Lhie Besmanos•150
    @assiduousdev

    Awesome work here! 😁

    Just a few tweaks:

    1. I noticed that you used an h3 (Preparation time) before an h2 (Ingredients). You should always follow the correct order from h1-h6. I could assume why would you think an h3 is appropriate for Preparation time since it is smaller. However, always keep in mind that HTML and CSS are two different things. Use HTML for structure and CSS for visuals, always follow the correct HTML structure and then style your elements however you want using CSS.
    2. You could use a caption instead of a paragraph in your Nutrition section. It is basically a title for the table and provides it an accessible description. You can use MDN as your reference.

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