Design comparison
Solution retrospective
Another sweet challenge done🤠
Community feedback
- @Islandstone89Posted 10 months ago
Hey, Aykin. Congratulations, you have done a great job on this!
Just a few things to take note of - well done :)
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. Make.card
a<main>
, or wrap the card in a<main>
. -
The alt text must also say where it leads(frontendmentor.io).
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. -
Change
width
tomax-width
on the image.
Marked as helpful1 -
- @danielmrz-devPosted 10 months ago
Hello @aykinsancakli!
Your solution looks excellent!
I have just one suggestion:
- Use
<main>
to wrap the main content instead of<article>
.
📌 The tag
<article>
would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
1 - Use
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