Four card feature section master using CSS & HTML

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. The desktop layout looks great, it is responsive though if go to like 770px upwards, not really an issue but just that the cards get differ in their sizes. You could go with something like a 2x2 layout so that it will be equal size. Mobile state looks great as well.

  Here are some suggestions for the site:

  • The header on this one could just be replaced by div and be inside the main tag this layout looks like just a single content or main-content. Typically, a primary header consists of the site-logo, navlinks and some other controls for the site.
  • For the h1, you don't need to use br tag inside it to make the second text wrapped in another row, for this you could just use max-width on it. Adjust the value on it until you get the desired look. Just remember to add margin: 0 auto on it so that it will be centered.
  • For the section tag, you could just remove this since a section tag is not informative enough unless it is labelled using aria-labelledby attribute or when there is already a visible heading tag on a section/part of the layout. So for this, a div could replace the section.
  • Since you are using ul tag, you should have created a 4 li tag and not 3 since visually, there are 4 items right. Use 4 li tag and use grid on the ul so that you could place each item properly like on the design.
  • For the colored top of each card, you could just use the ::before or ::after of each li tag. This way, you won't have to create an extra span tag inside it.
  • For each icon of the card, you could just hide them since they are only acting as decoration. Decorative images are just images that doesn't contribute to the overall content of the site. They should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Khalid Khabouz•190

  @KhalidKhabouzPosted almost 3 years ago

  @pikapikamart Thank you so much for stopping by, these suggestions were very helpful, I'm considering to apply them as they are for a professional result. Especially the HTML semantic tweaks, were very thoughtful. Thank you again for your professional feed back.

  1