FEATURES SECTIONS WITH GRID, FLEX AND BOX MODELING

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @GastonSKL, some suggestions to improve you code:

  • For you Heading, wrap "Reliable, efficient delivery Powered by Technology" in an single <h1> Heading and wrap "Powered by Technology" in a Span Element.

  • You'll then change every other heading to an <h2> Heading.

  • The icons serve no other purpose than to be decorative; They add no value. There Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • The Card Class has to wrapped in a Section Element.

  • For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

  More Info:

  https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

  https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

  • Your CSS Reset is extremely bare. You want to add more to it.

  Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  Happy Coding!

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @GastonSKL, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  1.The box-shadow is a bit too strong, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%); If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

  2.Improve the semantic replacing the <div> used for the four cards and use instead <article> that is a better tag, remember that <div> doesn’t have any effective meaning is just a block elements, so for big block of elements use semantic tags.This a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

  3.Its really nice that you’ve used some animation and effects! Something to improve the accessibility its to add a media query reducing the motion.The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Here’s the code for that:

  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  

  ✌️ I hope this helps you and happy coding!

  0