CSS HTML

Community feedback

• 

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 10 months ago

  Well done, Lukas. Here are some suggestions.

  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 .container into a <main>, or wrap .container in a <main>.

  • 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(frontendmentor.io).

  CSS:

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

  • Use the style guide to find the correct background-color.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove the fixed width on the card.

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

  • It is common to add display: block on images.

  Marked as helpful

  0

  ---

  

  Lukas•140

  @lukKoteckiPosted 10 months ago

  @Islandstone89

  Dear Øystein

  Thank You for Your review. I didn't even thought someone will ever bother to check it for me. I appreciate it much. I've tried to fixed my solutions with Your guidence and wasn't shure about including CSS reset rules. Did I fix it correctly?

  Greets from Poland!

  1

  

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 10 months ago

  @lukKotecki Happy to help - well done 🙂

  For clarity, I would give <main> a class of "card". And remember to remove the word "image" from the alt text.

  As for the CSS Reset, you should make a habit of including it. You can modify it if needed, when you get more familiar with what it does. I recommend reading through the article I linked to.

  The most important declarations are box-sizing: border-box and max-width: 100%, so you don't have to include the rest in this simple project. But as said, it should become a habit, so I would probably recommend doing it nonetheless.

  Marked as helpful

  1