Design comparison
SolutionDesign
Solution retrospective
Why I cant set a min-height to the body and html? I had a hard time in designing the active design in image is there an easy way but I learned box shadow and opacity . Why color and background color is not working on <hr> tag? I used background instead.
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi Sef Palima,
Congratulation on finishing this challenge. Great job on this one! I have few suggestions regarding your solution:
HTML
- You can use the
<main>
landmark to wrap the NFT and<footer>
for the attribution as using landmarks is important to improve navigation experience on your site for users of assistive technology.
- To tackle the accessibility issues in this challenge , as it’s not a whole page, you can have
<h1>
visually hidden withsr-only
class.
- The most important part in this challenge interactive elements. Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ..)
for this imagine what would happen when you click on the image, there are two possible ways:
1: If clicking the image would show a popup where the user can see the full NFT, here you use<button>
. 2:If clicking the image would navigate the user to another page to see the NFT, here you can use<a>
.
For the same reason, you can use
<a>
to wrapEquilibrium #3429 and Jules Wyvern
.- The link wrapping the equilibrium image should either have
Sr-only
text, anaria-label
oralt
text that says where that link takes you.
- For any decorative svgs, each svg tag should have
aria-hidden="true"
andfocusable=”false”
attributes to make all web assistive technologies such as screen reader ignore those svgs in(icon-view, icon-ethereum, icon-clock ).
- Profile images like that avatar are valuable content. The alternate text of the avatar’s image should not be empty. You can use the creator's name
Jules Wyvern
. Read more how to write an alt text
- If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the
<hr>
you can useborder-top:
to the avatar's part.
- There are so many ways to do the hover effect on the image, The one I would use is pseudo elements
::before, ::after
. You can use pseudo-elements to change the teal background color to hsla. Then the opacity can be changed from 0 to 1 on the pseudo element on the hover. Also using pseudo elements makes your HTML more cleaner as there's no need for extra clutter in the HTML.
- Adding
rel="noopener"
orrel="noreferrer"
totarget="_blank"
links. When you link to a page on another site usingtarget=”_blank”
attribute , you can expose your site to performance and security issues.
Hopefully this feedback helps.
Marked as helpful1 - You can use the
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