Submitted 10 months ago
Solution of Blog preview card "html & css only"
@RizqiSugiarto
Design comparison
SolutionDesign
Solution retrospective
This is the first frontend project I have ever completed, I think there are still many shortcomings
Do you have any suggestions for this project?
Community feedback
- @AGutierrezRPosted 10 months ago
Hello there @RizqiSugiarto 👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you.
General Structure and HTML:
- Wrap the primary content within the
<main>
tag instead of using it as a standalone component like a<div>
. - All the content should be contained within landmarks. Every page minimally needs a
<main>
element.
CSS and Styling:
- Replace the
100vw
from theheight
on thebody
for a100vh
. You are using the wrong unit. This will center the card on the screen - Remove the
width: 100vw
on thebody
, you dont need it. - Remove the
width: 340%
on the.card
, you dont need it.
Accessibility and Semantic HTML:
- The icons/illustration images are decorative, so their alt text must be empty:
alt=""
. - Profile image could benefit from a more descriptive alt text, like
alt="Headshot of Greg Hooper"
or you could leave it emptyalt=""
.
I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!
Happy coding!
Marked as helpful0 - Wrap the primary content within the
- @techyjcPosted 10 months ago
Great Job!
Change the body CSS height from 100vw (view width) to 100vh(view height).
Otherwise all good!
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