NFT Preview Card component using HTML,CSS,FLEXBOX

Community feedback

• 

  Tiago José•300

  @tiago-jv0Posted about 2 years ago

  Hello venkat, great job solving this challenge

  I saw your code and here are a few tips you can have a look :

  • An page should have at least 1 h1 tag to describe important content to web crawlers and users, probably it should be the title in this scenario
  • You could improve your SEO by using semantic landmark tags in you HTML like main section footer article header to indicate to the user in which part of the website they are.
  • Consider using BEM methodology as your CSS class naming convention, it will be widely used in your developer job as a frontend.
  • Every image on your page should have an alt attribute that describes the content inside the image, please improve the alt text of the images you used.
  • Take a look at CSS pre-processors like SCSS, it will improve your developer experience when writing css and alonside it will make your css file cleaner

  Good job, keep on working!!

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello VenkatSairam, congratulations for your new solution!

  👨‍💻 Here’s some tips to improve your solution code:

  1.Add transitions to make the interaction smoother while the element gets hovered, you can use a value like transition: all ease-in 0.5s.

  2.Its ever better to use relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

  3.Replace the div with <main> (every page should have a main landmark and also a main h1 heading)

  4.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  ✌️ I hope this helps you and happy coding!

  1