Simple HTML CSS

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 4 months ago

  HTML:

  • There are 2 src attributes on the image. I assume you meant to use alt for the second one. All images must have the alt attribute. If the image is decorative, the alt text should be empty:alt="". This image has meaning, so it needs a short description. The alt text should be written naturally, without using - between the words. A good alt text would be "QR code leading to the Frontend Mentor website."

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components

  • I would remove the id from the <footer>. It is common to use classes instead. This article explains when should you use an id.

  • <main> and <footer> are separate top-level landmarks, meaning one cannot be inside another. Move the footer outside of the main, so they become siblings, both being direct children of the body.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Remember to specify a fallback font:font-family: 'Outfit', sans-serif;.

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove all widths.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

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

  • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card: padding: 16px.

  • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Remove the margin, the space around is created by the padding on the card. You can add a bit of margin-bottom, though.

  • Remove position: absolute on the footer. Add gap: 2rem on body to create some space between the main and the footer.

  • Remove margin-left and margin-right on the <h1>, it is not needed because the card itself has padding. Quick tip: if you ever want to set the same value for margin-left and margin-right, you can use the shorthand margin-inline.

  0
• 

  Nguyen Duc Tan•240

  @tannguyenk3Posted 4 months ago

  nicee

  0