@Aggressive-Mohammed
Posted
Hello Rodri! Your HTML code for the "Four card feature section" is well-structured and follows good practices. Below are some comments and recommendations for improvement:
- Accessibility: Image Alt Text: The alt attributes for the images are currently empty (alt=""). Even though these icons may be decorative, it's best to provide more meaningful alt text, or if they are purely decorative, use role="presentation" to explicitly state that they’re decorative. Example:
-
Heading Hierarchy: The current heading structure jumps from an <h1> to an <h2>, which is fine, but make sure the hierarchy remains logical across all content. The cards use <h3>, which is appropriate as a subsection of the main content. Consider making the section title more descriptive, like wrapping it in a <section> tag with an accessible label.
-
Semantic HTML: The structure is clear, but you could enhance semantics by using a <section> or <article> tag for the cards, which improves both SEO and accessibility. For example:
- External Links: The footer includes a link to Frontend Mentor, which opens in a new tab (target="_blank"). It’s best practice to include rel="noopener noreferrer" for security reasons, especially with external links:
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer">Frontend Mentor</a> 6. Class Naming: Your class names are clear and specific, but using a consistent naming convention such as BEM (Block Element Modifier) could make your CSS more maintainable. For example:
<div class="card card--supervisor">- HTML Validation: Always run your HTML through a validator (like the W3C Validator) to check for any structural issues or missing elements.
- Alt Text for Footer Attribution: The footer includes an attribution section where the author name "Digo" is linked, but the href is empty. You should replace it with a valid URL or remove the link if it's not needed.
- Performance Optimization: Preloading fonts or important resources might help with performance, though this depends on the size of the project. You’re already using a reset stylesheet, which is a good performance practice. I hope this will be something usefull to you.