Four Cards Section with CSS Grid, Sass

Community feedback

• 

  Natali 👻 Grimm•1,150

  @Grimm-NPosted 12 days ago

  First off, fantastic work! 🎉 Your code is clean and organized, and it’s great to see how much effort you’re putting into the details. It’s really coming together nicely! 👏

  Just a few tips to keep in mind as you refine things further:

  1. Simplify the @font-face Declarations: You can streamline your @font-face code by using a variable font setup, which makes it more concise and efficient. Here’s an example:

     @font-face {
         font-family: "Poppins";
         src: url("../fonts/Poppins/Poppins-Variable.ttf") format("truetype");
         font-style: normal;
         font-weight: 200 600;
     }
     

     This way, you avoid repetition by only listing the font family and style once per weight variation. It’s a cleaner approach that can help reduce code bulk! 📝

  2. Use Relative Units (em, rem, %, vw, vh) Instead of Pixels: Relative units like em, rem, vw, and vh are super helpful for creating a more responsive design. Unlike pixels, which are fixed, relative units adapt more smoothly across different screen sizes and settings (including accessibility settings like larger text), making your design more flexible and user-friendly. 💪

  3. Download Fonts in Multiple Formats (woff, woff2): When you’re ready to take it up a notch, I recommend downloading fonts in multiple formats like woff and woff2. These formats are generally better optimized for the web than ttf, with smaller file sizes that can help improve your site’s loading speed—great for both users and SEO. 🚀

  Overall, you’re doing an awesome job. These tips will just help add that extra polish to an already great foundation! 🎨

  1
• 

  Yassin Amr•120

  @justXeeZPosted 12 days ago

  here are some tips:

  • always make h1 and h2 a bit bigger in size to make them stand out more
  • if you don't want the top border to take this weird curvature at the tips like a hook, make the border radius the same value as the border width like:

  .container{
   border-top: 5px solid yellow;
   border-radius: 5px;
  }
  

  • another tip would be to use the gap property instead of margins to prevent the cards from cramming in smaller screen sizes before the page translates into the media query

  other than that you did a pretty good job.

  1