Submitted over 3 years ago

3-Column Preview Card | Mobile First Workflow

Nick OD•270

@NickODxyz

A solution to the 3-column preview card component challenge

Preview Code

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

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

PhoenixDev22•16,830
@PhoenixDev22
Posted over 3 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
Naveen Gumaste•10,420
@NaveenGumaste
Posted over 3 years ago
Hay There ! Nick Good Job on this challenge

Keep up the good work!

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