Four card feature section | HTML & CSS

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  Nice one 😀

  If you are curious how you can do this straight lines on the top of each card here is my tip:

  Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  1

  ---

  

  Rodri•160

  @rcsilva211Posted 2 months ago

  @MikDra1 Thanks mate! I did try but I still prefered to use the border rather than the ::before and ::after pseudos. Will keep the information you gave for future projects though! :D

  0
• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted 2 months ago

  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" />

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

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

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

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

  0