Skip to content
Submitted almost 4 years ago

3-column preview card using Flexbox

Han•320
@hcxweb
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, this is my third challenge and took longer than I expected to complete. Had some challenges mostly about responsiveness, but I'm satisfied with the result. Any feedback or suggestions will be greatly appreciated. Thank you for viewing.

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    Hey, awesome work on this one. Desktop layout looks great, the site is responsive and the mobile state looks great as well.

    Some suggestions would be:

    • h1 should only be limited to 1 usage per page of the site. Change those h1 into h2.
    • Since you are removing the h1, you will need to create another but it will be only a screen-reader only h1. Meaning it will be hidden visually but present for screen-reader users. On this, the h1 would have like sr-only class and the text-content should describe what is the main-content is all about. The h1 could be placed as the first text inside the main. Have a look at Grace's solution on this one. Inspect the layout and see the usage of h1 as well the stylings applied.
    • learn more is more suitable to be a link, since on a real site, this would act as a page link where the users can "learn more" about a specific car.

    Aside from those, great job again on this one and congrats for your 3rd challenge in here^^

    Marked as helpful

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