Stats preview card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  hello @anetaanette ,

  I have some suggestions regarding your solution :

  First of all , no need for all those <article> and <section>and <header >, you need to remove them all .

  • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution)

  • A header element doesn't go inside main, it's a separate landmark. Technically you can have headers and footers inside articles, but assistive tech users generally dislike that as it clutters up what is announced to them on the page and can be confusing when using landmarks to navigate.

  • using article it needs to be the whole component, heading, text and image. They all belong to the same one component.

  • use an unordered list <ul> with 3 items for the stats.The number and word have to be read together to make sense so need to be in the same meaningful element <li>. So you can wrap the numbers in a span or strong tag with a class to display them block or whatever other styles you need. But definitely not headers and paragraphs for these. The words like companies should not be wrapped in anything as they are already inside a meaningful element (list item).

  • never use px or it won't scale with the font when people zoom or change font sizes based on their needs.

  • It's better not to use nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

  • using widths in percentage. Not a great idea as you're losing control of the layout. Use max-width instead, let it grow to a point. Then a little margin on the component or padding on the body to stop it hitting screen edges.

  • Page should contain a level-one heading , use an <h1> instead of header for Get insights that help your business grow.

  • Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.read more about sections

  • Your solution isn't responsive.

  Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Victor•510

  @therealmaduanusiPosted almost 3 years ago

  So far It's looks nice 😁 keep it up 👍. But you can make the width 100% on mobile 🤷‍♀️

  1