four-card-feature

Community feedback

• 

  Emanuele Fabrizio•220

  @efabrizio75

  Posted 10 months ago

  Congratulations on completing this challenge.

  You used semantic HTML. It is accessible even though I would not skip heading levels and use h2 for the cards' titles. I liked the structure of your code and the usage of float: right to position to the icons, cool idea.

  The only issue I found is with the screen widths between 700px and 1200px: the translationY value causes two of the feature cards to be staggered incorrectly.

  10

  Marked as helpful
• 

  P

  Franci Melink•400

  @francimelink

  Posted 10 months ago

  Hi Eric,

  I review your solution. Sady I couldnt get to the code.

  Semantic HTML: The solution does utilize semantic HTML, but some areas could benefit from additional tags like <article> or <section> for better structure.

  Accessibility: While accessible with appropriate text contrast and alt attributes, it violates the rule of having a single <h1> on the page. A solution would be splitting the content within <h1> into <span> elements for emphasis without using multiple <h1> tags.

  Responsiveness: The layout adapts well across various screen sizes, maintaining a clean structure.

  Code Quality: The code appears well-structured, though could be enhanced with reusable CSS classes and clearer comments.

  Design Accuracy: The implementation is fairly close to the original design with minor visual differences.

  Great work overall! Best of luck with future challenges.

  Franci

  01

  Marked as helpful