@Islandstone89
Posted
HTML:
-
The image and icon are decorative, meaning their alt text should be empty:
alt=""
. -
The background pattern should be placed as a
background-image
in CSS. -
Headings should always be in order, so you cannot go from a
<h2>
to a<h5>
. I would also change "Annual Plan" to a<p>
. -
.attribution
should be a<footer>
. As<main>
and<footer>
are separate landmarks, the<footer>
needs to be moved outside of<main>
.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
Remove the
width
on the card. -
Add a
max-width
of around20rem
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. -
Media queries should be in rem, and we usually have the mobile styles as the default.
Marked as helpful
@Forester04
Posted
Thank you very much for taking the time to review my code and provide such insightful feedback. I truly appreciate your expertise and attention to detail.
Regarding your suggestions, I find them incredibly valuable and will certainly incorporate them into my work. @Islandstone89
@Islandstone89
Posted
@Forester04 happy to help! 🙂