Insure Landing Page Using CSS Grid & JS (Commented & Organised Code)

Community feedback

• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted almost 5 years ago

  Nice work on this challenge! You've done a really good job. You can see from the design comparison above that your overall layout is really good. The major areas you could tweak would be things like spacing, font-weight, and font-size to get it to really match up to the design. It's well worth spending the time to make these refinements, as attention to detail is a great skill to build up as a front-end developer.

  I noticed your main image often gets squashed or stretched. This is because you're setting the height and width on it. There are two possible solutions:

  • Avoid setting both the height and the width. If you only set one of them, the other will take care of itself. I typically prefer setting the width and leaving the height to be calculated automatically.
  • If you really need to set both of them, use object-fit to make sure the image always maintains its aspect ratio. The value I use most often for this is cover. So the full declaration would be object-fit: cover;.

  I hope that helps. Keep up the great work and let me know if you have any questions! 🙂

  13