@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 the "main" section of a page. Wrap the card in a<main>
. -
The top image is illustrative, meaning the alt text should be empty:
alt=""
. -
Don't use words like "picture" in the alt text. Screen readers will announce that twice if you do. Change it to something like "Headshot of Gary Hooper".
-
Never have text in divs alone! Use the appropriate semantic elements.
.tag
,.date
,profile-name
and.para
are all paragraphs, which must be marked up with a<p>
..title
is a heading. And remove the<span>
around the profile image.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. Remove thewidth
, it is not needed, since thebody
takes up the viewport width by default. -
Remove the width and height on the card, and on the top image. You also don't need
object-fit
. -
max-width
on the card should be in rem. -
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. -
On the image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container.
Marked as helpful
@CoderVicky23
Posted
Thanks @Islandstone89 for giving my code a close look. I appreciate your efforts and suggestions. The next time I work on a solution, I will keep in mind the points you suggested.