Four card feature section | HTML & CSS

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:

1. 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:

<img src="./images/icon-supervisor.svg" alt="Supervisor Icon" /> or <img src="./images/icon-supervisor.svg" alt="" role="presentation" />

1. 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.

2. 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:

<section class="card supervisor"> <h3>Supervisor</h3> <p>Monitors activity to identify project roadblocks</p> <img src="./images/icon-supervisor.svg" alt="Supervisor Icon" /> </section> 4. CSS Reset: Make sure that your cssreset.css file contains appropriate reset rules to standardize the appearance across browsers. You might also want to consider using a modern reset like Normalize.css.

1. 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">

1. HTML Validation: Always run your HTML through a validator (like the W3C Validator) to check for any structural issues or missing elements.
2. 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.
3. 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.