Design comparison
Solution retrospective
I'm particularly proud of implementing a customized list marker using the ::before pseudo-element for the first time, which added a unique touch to the design. Additionally, I ensured the use of semantic tags wherever possible to enhance accessibility. For future projects, I'd like to explore CSS Grid for more complex layouts, sass for styling and further improve accessibility with ARIA roles and better keyboard navigation.
What challenges did you encounter, and how did you overcome them?One significant challenge was working without a Figma design, which made achieving pixel-perfect implementation difficult. To overcome this, I used Diffchecker to compare screenshots and identify discrepancies. However, it was so challenging to repeatedly adjust styles and compare images. Despite this, I managed to achieve a cohesive design by carefully iterating on the visual details.
What specific areas of your project would you like help with?I would greatly appreciate feedback on the semantic structure of my HTML, code structure and any suggestions for improving accessibility. Additionally, advice on optimizing the performance of custom fonts would be very helpful.
Community feedback
- @gmagnenatPosted 3 months ago
Hi, congrats on completing the challenge!
Here is a list of pointers you can check out to improve the accessibility of your solution:
- Use
<strong>in your lists instead of the styledspan. It has semantic meaning and is useful here to act like a label for the line. "total (the label): about 10 minutes (the description)." - It's correct to use a table, but tables have other elements such as
tr,td,th, and more. Check them out to make it more semantically correct. - Use a modern CSS reset in all of your projects. Check out Josh Comeau and Andy Bell.
- Don't set a fixed width in pixels. Use a max-width and use
rem. Currently, your solution doesn't scale if the user zooms because of this fixed width in pixels. It creates a bad user experience. - You should use relative units for everything related to fonts. Check out this great article to understand why: Why font-size must NEVER be in pixels
- Ideally, your media queries should use relative units such as
remas well, so your content can scale correctly if the user increases the system default font size.
I hope you find something useful in this list to improve the semantic structure of your solution and make it more accessible. Let me know if you need more explanation on any of the points.
Marked as helpful1@JomagenePosted 3 months ago@gmagnenat
Wow! Thank you so much for your feedback and code review! Your insights were incredibly helpful, and I genuinely appreciate the time you took to explain everything so clearly. The resources you shared were fantastic, too! I’ve tried to implement all the details you pointed out—please take a look and let me know what you think.
What a comment! In just one comment, my understanding of responsiveness has almost doubled. Thanks again—I’m so grateful!
1 - Use
- @geomydasPosted 3 months ago
No need for the ::before, use ::marker instead. You don't have to complicate things. The only thing is with ::marker, you can only change the padding-right and color of it. Other properties wont like work in the way that you expected it to be.
1@JomagenePosted 3 months ago@geomydas Thank you so much! I tried it, and it works perfectly. I really appreciate your help. Please take a look and let me know what you think. I’ll definitely keep this in mind for my next challenges!
0
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