price grid HTML & CSS

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Catuva21,

  Well done :D

  A few tips below:

  • instead of div class="container" you can use the main tag;
  • I think you don't need this div class="bloque";
  • instead of h2 and h3 in the first box I'd suggest to create one the h1 tag with two spans inside of it => main-heading: Join our community and sub-heading: 30-day, hassle-free money back guarantee;
  • in the 2 and 3 box instead of the h3 you can add the h2 tag (we have to use headings gradually and do not skip them);
  • the p doesn't have to be added to the a tag;
  • in the third box do not use one p tag and br inside of it => the best idea will be ul > li (please read about br tag);
  • text "per month" should be in the middle of the price;
  • will be nice to add :hover state to the link;
  • these to sentences in the 1 box (grey color) should be separated when the desktop patter comes up;
  • add max-width;
  • also you have used an explicit height: that's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink.

  Keep coding :D

  Ps. Please, don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  1