Fourcard feature section

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Edgard,

  Welcome here! Well done, really good job :D

  I have checked your HTML structure and generally looks well, a few tips for you:

  • probably you know, but you can also create h1 with two spans named: main-heading and sub-heading (I think em tag is unnecessary here);
  • h2 in the header should be the p tag;
  • rest of the h3 can become h2 but it is ok;
  • instead of <div class="container__body"> I'd recommend to use section tag;
  • generally in this solution, especially in the div container you have used so many nested divs (I don't think that it is necessary in this solution);
  • icons: they have only a decorative role here - that's a reason why alt text should be provided as a empty (alt="") so these icons can be ignored by assistive technologies, such as screen readers;
  • RWD: check your project by the inspector in your browser on different devices => you will see that between mobiles and desktop is a huge gap, the layout doesn't look nice. I'd recommend to go from one column (mobiles), then create two rows with two boxes each and finally, the desktop design pattern;
  • add max-width to the project => otherwise all content extends to the width of the screen;
  • reset the styles in CSS folder by adding margin/padding set to 0 in the * selector;
  • you can center all content in the viewport.

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

  Greetings :D

  1

  ---

  

  Edgard Alas•115

  @EdgardAlasPosted almost 4 years ago

  @SzymonRojek Thank you very much for the tips :D

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @EdgardAlas

  No problem. Generally good job!

  Last time I have read this article from the CCS-trick: HTML for Subheadings and Headings.

  Check it out :D

  1