Frontend Mentor | Responsive 3 Column Preview Card Component coding challenge solution

Community feedback

@PhoenixDev22

Posted over 2 years ago

Hello @david-oncu ,

I have some suggestions regarding your solution:

To tackle the accessibility issues,
Wrap the <body> content with main landmark main (which will be the whole component that wrap the three cards. ) . read more about A simplified web page, might look something like this:.
you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

.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="" (as you did )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.
swap the buttons for anchor tags. 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, so it's a good idea to make a habit of specifying the type.
In line-height: 2rem;, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.
border-radius and overflow hidden to the container that wraps the three cards.
In the mobile layout, there is too much margin on top .