
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Bensolve
Hi! Your recipe page HTML is mostly well-structured and clear. A few suggestions to improve accessibility and semantics:
- Change the
<h3>
for "Preparation time" to<h2>
to maintain proper heading order and improve screen reader experience. - Enhance the image alt text to be more descriptive.
- Remove duplicate Google Fonts preconnect links.
- Add a
<caption>
to your nutrition table for better accessibility. - Consider using semantic
<section>
elements instead of<hr>
for dividing content.
Your CSS is clean and mostly well-structured with solid use of global resets, responsive media queries, and consistent spacing. A few suggestions:
- Remove redundant or ineffective declarations like
align-items
andjustify-content
on.container
which is not a flex container. - Stick to one unit system for margins/paddings (prefer
rem
for scalability). - Clean up repeated margin declarations (e.g.,
.images
has twomargin-top
values). - In your media queries, avoid repeating unchanged properties to keep the CSS concise.
- Consider using relative units (
em
orrem
) for font sizes on mobile to improve accessibility. - Verify color contrast for text to ensure accessibility standards.
- Class names could be more descriptive or follow a naming convention for larger scalability.
Overall, good responsive layout and clean table styling!
- Change the
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