Skip to content
Submitted about 2 years ago

3 column preview card component

yuki6464•90
@yuki6464
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

Hello everyone. Any feedbacks are so welcome, so I can't wait to hear your thoughts on my work and how can I improve it. Thanks and have a great day:)

Community feedback

  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey there!👋 Here are some suggestions to help improve your code:

    • The car images/icons in this component are purely decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides them from assistive technology.

    • The incorrect font-family was used. You want to look at you "style-guide" to download the correct one.

    • The headings in your component are being used incorrectly. Since the <h1> Heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an <h2> Heading, since it is reusable and it will give each heading the same level of importance.

    • Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

    https://web.dev/learn/design/

    If you have any questions or need further clarification, let me know.

    Happy Coding! 👻🎃

    Marked as helpful
    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @yuki6464, Congratulations on completing this challenge!

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

    1.To make your CSS code easier to work you can create a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

    2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    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