Four card feature section - with CSS Grid

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Hey Pre, congrats on submitting your first solution, you've done an awesome job! I hope you enjoyed the challenge. Did you learn anything new while going through it?

  Your styles look great. It's nice to see you using Grid for the layout. Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

  For the main heading, you're currently using a div to wrap the content. I'd recommend wrapping both lines in a h1 to add a proper content hierarchy. You could then use the span element inside to separate the lines and styles. You've also then jumped straight to level 5 headings for the cards. I'd recommend avoiding skipping heading levels unnecessary. This can cause accessibility issues in the content hierarchy for screen reader users. In this case, I'd say that these would be perfect h2 headings.

  I hope this helps. Let me know if you have any questions. Keep up the great work!

  1

  ---

  

  Pre•160

  @predeyoPosted over 4 years ago

  @mattstuddert Thank you Matt! I learned a bit. But I ended up with some questions, some of them you already answered. :) Would you say mobile first is the way to go?

  Also is there a good way how to style fonts from image file (size/spacing)? I ended up putting image editor window on top of browser window and leaned real close just to see if pixel count matches, had to do it for all typography...

  Also for paddings, margins any left/right props - would you use "rem" or "px"?

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @predeyo I would definitely recommend giving mobile-first a try. Even if you don't actually work mobile-first, I would still recommend using min-width media queries instead of max-width for the reasons I mentioned above.

  Regarding the sizing/spacing, the only real way to get it completely accurate would be to have the original design file. If you're sticking to the JPGs then you'll have to use your best judgement.

  With units, I always use rem. It helps keep the CSS code much more maintainable when it comes to responsive web design.

  0

  

  Pre•160

  @predeyoPosted over 4 years ago

  @mattstuddert Thank you! I will try mobile first next time!

  0
• 

  Pre•160

  @predeyoPosted over 4 years ago

  Added HTML improvements, media query for medium size devices, hover effects and did come cleanup.

  0