Profile Card Using HTML and SCSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @AchmadRiyadi ,

  I have some suggestions regarding your solution:

  • Those 2 blobs images could be used as background value. This way, you won't have to create those 2 div.

  • Footer goes outside of main, not within it . So on this page, you would have a markup that looks something like this:

  <main>
  <footer>
  
  

  • In class="card__footer">, those stats need to be an unordered list<ul> with 3 list items. The number and word have to be read together to make sense so need to be in the same meaningful element(list item ). so only a span or maybestrongtag needs to wrap the numbers.

  • For <img src="./images/bg-pattern-card.svg" alt=""> decorative image, img tag should has empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. (even though it doesn't need to be in html ).

  • img src="./images/image-victor.jpg" alt=""the alternative text shouldn't be empty as it's an informative image. you can use the the avatar's name (Victor Crest). I would suggest to read more about alt text for informative and decorative images.

  • It's never a good practice to have font size in px.

  • You should use em and rem units .Both em and rem are flexible, scalable units . Using px won't allow the user to control the font size based on their needs.

  Hopefully this feedback helps

  1

  ---

  

  Achmad Riyadi•70

  @AchmadRiyadiPosted almost 3 years ago

  @PhoenixDev22 Thanks for the suggestions, I got new knowledge.

  1
• 

  Abdellah el aajjouri•190

  @abdellahelaajjouriPosted almost 3 years ago

  Hey men Good job working this challenge. You solutions looking very good to place the footer you can just use the margine property or give him positions absolut then change the placement where you want. Keep up with the good work

  1

  ---

  

  Achmad Riyadi•70

  @AchmadRiyadiPosted almost 3 years ago

  @abdellahelaajjouri Thank you, appreciate the solution man

  1