What are you most proud of, and what would you do differently next time?
I tackled problems i had with flex-box especially on aligning the layout. Next time i would probably try and match the challenge as close as possible to the solution as i can.
What challenges did you encounter, and how did you overcome them?
I encountered a challenge with aligning the footer property. I solved it by adding it with the position:absolute property and specifying where i wanted it to be with the bottom and left property.
What specific areas of your project would you like help with?
I would like more help with aligning items with flex-box without using the position absolute property.
@Swag-blips
Posted
Hello Kamaru, nice work
These are my takes
Improve accessibility:
Marked as helpful
@Islandstone89
Posted
HTML:
ALL content must be inside the <body>!
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. Change .container into a <main>.
The alt text must also say where it leads(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 like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.
Add gap: 2rem on body, to create a little space between the main and the footer.
Move font-family and line-height to the body. I would remove the line-height, as the default value looks better than setting it to 1.
Move the properties on .container to .content-container, as that is the div for the card. Remove display: flex, it is not needed.
Remove the margin on the card.
Remove all widths and heights in px.
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.
font-weight should only have a number, it cannot have px as part of the value. Paragraphs have a default value of font-weight: 400, so it is unnecessary to declare it.
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.
Remove position: absolute and display: inline-block on .attribution.
On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.
To create the space between the image and the edge of the card, set padding on all 4 sides of the card: padding: 1rem.
Marked as helpful
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
