profile card component, using : css, html

Community feedback

• 

  Ken•935

  @kenreibmanPosted almost 3 years ago

  The card sizing looks great!

  I suggest you add some padding to the left and right for card_footer to have the spacing closer.

  I would also change the font size and font weight of certain text and also align certain items center to more accurately match the original design.

  To clear the accessibility issues I would:

  • change your <div class="container"> to <main class="container>

  I would also do the same for the attribution as well by either:

  • changing the div to footer or wrapping the entire div with a footer tag.
  • Although this is supposed to be a small component of a larger document, I see that you have not used a heading tag in your document. Always have an h1 in your document that increases in chronological order.

  Don't forget to generate a new report after you make those changes!

  Since bg-pattern-bottom.svg and bg-pattern-top.svg are decorations, I would change your HTML to:

  <img src="./images/bg-pattern-bottom.svg" alt="" aria-hidden="true">
  <img src="./images/bg-pattern-top.svg" alt="" aria-hidden="true">
  

  This is for screen readers, which should be taken into account for best practice. You can read more about aria-hidden here

  I hope this helps! Keep it up :)

  Marked as helpful

  1

  ---

  

  P

  Saepul Malik (Malik)•120

  @saepulmalik27Posted almost 3 years ago

  @lmaoken thanks bro, very detail and very helpful

  0
• 

  hassan ABD•865

  @hassanabd22Posted almost 3 years ago

  Good Job Saepul Malikو But you need some small adjustments, such as making the title bold and the numbers as well

  1
• 

  Zineb Boutaa•750

  @zineb-BouPosted almost 3 years ago

  Hi there, here are some notes that may help you to improve your code even better,

  -There is a huge horizontal overflow, check the background images I think this is what makes the background have this huge overflow.

  -Avoid putting an explicit height, I noticed you are giving your card a height, this won't allow it to shrink to fit the content inside when it grows.

  -You can hide the background images from the screen reader since they are just for decoration using aria-hidden: true

  1