HTML5, CSS3, Google Fonts, Box Shadow, Border Radius

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 2 months 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 a page's "main" section. Wrap the card in a <main>.

  • Instead of an id, it is most common to give selectors a class. This article explains when to use an id.

  • Remove the inline styling on the image - all styling should be done in the CSS file.

  • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

  • .attribution should be a <footer>, and you should use <p> for the text inside.

  CSS:

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

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

  • font-family should be set on the body, and removed elsewhere. The children will inherit the font from their ancestor.

  • Remove all margins, they are not needed.

  • To center the card horizontally and vertically, with some space between the <main> and the <footer>, I would use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  gap: 2rem;
  

  • max-width on the card should be in rem. Around 20rem will work fine.

  • Read this article to understand why you should not change the font size to 62.5%.

  • 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.

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

  • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container. Also, add a border-radius, this can be in px.

  Marked as helpful

  3

  ---

  

  Yukti Gupta•170

  @yMeerakiPosted 2 months ago

  @Islandstone89

  Thank you so much for the detailed feedback!

  I appreciate the tips on accessibility and best practices. I'll make sure to implement your suggestions, especially regarding using Rem for font sizes and improving the alt text.

  Your advice will definitely help improve my code. Thanks again!

  1