@Islandstone89
Posted
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 a page's "main" section. Change.containerinto a<main>. -
The alt text must also say where it leads(frontendmentor.io).
-
"Improve your" is a heading, so make it a
<h1>.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Add around
1remofpaddingon thebody, so the card doesn't touch the edges on small screens. -
Remove
font-size: 100%onhtml, as that is the default. -
Move
background-colorfrom.containertobody. -
On
.container, changeheighttomin-height- this way, the content will not get cut off if it grows beneath the viewport. Remove thewidth- block elements like<body>,<main>and<div>are 100% wide by default. -
Remove all widths and heights in
px. -
Add a
max-widthof around20remon the card, to prevent it from getting too wide on larger screens. -
font-sizemust 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: centeron the body, and remove it elsewhere. The children will inherit the value. -
On the image, add
display: blockandmax-width: 100%- the max-width prevents it from overflowing its container. -
On the paragraph, change
widthtomax-width.
Marked as helpful
@itsmeabderr
Posted
@Islandstone89 I wanted to express my gratitude for the incredibly insightful feedback you provided on my project. Your thoughtful observations and suggestions have truly enriched my work and inspired me to strive for even greater excellence. Thank you for taking the time to share your expertise and support. Your encouragement means the world to me.
@Islandstone89
Posted
@itsmeabderr 🙂
