Responsive 3-column preview card component using HTML and CSS
Design comparison
Solution retrospective
I am still struggling with web page responsiveness...I would appreciate any feedback that would help me become better...
Community feedback
- @Islandstone89Posted 12 months ago
HTML:
-
The icons are decorative, so their alt text should be empty:
alt=""
-
There should only be one
<h1>
at a page. Change them into<h2>
. -
Remove the
.empty
. Use margin or padding when you want space between elements. -
"Learn More" would navigate you to another page, so it should be a link.
-
.attribution
should be a<footer>
. -
The text in the footer must be wrapped in a
<p>
.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
Performance-wise it's better to link the fonts in the head of the HTML instead of using
@import
. -
There shouldn't be a
transition
on every element. You can use a transition on the:hover
. -
Font-size must never be in px. Use rem instead.
-
Remove all
positioning
. -
Remove all percentages.
-
max-width
on.container
should be in rem. -
Media query should also be in rem.
-
Put this on the body, outside the media query:
display: flex; flex-direction: column; gap: 2rem; align-items: center; justify-content: center; min-height: 100vh;
- Remove
margin: 30px auto
on.container
.
Good luck 🙂
Marked as helpful0@KingsleyChukwuPosted 12 months ago@Islandstone89 Thanks so much for the feedback. I will effect the necessary corrections..
1 -
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