Skip to content
Submitted over 1 year ago

3 Column Preview Component using Vanilla HTML and CSS

tizerk•240
@tizerk
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

Any feedback/thoughts are greatly appreciated!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, @tizerk! 👋

    The following suggestions can help you to improve your solution.

    • All the car icons are decorative images. You should leave the alternative text empty.
    • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
    • Change all the <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.
    • Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.
    • I recommend setting min-height: 100vh instead of height: 150% on the <body> element.
    • You don't need to use CSS Grid to create a one-column layout with three rows on the .main-container. The default layout is already looking like that.
    • Having a three-columns layout on 1440px width is too late. You should make it a three-columns layout as soon as there is enough space.
    • Set a max-width to the .main-container to prevent the cards from keep growing.

    I hope my suggestions help you. Have fun coding! 😄

    Marked as helpful
    1
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    HTML 🏷️:

    • Your solution generates accessibility error reports due to non-semantic markup
    • So fix it by replacing the <div class="attribution"> with semantic element <footer> to improve accessibility and organization of your page.
    • Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> hereafter to define these sections

    I hope you find it helpful ! 😄 Above all, the solution you submitted is great!

    Happy coding!

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