Four card feature section (Mobile first) using HTML and CSS(Grid+flex)

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Jose,

  Good job :D

  I have checked your HTML structure, a few tips from me:

  • what do you think about this proposition whit the h1 and main-heading with sub-heading:

  <h1 class="heading-primary">
      <span class="heading-primary-main">....</span>
      <span class="heading-primary-sub">....</span>
  </h1>
  

  • alt text can be empty alt=" " because icons are only decorative so they can be ignored by assistive technologies, such as screen readers;
  • the title is not needed inside of the img;
  • I think in this solution the main tag I would put below the header but generally, this is only my point of view;
  • if you want to stop the scroll you can add overflow: hidden to the body.

  About the additional effect: (transform scale on hover). I had a quite big problem with the flickering text (was moving, jumping a bit). IMO it is better to write more simple code and do not give unnecessary additional effects. I have asked more experienced developer - was against using the scale transform on anything with text in it. She said: that it can be disorientating and make the text a bit blurry so it is better to add a hover effect to something clickable - scale like this would be appropriate on an image (inside a link tag) that opened up a larger version of it in a lightbox, for example. Hover is usually used to indicate interactivity though. What can I say, she's got right! Check your project by inspecting the page on different devices and size of the vw so you will see it.

  That's it from me. Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  1