@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.container
in a<main>
. -
Use the
<time>
element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. -
As this is a blog card, the heading needs to have a link inside:
<h2><a href="#">HTML & CSS Foundations</a></h2>
. -
Don't use words like "image" or "photo" in alt text. Screen readers would read your alt text as "image, image avatar". And don't use
-
, it should be written like normal text. Try something like "Headshot of Gary Hooper". -
Change "Gary Hooper" to a
<p>
.
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
width
onbody
, as it is 100% wide by default. -
Remove the margin on the card.
-
To center the card horizontally and vertically, use Flexbox on the body:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
-
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.
Marked as helpful
@akibulshafi
Posted
@Islandstone89 Thanks, I am struggling to understand elements positioning, width, and height! Still learning.