Design comparison
Solution retrospective
Hi all,
Please can someone take a look at the way I done my buttons? I'm not convinced I went about them in the best way tbh. Should I have actually made them <buttons>
, or was it OK using an <a>
the way I did?
I also could not for the life of me work out why my hover effect on them was shifting them slightly on the page. I guessed this was to do with the hover effect adding a border. So I ended up adding the border to the element but making it transparent before the hover. If there is a better way to do this then please let me know.
Thanks for any advise and tips as always.
Nick
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Hello @NickODxyz,
I have some suggestions regarding your solution:
-
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. -
you can add a
<h1>
withclass="sr-only"
(Hidden visually, but present for assistive tech). AND 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; }
border-radius
andoverflow hidden
to the main container(that wraps the three cards.) so you don't have to set it to individual corners.- Clicking those
"learn more"
would trigger navigation(to learn more about the car ) not do an action so button elements would not be right .So you made the right choice to choose<a>
rather than buttons .
Hopefully this feedback helps.
Marked as helpful1@NickODxyzPosted almost 3 years ago@PhoenixDev22 Thank you for all of that, lots of things to take on board there. I appreciate your reply.
1 -
- @NaveenGumastePosted almost 3 years ago
Hay There ! Nick Good Job on this challenge
Keep up the good work!
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