Design comparison
Solution retrospective
i am desling with responsive layout i design first for mobile after that i use media queries for desktop
What challenges did you encounter, and how did you overcome them?i have some challenges when i design for desktop with image header
What specific areas of your project would you like help with?pls can someone review my code
Community feedback
- @haquanqPosted 4 months ago
Hi @7A9Oo,
It's review time!!
- When using
section, article
, you need to choose one not both (what type of content inside it?). Also, everysection, article
need to be provided a heading as it's child. You are using to many wrapping mixed withdiv, article, section
(use it when you need it). - Avoid unnecessary
div
wrapping (div
has no semantic meaning, choose it for styling only). For example, no need to wrapimg
withdiv
, leave theimg
alone. - It is pretty clear that every bold text is a title/heading and you need to wrap it with
section or article
(this is the right time to use them). - Always keep your HTML simple and clean (don't
div
wrapping randomly) and use semantic HTML. - Never use fixed
width, height
on element (unless it really need it), this make your element less responsive, work aroundmin/max-height, min/max-width
instead.
Check out my solution for more references
Have a nice day!!!!
Marked as helpful2@TheAashayPosted 4 months agoThis isn't my solution but your comment surely helped me. Thanks @haquanq
1 - When using
- @TheAashayPosted 4 months ago
You can put embed code in HTML file rather than CSS file to make fonts load faster and you can use rem instead of px for better accessibility and responsive design. Also you can revise the @media query to increase the min-width for desktop to more than 750px.
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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