@Islandstone89
Posted
HTML:
-
<main>
holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a<div class="card">
inside of<main>
. -
There is no need to include "image" in the alt text, as screen readers announce that by default.
-
"Learning" is a
<p>
. -
I would wrap the date in a
<time>
element:<p class="published">Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. -
As this is a blog card, the heading needs a link inside.
-
"Greg Hooper" is a
<p>
. -
.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 recommend adding a bit of
padding
, for example16px
, on thebody
, to ensure the card doesn't touch the edges on small screens. -
Remove
max-width
onbody
. -
Remove the margin on the card.
-
To center the card horizontally and vertically, with space between the main and the footer, I would use Flexbox on the body:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
gap: 2rem;
-
Except for the author image, remove all widths and heights in
px
. -
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. -
On "Learning", add
width: fit-content
- this makes it take up only the width of the text plus the padding. -
As the design doesn't change, there is no need for any media queries. When you do need them, they should be in
rem
orem
, notpx
. Also, it is common practice to do mobile styles first and use media queries for larger screens.
Marked as helpful
@Ahmed-Nafrawy
Posted
I will take that into consideration! Thank you a lot
Let me qsk you something, how can I make the svg square? I tried to give it the same height and width but it doesn't work, and tried aspect ratio and also doesn't work!
So how do you think I can achieve it?
Maybe in the svg code it's there will be a predeclared heighr and width and I can't redeclare it cuz of it? (I hadn't look it up yet, but I will, I am only asking if there is another way I don't know of@Islandstone89
@Islandstone89
Posted
@Ahmed-Nafrawy Hm, if you use an inline svg (<svg> tag with code inside of it), you can change the width and height directly inside the svg.
Marked as helpful
@Ahmed-Nafrawy
Posted
I will try that, thank you 🙏@Islandstone89