Frontend Mentor | 3-Column Preview Card | Mobile First Workflow coding challenge solution

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

@PhoenixDev22

Posted 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

Nick OD• 270

@NickODxyz

Posted over 2 years ago

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