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

I just did mobile first with vanilla css. A little flexbox.

JWordā€¢ 120

@jwren4170

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This one was pretty easy.

Community feedback

@VCarames

Posted

Hey there! šŸ‘‹ Here are some suggestions to help improve your code:

  • A crucial is element missing from your code, which should always be included, whether it's a component or a full website, is the main element. Its presence is essential for maintaining good semantics and accessibility, as it assists in identifying the primary content of your site.
  • In this specific challenge, the icons serve a purely decorative purpose. So, it is best to leave their alt tag blank (alt="") to signal to screen readers that these elements should be disregarded.
  • The h1 heading should be used only once per page. In your code, it's employed multiple times. To adhere to best practices, it's if you use the h2 heading instead for subsequent headings.
  • For the "learn more" buttons, users are likely to be directed to another section of your website when they interact with them, it would be more appropriate to use the anchor (<a>) element to achieve this functionality.
  • Since you are utilizing the <div class="attribution"> provided by FEM, it's advisable to wrap it in a footer element to enhance the semantics of your HTML structure.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! šŸ‘¾

1

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