responsive grid media query
Solution retrospective
I would like to add more break points next time for different screen sizes since I just stuck to a smaller screen size of 375px, I would like to add tablet and laptop sized screens another time. I will come back and add those other features later as well as accesibility features.
What challenges did you encounter, and how did you overcome them?I had some sizing issues and had to go learn more in depth of the grid/row columns using the grid-template-area to further space out the boxes on the desktop version. I had some help looking up the resource online through MDN and chatGPT along the way had helped.
What specific areas of your project would you like help with?I forgot to add the shadowing effect on each boxes as you'll notice the difference from mine and the original, I will go back and do that later but other than that, I am open to any feedback.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@jeffgrahamcodes
This solution demonstrates a strong use of semantic HTML, with appropriate elements like <main> and <section> providing clear structure. The headings are well-organized, creating a logical content hierarchy that supports accessibility and readability. However, the solution could benefit from adding meaningful alt text to images to ensure screen readers can describe their purpose. For decorative images, using alt="" ensures they are ignored by assistive technologies, further enhancing accessibility. Additionally, wrapping individual card components in <article> tags could improve semantic clarity, as these sections represent standalone content.
The layout is visually appealing and closely matches the design provided. It adapts well to different screen sizes, maintaining alignment and spacing across breakpoints. The CSS is generally well-structured, but adding more comments to clarify sections and consolidating shared styles into reusable variables could improve maintainability. Overall, this is a polished and well-executed solution with minor improvements needed for accessibility and code optimization. Great work!
Marked as helpful
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