Skip to content
Submitted about 1 year ago

3-column preview card component with mobile first

Gabriel Marques•90
@GMarqz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is the second challenge I finished so far and I've done with mobile-first workflow once again. Should I start doing desktop-first instead from now on?

Community feedback

  • Mennatallah Hesham•1,490
    @Mennatallah-HishamPosted about 1 year ago

    Hi GMarqz,

    you did great 👍

    here are some suggestions to improve your code:

    • wrap your content in <main>,this element represents the dominant content of the <body>
    • also <article> is more suitable in this context than <section>
    • for decorative img / illustrations you can use aria-hidden="true", which will skip the image for screen reader users.
     <img src="/images/sedans-icon.svg" alt="Sedan icon" aria-hidden="true" >
    • use <a> instead of <button> , as it is suppose to navigate the user to another page/page section
    <a href="#">Learn More</a>
    • you can add meta description for better SEO, it provides a brief summary of a web page

    Everything else looks great, keep going

    Hope you find this helpful, Happy Coding

    Marked as helpful
    0
    Gabriel Marques•90
    @GMarqzPosted about 1 year ago

    Hi @Mennatallah-Hisham

    Thank you for your feedback, I'll remake this challenge cause the changes that you suggested made a lot of elements get out of their previous positions xD I truly appreciate your feedback, thank you so much!

    1

Please log in to post a comment

Log in with GitHub

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