Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

4-card feature section, HTML & CSS

@jdpaige

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Pretty straightforward project. Grid seems pretty much made for stuff like this.

Community feedback

Ivan 2,630

@isprutfromua

Posted

Hi there. You did a good job 👍

keep improving your programming skills

your solution looks great, however, if you want to improve it, you can follow these steps:

🟢 please use one H1 per page, or change the card div tag to section. As I think better markup will look like these:

<section class="card team-builder">
  <h2 class="card-header">Team Builder</h2>
  <p class="card-content">Scans our talent network to create the optimal team for your project</p>
  <footer class="card-footer">
    <img src="images/icon-team-builder.svg" alt="" class="footer-img">
  </footer>
</section>

🟢 Adding an image or a graphic to your content without using proper or empty alternative attributes (alt tags), can be extremely frustrating for people with visual impairments navigating your site through assistive technologies. Or just hide it with aria-hidden if it's using for decorative purposes

I hope my feedback will be helpful

Good luck and fun coding 🤝⌨️

Marked as helpful

0

@jdpaige

Posted

@isprutfromua Thanks for the feedback!

0
Ivan 2,630

@isprutfromua

Posted

@jdpaige Hi there

I am glad that my help was useful to you

Cheers, peace and happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord