four-card-feature

Community feedback

• 

  P

  Emanuele Fabrizio•220

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

  Marked as helpful

  1
• 

  P

  Franci Melink•400

  @francimelinkPosted 2 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

  Marked as helpful

  0

  ---

  

  Eric Aguayo•945

  @EAguayodevPosted 2 months ago

  @francimelink I just realized I had the repo private, which is why you couldn't view the code.Thanks for the feedback on the H1 violation; I just fixed it.

  1