Four card feature section

Community feedback

• 

  Thomas Hertog•825

  @thomashertogPosted over 1 year ago

  This is already looking very good, as well visually like the design given as in the code.

  Some small improvements you could make however (in no particular order)

  • outside of a main element you don't use semantic elements (you could argue that the introduction at the top of the page is a <header>
  • it feels very weird to have a title at the top that is not a heading (and then the titles of the cards being <h2>), so I'd fix this by making your .introduction into a <header> with an <h2> for the .introduction-slogan and a <p> for the .introduction-description
  • the icons in the cards are added as background-images requiring you to write all sorts of positioning logic in the background position as well as need to accomodate extra padding in the HTML. I feel (but this is my personal opinion and don't know if it's necessarily better) this would be better if they were in the HTML (though hidden for assistive tech because they're clearly decorative and don't add any meaning).
  • working with grid-template-rows: repeat(4, 1fr) feels a bit squishy since now all your rows will have the same height. That would be bad if one of the cards contained longer content, you might be able to "fix" it with min-height on the cards
  • for a small project like this, it's less relevant, though you might improve on maintainability and/or readability in CSS by working with custom properties (especially for all the colors)
  • you could also have a border-top property on .card switching only the border-top-color on every card itself for better reusability (only need to change border-width in 1 place)
  • the design feels a bit weird around the breakpoint, personally (though i don't know if I did it in my own attempt) I'd add another breakpoint for a 2-column layout

  Overall, this is already a very nice attempt, keep going and improving

  Marked as helpful

  1

  ---

  

  Danil_Dikhtyar 🔥•200

  @Rock-n-Roll-CRCPosted over 1 year ago

  @thomashertog Thank you for your feedback, I appreciate it! 🔥

  0