3-column preview card component with CSS Grid

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi, Neonita!

  It is not recommended to use more than h1 per page. I understand why you are using it in this project so that there is not some error, but I recommend you to change your h1 for h2, and inside your main you create a h1 with the class sr-only.

  This class has the following values.

  .sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;
  }
  

  This will allow some screen reader to recognize it and not give you accessibility errors, without being visible on your page.

  Personally I think your project is well done and congratulations for that.

  Marked as helpful

  2

  ---

  

  Neonita•80

  @neonitaPosted over 2 years ago

  @Sdann26 Good to know. Thanks, Danilo! I will implement this in future projects/practices :)

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Neonita, I took some time to look at your solution and you did a great job!

  Tip of graphic design: With font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading) ... for the designer it's a really awful font!

  • I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

  Also remove margin-top from grid class because with grid it is superfluous

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  1

  ---

  

  Neonita•80

  @neonitaPosted over 2 years ago

  @denielden Great remark, sans-serif would definitely be a better fallback font. Thanks, Deniel! I also removed the top margin. Honestly, I placed it there for the sole purpose of cloning the design screenshot haha. But, yes, it's best to trust CSS Grid's superfluity.

  1