Skip to content
Submitted 12 months ago

3 column preview card using basic HTML and CSS

kwokkw•80
@kwokkw
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 comments/advice will be greatly appreciated!

Community feedback

  • Øystein Håberg•10,390
    @Islandstone89Posted 12 months ago

    Hello. I'm not quite sure if you should use <article> or just <div> for the cards..otherwise, the HTML looks good, well done.

    Here are some tips on the CSS:

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

    • It's good practice to include an even bigger CSS Reset at the top.

    • I see you commented out

    display: grid;
place-content: center;

    but that's a perfectly fine way to center the component horizontally and vertically. You could also use Flexbox:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

    A few more lines, but works the same. In both cases, you can use gap to set the spacing between the <main> and the <footer>. I would recommend doing one of these 2 methods. Then, you can remove margin: 5rem auto on main.

    • Media query should be in rem, and it should target a smaller screen size, maybe around 50rem or so.

    • Remove flex-direction: row - this is the default.

    • max-width should not be in %. About 80rem should be fine.

    Marked as helpful
    0
    kwokkw•80
    @kwokkwPosted 12 months ago

    Hello @Islandstone89,

    Thanks for your advice again. After reading your comment and making the changes. I have couple questions if you do not mind.

    1. Why it's better to link fonts in the <head> of the HTML then using @import. Does website load faster in this way?
    2. I do not understand why media query should be in rem. Also, what do you mean by targeting a smaller screen size and 50rem?

    Thank you very much for you advise.

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

    Yes, I think so. I'm far from an expert on these things, but I know Grace Snow keeps reminding people about it, and she has a lot of knowledge. So, I'm kinda passing it on from her.

    Regarding media queries, again, I'm passing on information I have picked up from people with a lot of knowledge. However, I did read an explanation just a few days ago, in this excellent article by Josh Comeau.

    So, your media query is targeting 1440px, equal to 90 rem. You probably chose that breakpoint because it's the size referred to in the style guide. But this is a common misunderstanding. It only means that it should look like that on 1440px, not that the breakpoint should be 1440px. In this case, the cards start to get too "stretchy" around 800px(50rem), so that's when the layout should change. Makes sense? :)

    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