Frontend Mentor | 3 column preview card - responsive coding challenge solution

@PhoenixDev22

Posted about 2 years ago

Hello yolanda1089,

Excellent work! I have some suggestions regarding your solution:

Use the <footer> landmark for the attribution, as using landmarks is important to improve navigation experience on your site for users of assistive technology.

About <h1>it is recommended not to have more than one h1 on the page. Multiple <h1>tags make using screen readers more difficult, decreasing your site’s accessibility. In this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only. Then you can swap those <h1> with <h2>.

In this challenge, the svgs are much likely to be decorative. For any decorative svgs, each svg tag should have aria-hidden="true" and focusable=”false” attributes to make all web assistive technologies such as screen reader ignore those svgs .

Never use <div> and <span>alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. By adding semantic tags to your document, you provide additional information about the document, which aids in communication.

What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>.

In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the <body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser. No need for absolute positioning. Then you can use flexbox properties to the container that wraps the three card and give it flex-direction : row for the desktop and column for the mobile.

If you make each column into a flex column. Then set everything inside the cards to have some margin in one directionmarin-bottom: ; only the link wouldn't need it and use margin-top:auto on the learn more link that will push it to the bottom of the cards.
Really important to keep css specificity as low/flat as possible. It’s not recommended to use the ids to target the DOM elements for styling purposes, better to use classes so that it could be more manageable and reusable.IDs have a much higher specificity than classes) IDs have many uses in a web page aside from being a CSS selector.

Add border-radius andoverflow hiddento the main container that wraps the three cards so you don't have to set border-radius to individual corners.

line-height: 40pxUse a unitless line-height value to Avoid unexpected results. You can read more in mdn

Hopefully this feedback helps.

3 column preview card - responsive