NFT Card. HTML and CSS only

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @bronsooonn ,

  Congratulation on completing your project . Your solution is really nice. I have some suggestions:

  • Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429 , Jules Wyvern.(in `this challenge is an anchor tag <a>.

  • Whenever you include interactive elements (button, links, input, textarea), make sure you include clearly visible focus-visible styles as well as hover ones. This will make the users can navigate this website using keyboard (by using Tab key) easily .

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. And alt in the avatar imgshouldn't be empty .read more about alt text for informative and decorative images

  • The eye image doesn't really need to be in the html, you could do it with css

  • You can use unordered list<ul> to wrap <div class="eth-more-desc" and in each list item would have <img > and <p>.

  • You shouldn't have used <hr/>you can use border-top property for the <div class="eth-creator"

  • Never use pixel for font-size,

  • I really hope this feedback helps , keep coding

  Marked as helpful

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @bronsooonn ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • I suggest you to try transition on hoverable elements like image, heading and creator name.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  1

  ---

  

  Ron Valiente•100

  @mochaaa18Posted almost 3 years ago

  @tymren608 I really like your idea. I will use BEM from now on. Also I will try to transition the hoverable elements I created as you've said. Thanks a lot for this. Keep safe. Have a great day. Cheersss ~

  0
• 

  Mint Missy•140

  @MintMissyPosted almost 3 years ago

  Howdy! You've done really great job man! I've found some things that I would improve if I were you.

  • You can look at the sass ampersand '&' character -> you can use it in your card-header;
  • You may wanna use main tag within your document body for accessibility purposes; Have a nice day full of funny coding ~MintMissy

  Marked as helpful

  1

  ---

  

  Ron Valiente•100

  @mochaaa18Posted almost 3 years ago

  @MintMissy I think that's a great idea. thanks a lot for this Mint! Have a great day.

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Also

  Page should contain a level-one heading , So ensure that the page contains only one h1 element. You can replace <h3 > by<h1 >(for this challenge ). Happy coding

  Marked as helpful

  0