Four Card Feature Section

Community feedback

• 

  Ivan•2,610

  @isprutfromua

  Posted about 3 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can follow these steps:

  • @import prevents parallel downloads, use <link> instead.

  1. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");
  

  • Use relative units for font size, such as ems or rems. While modern browsers can smoothly zoom pixel-based layouts, sizing type in relative units ensures an entire layout can be scaled up or down by simply updating the font-size of the body element.

  • You Need to Stop Targeting Tags in CSS. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  11

  Marked as helpful
• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted about 3 years ago

  Hey, great work on this one. The desktop layout looks really nice, the site is responsive and the mobile state looks really nice as well.

  Others already gave their feedback which is nice to see, just going to add some suggestions as well and don't mind me if I re-iterate some ideas mentioned already:>

  • For the scss part, you don't really need to use:

  body {
    .... other selectors
  }
  

  You can just directly target the selectors like .container, this way you reduce specificity. Also, if you like, you can search about bem convention. This will help you manage css selectors and create more generic classes. For example, you will have something like:

  .cards{
    &__container {}
    &__list{}
    &__item{}
  }
  

  This way, you can group them properly if you think about it.

  • Adding max-width on the body tag to prevent the layout from stretching. If you try to zoom out on your browser, you'll see that the layout stretches, adding max-width will prevent that, just make sure to add margin: 0 auto so that the body will be centered.
  • These two text:

  Reliable, efficient delivery
  Powered by Technology
  

  Are just one single phrase, meaning instead of using p tag for the first one, use a single h1 to wrap both lines and just add max-width on the h1 so that it will limit and create that 2 lines.

  • The overall font-sizes could be bigger, right now some text are small and they are smaller than the design as well.
  • Remember to only use a single h1 for a site. The h1 typically use on the hero heading like the 2 lines above on the site. So each of the card titles could be replace by just h2.
  • Each images could use an aria-hidden="true" attribute so that it will be totally hidden.

  Those only. Again, great job on this one.

  00
• 

  Ken•935

  @kenreibman

  Posted about 3 years ago

  Professionally and personally I use the clamp() function for truly responsive typography. This will genuinely take your responsive game up to a professional level.

  Check out this video: https://youtu.be/U9VF-4euyRo

  00
• 

  Liyan Anajao•990

  @LiyanNguyen

  Posted about 3 years ago

  for responsive font-size I personally use these methods:

  1. use rem units, and change them via @media query for different viewports
  2. use width% percentages (depending on the container of the text)
  3. use vh/vw (I rarely use this but sometimes more convenient)

  00