Responsive card component using vanilla css

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Omar!

  🎉 Congratulations on finishing this challenge! I have some feedback on this solution:

  • Accessibility
    • I would recommend refactoring this HTML. If you want your user to view the image, you should provide a link so that the user can see the image.

  <div class="card-img-preview">
    <img src="./images/image-equilibrium.jpg" alt="nft: equilibrium">
  <div>
    <img src="./images/icon-view.svg" alt="View image"/>
  </div>
  

  • Every page should have one h1 as an identifier and you should use the heading tag in chronological order.
  • Always wrap text content with meaningful tag (p). span and div should only be used for styling purposes only.
  • The alternative for the author's profile picture should be his/her name. In this case, it should be Jules Wyvern.
  • The below markup should not be a footer, it should be a figure with figcaption.

  <footer>
    <img class="card-avatar" alt="The author's profile picture" src="./images/image-avatar.png" />
    <p>Creation of <a href="#">Jules Wyvern</a></p>
  </footer>
  

  • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
  • Styling
    • I would recommend making the body element as the flexbox container to make the card perfectly in the middle of the page.
    • Use rem or sometimes em unit instead of px (especially for the body font size). Using px will not allow the users to control the size of the page based on their needs.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  1

  ---

  

  Omar M.•270

  @OmarMAttia7Posted almost 3 years ago

  @vanzasetia Thank you, this was really helpful. The original preview didn't have an h1 element can I add it and then make it visually hidden using css clip?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @hazel79 You should make the Equilibrium #3429 as h1 in this case. Also, you can't make the h3 or any heading as the child element of a tag.

  Marked as helpful

  1

  

  Omar M.•270

  @OmarMAttia7Posted almost 3 years ago

  @vanzasetia I see. Thanks a lot.

  0
• 

  símios enfermo•440

  @FernandoChurrosPosted almost 3 years ago

  put the "max-width" property on the element

  Marked as helpful

  1

  ---

  

  Omar M.•270

  @OmarMAttia7Posted almost 3 years ago

  @FernandoChurros Thank you, I centered it using flex and put max-width on it and it fixed the problem.

  0