Skip to content
Submitted 12 months ago

3-column preview card component

Mulugeta•360
@MrDevM
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

give an feedback thanks

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,160
    @MelvinAguilarPosted 12 months ago

    Hello there 👋. Good job on completing the challenge !

    I have other suggestions about your code that might interest you.

    • Use only one <h1> tag per page; use <h2> for section headings. Learn more here 📘.

    • You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. Read more here 📘.

    • For decorative car icons, leave the alt attribute empty to hide from screen-readers. More details here 📘.

    • Use relative units (em or rem) instead of pixels for font-size. Learn why here 📘.

    • Omit max-width: 100% in the body tag, as it's unnecessary for block elements.

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

    Happy coding!

    Marked as helpful
    1
  • Øystein Håberg•10,730
    @Islandstone89Posted 12 months ago

    Hello, here is some feedback.

    HTML:

    • The icons are decorative, so the alt text needs to be emtpy: alt="".

    • You should never have more than one <h1> - change the headings into <h2>.

    • "Learn More" would navigate to another page, so it must be a link, not a button.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML then using @import.

    • It's good practice to include a CSS Reset at the top.

    • Font-size must never be in px. Use rem instead. Also, line-height should be unitless, or in percentages.

    • Remove max-width: 100% on body.

    • Delete the fixed width on .main - generally, you rarely want to set fixed dimensions.

    • Ideally, you want to do mobile styling as the default, then use media queries for larger screens. The media query should also be in rem instead of px.

    Marked as helpful
    0
  • Daniel 🛸•44,310
    @danielmrz-devPosted 12 months ago

    Hello, @domxss!

    You project looks great!

    If you change your background-color to #F2F2F2, it will look even closer to the original design!

    Other than that, great job!

    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