Skip to content
Submitted 11 months ago

3 column

david william•120
@ksrogue
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

Community feedback

  • Øystein Håberg•10,550
    @Islandstone89Posted 11 months ago

    Hello, your solution looks good, and especially the HTML is really good. Here are a few suggestions, hope they are clear and helpful!

    HTML:

    • "Learn More" would navigate to another page, hence it is not a button but a link.

    If included:

    • .attribution should be a <footer>.

    • Footer text needs to be wrapped in a <p>.

    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.

    • You do not need the margin: 0 auto on the body - it is the <main you want to center, and it is centered by using Flexbox on the body, like you have done.

    • Remove ALL fixed widths and heights, as well as percentages. The content should determine the component's size, and the component should adapt to different screens. Setting fixed dimensions is rarely a good idea.

    NB: Setting width in px can be OK on things like icons, so you don't need to remove that one.

    NB 2: It might be an idea to set a max-width in rem, to prevent the component from getting too wide at larger screens.

    • Media queries should not be in px, but in rem.
    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