Stats preview card component (react + sass)

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @MrBlackvanta, some suggestions to improve you code:

  • You're gonna back and work on the text layout; You're almost there.

  • When using images that are different size for different breakpoints, its’ far more effective to use the <picture> element. By using this element not only are able to use different size images, you can also save on bandwidth, meaning your content loads faster.

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  • The Alt Tag description for the image needs to be improved upon.You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

  • The Attribution needs to be wrapped in a Footer Element.; It's the end of you content.

  • 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

  1

  ---

  

  P

  Abdelrhman Ahmed•170

  @MrBlackvantaPosted about 2 years ago

  Hey @vcarames, Thanks for this amazing feedback, much appreciated.

  1. As for the text layout as you can see am not pro user and I don't have access to the design files only an image and my observation.

  2. I know about the picture element but I totally forgot to add it.

  3. A footer actually makes more sense I will start implementing that from now on.

  4. CSS reset is bare intentionality because it's such a small project and I didn't want to make a deep rest.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @MrBlackvanta

  • The Alt Tag aren't something provided by being a pro user. Its how you make you content accessible to all users.

  https://www.w3.org/WAI/fundamentals/accessibility-intro/

  https://webaccess.berkeley.edu/resources/tips/web-accessibility

  • CSS reset should include things like:

  This will make all image responsive:

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  

  This will help with text overflow:

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  

  Just because the content is "small" doesn't mean it won't benefit from it.

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Abdelrhman Ahmed, congratulations on your first solution!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

  img {
  mix-blend-mode: multiply;
  opacity: 80%;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  P

  Abdelrhman Ahmed•170

  @MrBlackvantaPosted about 2 years ago

  Hey @correlucas, thanks for your feedback much appreciated ❤️❤️

  Actually I've never heard of this property before but I've just searched it and WOW! It's an amazing solution for overly tasks, and I am going to use it from now one.

  Have a good one.

  0