Building the card component using HTML CSS

Community feedback

• 

  P

  Øystein Håberg•13,260

  @Islandstone89

  Posted over 1 year ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change .row into a <main>.

  • The icons are decorative, so the alt text should be empty: alt="".

  • Text should never be in divs alone. .topic should be a <h2>. You can wrap the <h2> in a <div>, though it is probably not needed here.

  • Likewise, style-t is a paragraph, so wrap it in a <p>.

  • Don't use <br> to force text onto a new line. The text should flow naturally, and all styling belongs in the CSS.

  • The headings should be written with normal capitalization: "Sedans", "Suvs", and "Luxury". You then use text-transform: uppercase to change the capitalization in CSS.

  • "Learn More" would navigate to another page, hence it is not a button but a link.

  • .attribution should be a <footer>, and its text must be wrapped in a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • line-height must also never be in px.

  • "Learn More" should have border: none, not border: 0px. Also, whenever you need to set a value to zero, write 0, without including any units.

  • Remove all positioning properties.

  • Remove all widths and heights in px and %. You can set a max-width in rem on the card container in case it gets too wide on larger screens.

  • All styling should be done in the CSS, so move the styles for .attribution from the HTML document to the stylesheet, and remove the ``

  11

  Marked as helpful