Skip to content
Submitted over 2 years ago

3-Column Preview Card | Mobile First Workflow

Nick OD•270
@NickODxyz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Hello @NickODxyz,

    I have some suggestions regarding your solution:

    • For any decorative images, each img tag should have empty alt="" and aria-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> with class="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 and overflow 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 helpful
    1
    Nick OD•270
    @NickODxyzPosted over 2 years ago

    @PhoenixDev22 Thank you for all of that, lots of things to take on board there. I appreciate your reply.

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 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 GitHub

Join 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