Responsive recipe page using only HTML and CSS
Design comparison
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
- @MelvinAguilarPosted 10 months ago
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.
- For instance, you've placed your
-
The media query is fine, but you can enhance the width by directly using
max-widthwith a fixed value instead of usingwidth: 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 - 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.
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