@PhoenixDev22
Posted
Hello Josh,
Great work on this one! I have some suggestions regarding your solution:
HTML
To tackle the accessibility:
-
You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).
-
Use the
<footer>landmark to wrap the attribution, as using landmarks is important improve navigation experience on your site for users of assistive technology. -
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 idea to make a habit of specifying the type of the button .
And it is essential that interactive elements have focus-visible styles as well as hover styles. These need to be really clear and obvious as they are needed to help a keyboard user know where is focused on the page.
CSS
-
border-radiusandoverflow hiddento the main container that wraps the three cards so you don't have to set it to individual corners. -
Consider using
min-height: 100vhto the body, that will let the body grows taller with the component outgrows the visible page. -
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.(remove the margin from the <main>)
General point: Really important to keep css specificity as low/flat as possible. The best way to do styling purposes is single class selectors.(not IDs as IDs have a much higher specificity than classes) IDs have many uses in a webpage aside from being a CSS selector. For example as page anchors, fragment identifiers or to link labels to form fields.
- There are so many repeated style rules , better to use reusable classes.
Aside these, your solution is good. Hopefully this feedback helps.
Marked as helpful
@jokings
Posted
@PhoenixDev22 Thank you very much I really do appreciate this feedback
@PhoenixDev22
Posted
@jokings You’re welcome
Marked as helpful
