Skip to content
Submitted almost 2 years ago

Responsive Cars Preview Card Using (CSS Grid + Flexbox)

Muhammad Adam•210
@Muhammad-adam778
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

  • I added a little animation hope you like it.
  • Feel free to give feedback.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hi @Muhammad-adam778 👋, good job completing this challenge! 🎉

    I like this solution for the challenge. I have some suggestions you might consider to improve your code:

    • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. You can read more about this problem here.
    • The Learn More elements should be anchor tags and not buttons because they redirect to another website. Use buttons to perform actions such as displaying a modal, performing calculations. Use anchor tags to redirect users to a part of the page or to an external site.

    Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

    Good job, and happy coding! 😁

    Marked as helpful
    2
    Muhammad Adam•210
    @Muhammad-adam778Posted almost 2 years ago

    @MelvinAguilar

    Thank you very much for these wonderful notes, it really helped me,

    But I have a question about this problem:

    • WARNING
    • Page should contain a level-one heading
    • <html lang="en
    1
    Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    @Muhammad-adam778 Hello 👋, I see you have already solved the problem. I believe what you have done is correct, add a hidden h1 to avoid the warning, although the following class is a standard way to hide it:

    <h1 class="sr-only">Cars Preview</h1>

.sr-only{
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

    More information here.

    Very good work!

    0

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