Skip to content
Submitted over 2 years ago

3 Columns preview card using CSS Grid.

bem
Riikis•20
@Rikvdev
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I tried to make this with dinamic grid using auto-fit , without media queries, but I had some errors with padding and container width, so I did it with media queries.

Did I do it right?

Are there any errors?

Where could I improve to make it better?

I would like to read your opinion :)!

Code

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hi Riikis,

    Congratulation on finishing this challenge. Great job on this one! I have few suggestions regarding your solution:

    HTML

    • Page should contain <h1> . The <h1> is most commonly used to mark up a web page title. This challenge is supposed to be one component of a web page. To tackle the accessibility issue in the report , you may use an <h1> visually hidden with class=”sr-only”. You can find it here.
    • You can upload the two sets of Google fonts in one CSS link , after selecting both font family, you can copy the CSS link that contains both font families.
    • In this challenge, the images are much likely to be decorative. For any decorative images, each img tag should have aria-hidden="true" attribute to make all web assistive technologies such as screen reader ignore those images .
    • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute, you can expose your site to performance and security issues.
    • Consider using rem for font size , it' not recommended to use px for font size as absolute units don’t scale for example 15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.

    You absolutely did great job readable and reusable code.

    Hopefully this feedback helps.

  • Nurul Arifin•310
    @nurularifin83

    The solution for the warning Page should contain a level-one heading <html lang="en">:

    • Put this code <h1 class="visually-hidden">3-column preview card component examples</h1> below <main>, if you use bootstrap just put this class class="visually-hidden" for hidden text. If you did not use bootstrap then just make like this <h1 style="display: none">3-column preview card component examples</h1>. Hope it can help you.

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