Design comparison
Solution retrospective
Hello community this is my solution. Your feedback would be appreciated π
My biggest challenge was the hover effect . I managed to solve it with the information from https://www.w3schools.com/howto/howto_css_image_overlay.asp
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi Andrea Ruiz,
Congratulation on finishing this challenge. Great job on this one! I have few suggestions regarding your solution:
HTML
When you wrap the anchor around the header, the whole line get's clickable.
-
Personally, I wouldn't do it
<a><h1>...</h1></a>
, because having the<h1>
tag on the outside would make it easier to scan for in source code and only the text will be clickable. -
In my opinion , you need one interactive element around the equilibrium image, it should either have
Sr-only
text, anaria-label
that indicates where the link navigate the user. The icon view is not really needed to be in the HTML. When you hover over the image or over the icon view , I expect the same thing would happen.
- For any decorative images, each img tag should have empty
alt=""
and addaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in (icon-view, icon-ethereum, icon-clock
).
- Adding
rel="noopener"
orrel="noreferrer"
totarget="_blank"
links. When you link to a page on another site using target=β_blankβ attribute , you can expose your site to performance and security issues.
hopefully this feedback helps.
Marked as helpful0@AndreaDev14Posted about 2 years agoHi @PhoenixDev22,.Thanks for the helpful advice! π
0 -
- @AdrianoEscarabotePosted about 2 years ago
Hi Andrea, how are you?
I really liked the result of your project and the way you wrote the code was good, but I have a tip for you:
1- I noticed that you had a scrol bar in your layout I managed to fix it as follows:
body { margin: 0; }
I think this is happening because you didn't set margin: 0; for all elements on the page.
The rest is really good!
Hope it helps... π
Marked as helpful0@AndreaDev14Posted about 2 years agoHi @AdrianoEscarabote, Thanks. I fixed it πππ»
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord