Design comparison
Solution retrospective
Proud to complete the project and that i was able to do it easier than i thought. It really was a fun and satisfying project, and I loved the use of tables for the nutrition chart!
What challenges did you encounter, and how did you overcome them?Remember to use tables, they really are a headache
Community feedback
- @ratsagiPosted 5 months ago
Hello, Adrian, By looking at your solution I noticed some issues:
- Use semantic html instead of div and span because they have a special meaning in html structure or you need to assign it manually for each div element the role for example:
<div role="banner"> </banner> <div role="main"> </div> <div role="footer"> </div>
I noticed that you used article landmark to wrap as a container. However, it is not appropriate one because it is a main content of the page . In every website one main landmark must exist. I also noticed you used span to make some words to look bold but instead I recommend to use strong element to make words bold it is semantically correct way. at the end you used footer but forgot to change closing tag to it it is still div element. It is important for screen readers.
- In terms of css, I have noticed you tried to use relative unit like rem it is a good practice for accesibility but you need to be consistent. Avoid using absolute units for example pixels. In some places you used them change pixels to rems. Also don't forget to remove the last border-bottom of table header and body.
Overall Good job
Marked as helpful1@radriann21Posted 5 months ago@ratsagi thanks for the feedback! i'm going to implement the changes and correct the css units
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