Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Card using Flexbox to center, and variables for colors.

Fizzify 20

@Fizzify

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found making some of the hover effects hard like the view icon.

I was a little unsure of my previous code on the CSS variables because I haven't really used it in a long time.

Is my code good practice?

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Heyo,

I think you did great here. Apart from the things mentioned by @Samadeen, you could look into the following:

  1. Would be nice if you wrapped the layered image in an <a> tag, as I'm fairly sure it's supposed to take you somewhere when it's clicked on.

  2. Here's a useful article about alt texts. I suggest reading it but I'm going to sum up the parts relevant here: when writing alts, don't include words like image, icon, illustration etc. Using an <img> tag makes it self-explanatory what it is. For profile pictures, it's best to use the name of the person (here, it would be "Jules Wyvern."). For the icon, "Ethereum." would be a bit better.

Marked as helpful

2

Fizzify 20

@Fizzify

Posted

@FluffyKas Wow! Yeah this seems to be helpful. I've never known about this and I do agree with you with the img tag. Thank you, cheers.

0
Abdul 8,560

@Samadeen

Posted

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

  • You should use <main class="container"> instead of <div class="container">.
  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
  • You can wrap your attribution section in a footer tag to avoid accessibility issues.

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Marked as helpful

1

Fizzify 20

@Fizzify

Posted

@Samadeen Alright! I'll begin working on my solution and apply these to my other projects. Cheers!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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