@PhoenixDev22
Posted
Hello EJ,
Great work! Congratulation on completing this challenge. I have some suggestions regarding your solution if you don't mind:
HTML
- About
<h1>
it is recommended not to have more than oneh1
on the page . Multiple<h1>
tags make using screen readers more difficult, decreasing your site’s accessibility. You can add a<h1>
withclass="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=""
as you did andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images .
- 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>
. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.
- 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.
Overall, Great job on this one.
Marked as helpful
@ejionaut
Posted
@PhoenixDev22 I was wondering why the hover was affecting the height it was because of that. Thanks for the feedback!
@PhoenixDev22
Posted
@ejionaut Happy coding!