NFT preview card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Greeting karamthedev , Congratulation on completing an another project . I have some suggestion:

  • Wrap the body content in <main >tag .Within body sits main and footer.

  • Don't use <span> for meaningful content <span class="cycanColor">0.041ETH</span> and<span>3 days left</span>you should have used <p> .

  • 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 for this one avatar 's alt , it needs to be a brief description .

  • The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

  • 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>)

  • You can use unordered list <ul> to wrap class="days" and in each list item would have <img > and <p>.

  • Always use classes to reference all the elements that you want to style. Don't use nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

  • Never use pixel for font-size.

  • Use a css reset at the start, You can add

  *{
      margin:0;      
      padding: 0;
      box-sizing: border-box;/*border-box tells the browser to account for any border and padding in the values you specify for an element's width and height.  */
  }
  

  I really hope this feedback helps . happy and keep coding.

  Marked as helpful

  1

  ---

  

  pranav•120

  @PrAnAvViNaYaKjAdHaVPosted almost 3 years ago

  @PhoenixDev22 Thanks for your feedback, I carry this knowledge for future projects 😄😃😃

  1
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  Hi there,

  Good job on this one, it looks pretty close! I have a few suggesting for you:

  1. You cannot assign invalid aria roles to elements. There's a selection of valid roles to choose from and from what I understand you can't just come up with one yourself. Giving something a role of container doesn't carry much meaning in itself anyway :) Give it a class of container if it's for styling purposes only, that's enough. Would be even better if instead of giving roles, you used semantic markup where you can! For example, your mainContainer div could be easily swapped with main.

  2. Alt texts: reading this article will help you a lot! I'd also like to mention ALL images, regardless of their purpose must have an alt text. If they're decorative, leave it empty, give it an aria-hidden="true".

  3. Check your spelling please, there are some typos in the text :)

  4. The text "Jules Wyvern" is probably a link to his profile so instead of just giving it a hover, it could be wrapped in an <a> tag.

  Marked as helpful

  1

  ---

  

  pranav•120

  @PrAnAvViNaYaKjAdHaVPosted almost 3 years ago

  @FluffyKas Thanks for your feedback, it's going to help me a lot I also make changes about the main class,<a> tag update and that typo also I update that and really thanks for checking my solution 🙂🙂🙂🙂

  0
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @PrAnAvViNaYaKjAdHaV ~

  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.
  • Image tags must have alt attributes as standard.

  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

  ---

  

  pranav•120

  @PrAnAvViNaYaKjAdHaVPosted almost 3 years ago

  @tymren608 Thanks for your feedback that help me to learn about the structure of the project I check your project also that was awesome 🙂🙂🙂🙂🙂

  0