Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive recipe page using only HTML and CSS

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Now that I have finished this challenge, I have a few questions about my work.

Is my page actually responsive to mobile phones by using @media? Did I use media right?

My html writing is correct? In terms of semantic and hierarchy

What can I change? How can I improve?

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • The indentation of the code is inconsistent, making it difficult to read and understand. It's recommended to use a code formatter tool, such as Prettier, in your code editor to automatically format your code and maintain consistent indentation.
    • For instance, you've placed your <footer> tag outside the <body> tag, which is incorrect.
  • The media query is fine, but you can enhance the width by directly using max-width with a fixed value instead of using width: 50%;.

  • Consider replacing "Your Name Here" in the footer with your actual name/nickname.

  • Instead of <div class="main">, you could use a landmark element <main>.

  • It might be beneficial to separate styles into another file to organize the code more efficiently.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

2

Please log in to post a comment

Log in with GitHub
Discord logo

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