3-column preview card component using SASS
Design comparison
Community feedback
- @PhoenixDev22Posted over 2 years ago
Hello @dabinderudhan ,
I have some suggestions regarding your solution:
- About <h1> it is recommended not to have more than one h1 on the page . You can add a
<h1>
withclass="sr-only"
(Hidden visually, but present for assistive tech). Then use<h2>
instead of<h1>
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }
-
For any decorative images, each img tag should have empty
alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in this challenge , all the images are decorative. -
Clicking those
"learn more"
buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button. Though, so it's a good idea to make a habit of specifying thetype
. So use<a>
instead. -
Use min-height: 100vh; instead using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page.
Overall your solution is good. Hopefully this feedback helps.
Marked as helpful0 - About <h1> it is recommended not to have more than one h1 on the page . You can add a
- @denieldenPosted over 2 years ago
Hi Dabinder, I took some time to look at your solution and you did a great job!
Tip of graphic design: With
font-family:" Big Shoulders Display "
the browser will use the Times New Roman font when it doesn't find the first font indicated (you can seen during loading)...- I would rather replace it with a
font-family:" Big Shoulders Display ", sans-serif
much more similar to the primary font.
Overall you did well :)
Hope this help and happy coding!
Marked as helpful0 - I would rather replace it with a
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