Stats-preview-card-component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Justin! 👋

  Good effort on this challenge! 👍

  I recommend reading "5 Handy Sass Code Snippets" article. In that article, you will find some useful @mixin to help you write Sass.

  Those h1 inside the statsWrapper are not headings. Also, it is not a best practice to have many h1 on a page. It can confuse the screenreader users because there will be many titles for a single page. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.

  I recommend making the statistic as a list element instead. If the CSS fails to load, the users still are able to understand the content.

  • 10k+ companies
  • 314 templates
  • 12M+ queries

  The image is a decorative image. It doesn't add any meaningful information. So, leave the alternative text empty (alt="").

  For the styling, the fullWrapper or the page container can be the body element. It's by default filling the entire page horizontally. Then, you set min-height: 100vh to make sure it always the entire page.

  Then, make the main element as the cardWrapper instead. This way, there's no need for extra div as the cardWrapper.

  Lastly, never use 100vw on any (real) element as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.

  I hope this helps! Happy coding!

  Marked as helpful

  0
• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a Paragraph Element.

  • The statistics component is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

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

  • This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

  Here is an example of how it works: EXAMPLE

  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/

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  0