@Islandstone89
Posted
Well done, Lukas. Here are some suggestions.
HTML:
-
Every webpage needs a
<main>that wraps all of the content, except for<header>andfooter>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change.containerinto a<main>, or wrap.containerin 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
1remofpaddingon thebody, so the card doesn't touch the edges on small screens. -
On the
body, changeheighttomin-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-widthof around20remon the card, to prevent it from getting too wide on larger screens. -
It is common to add
display: blockon images.
Marked as helpful
@lukKotecki
Posted
@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!
@Islandstone89
Posted
@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
