Design comparison
Community feedback
- @Islandstone89Posted 6 months ago
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. Wrap the card in a<main>
. -
Replace the
id
with aclass
. -
You don't need to wrap the top image in a
<figure>
. -
"Learning should just be a
<p>
, without<span>
or<strong>
. -
The heading would have a link as this is a blog card.
-
A better alt text for the profile image would be "Headshot of Gary Hooper".
-
"Greg Hooper" is a
<p>
. If it was a heading, it could not have been a<h5>
, as headings must always be in order.
CSS:
-
Including a CSS Reset at the top is good practice.
-
I like to add
1rem
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
Remove the positioning and transform properties on the card. It's better to center it using Flexbox on the
body
:
display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100svh;
-
Remove the width on the card. It is not recommended to set fixed sizes in
px
. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
I would use
rem
instead ofem
onfont-size
. -
Add
display: inline-block
on "Learning", so it doesn't take up the full width.
Marked as helpful0@RamazanKrtyPosted 6 months agoHi @Islandstone89 ! That's a great report. Thank you very much. I'll implement it as soon as I can. Best regards
1 -
- @PabloodevPosted 6 months ago
what's up dude!
I took a look at your codes, but I had difficulty understanding your documentation, maybe you should put into practice the documentation of your codes, being an important part of a developer when we research someone we always look at the documentation, the README file always helps with this, I entered on your website that you created to sell clothes and I thought it was incredible, but, again, there is no documentation, I hope this tip helps you, good coding!
0@RamazanKrtyPosted 6 months agoHi @Pabloodev ! Thank you for your comment. Some of my uploads are very old and I didn't add detailed descriptions for them, maybe I should reorganise them. Thanks for the suggestion, though.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord