@PhoenixDev22
Posted
Hello Laura Bobadilla,
Excellent work!I have few suggestions regarding your solution if you don’t mind:
HTML
-
You can use the
<main>landmark to wrap the body content (which is the three cards). as using landmarks is important to improve navigation experience on your site for users of assistive technology. -
To tackle the accessibility issues: You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).
-
In this challenge , all the images are decorative. For any decorative images, each img tag should have empty
alt=""andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images . -
Imagine what would happen when the user click those
learn more? 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>.For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.
CSS
-
In order to center the card on the middle of the page , you can use the flex or grid properties and
min-height: 100vhto the<body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser. -
As you make each column into a flex column, you can set everything inside the cards to have some margin in one direction
margin-bottom: ;only the link wouldn't need it and usemargin-top:autoon the learn more link that will push it to the bottom of the cards. -
border-radiusandoverflow hiddento the main container that wraps the three cards so you don't have to set it to individual corners. -
On your buttons, add border: 2px solid transparent; to the regular state. This way when the hover on the buttons , it doesn't add an additional 4 pixels to the height and width making the elements shift.
-
height: 70vh;It's rarely ever a good practice to set heights on elements, you almost never want to set it . let the content define the height. -
Using widths in percentages alone, it can cause into losing control of the layout.
General point:
-
Consider using rem for font size .
-
If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
-
Keep in mind that “The margin and padding of a child element in percentage is the percentage of the width of its parent element.”.
-
Check the the layout again on a range of screen sizes.
Aside these, your solution is good. Hopefully this feedback helps.
Marked as helpful
@lkbobadi
Posted
@PhoenixDev22 Thank you so much for the load of information! I will apply this to all my future projects and come back to this challenge for sure!
@PhoenixDev22
Posted
@lkbobadi You’re welcome and glad it was helpful.
