four card project

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted about 2 months ago

  Hello zee!

  Congratulations on completing the challenge. You did awesome!

  Your HTML code structure for the "Four Card Feature Section" looks good, but there are a few enhancements you can make to improve its readability, accessibility, and maintainability:

  Recommendations: Improve Semantics:

  Use semantic tags like <section> and <article> for each card to clarify the structure of your content. Avoid using <main> multiple times within one document, as it’s meant for the main content of the page, not individual components. Replace <main class="description"> and <main class="img"> with <div> or <article> for each card section. Example:

  <article class="team"> <div class="description"> <h3>Team Builder</h3> <p>Scans our talent work to create the optimal team for your project</p> </div> <div class="img"> <img src="icon-team-builder.svg" alt="Icon for Team Builder"> </div> </article> Accessibility Enhancements:

  Ensure descriptive alt text for the images. Instead of "team png" or "karma png," use a more descriptive text like "Icon for Team Builder" or "Icon for Karma." Heading Structure:

  Maintain a proper heading hierarchy. Your headings <h1>, <h2>, and <h3> should reflect the importance of each section. It looks like you’re on the right track with that, but make sure to keep this consistent as your page grows. CSS Class Names:

  CSS class names should be consistent and use a clear naming convention. For example, instead of mixing team, Supervisor, Karma, and calculator, consider using a more uniform naming style, such as card-team, card-supervisor, card-karma, and card-calculator. Add Wrapper for the Main Section:

  Consider wrapping the four cards inside a <div> or <section> with a class to help with layout styling. Break Long Text into Multiple Lines:

  To improve code readability, break the long paragraph into multiple lines without using the <br> tag.

  These updates will make your code more readable, accessible, and well-structured for both users and developers. Happy coding!

  Marked as helpful

  1

  ---

  

  zee•320

  @zeenox-stackPosted about 2 months ago

  @Aggressive-Mohammed hey thanks for going this messy code and providing valuable insights, will surely update the code later

  0

  

  Ibrahim Mohammed•640

  @MohammedOnGitPosted about 2 months ago

  "messy code?" hahahaha!!!. It's just part of the learning process.@zeenox-stack

  1
• 

  MikDra1•6,920

  @MikDra1Posted about 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 😁😊😉

  0