
Design comparison
Solution retrospective
I am happy with the way the responsiveness turned out. The images are wrapped in a picture tag and swapped out by the browser when the screen resizes rather than simply hiding one of the images. This prevents mobile users from using unnecessary data.
What challenges did you encounter, and how did you overcome them?I had difficulty trying to figure out how to swap out the images in an accessibility friendly manner. I needed to swap one image with the other without causing screen readers to relay the wrong information.
Many problems can occur if not careful including:
- Visible hidden images still showing up to screen readers.
- Multiple alt tags leading to image redundancy.
- Swapping images without causing unnecessary interruption.
- Using the proper semantic tag layout.
There are multiple areas I would like help with:
- BEM (block-element-modifier)
- Accessibility
- CSS organization
Community feedback
- @viethoang2307Posted about 2 months ago
Your CSS is well-structured with sections for reset, variables, fonts, mobile, desktop, and footer styles. This improves readability. Using CSS variables is a great practice for maintaining consistency across your design. It appears you're following a mobile-first approach, which is a good practice for responsive design.
0
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