HTML CSS Positioning Background-Position

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Tiago!

  🎉 Congratulations on finishing this challenge! I have done this challenge, and yes, the bubbles were hard to be positioned correctly 😅. I would recommend looking at the ApplePieGiraffe's solution, he has done a great job on taking care of those bubbles. ​I have some feedback on this solution:

  • Accessibility
    • 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. In this case, all images are decorative only, except the profile picture.
    • For the profile picture, use his name as the alternative text. To learn more about images, read the tutorial from W3C WAI.
    • For the stats, the number should not be a heading. A heading tag is like a title in a document.
    • For the stats, I would recommend using ul and wrapping each item with li instead of using div. ​* Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Responsiveness
    • You don't need to specify how much height and width the card element. Let the content inside it control the height of the card and use max-width to limit the width of the card. By doing those two things, your card can shrink if needed.
    • For the height of the body element, it's the same as the card, let the content or element inside it control the height of the body element. The problem now, if you see your website on the mobile landscape (640px * 360px), the card is touching the top of the page (when it should be in the middle of the page).

  That's it! Hopefully, this is helpful!

  Marked as helpful

  2

  ---

  

  Tiago Costa Rebelo•180

  @tiagocostarebeloPosted almost 3 years ago

  @vanzasetia Thank you so much for your inputs and time. I've updated the solution with your inputs and it makes sense. Will keep them in mind for the next challenges. Thanks again.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @tiagocostarebelo You're welcome! I notice that you put the word photo as the alternative text of the Victor Crest image. You don't need to put word, image, photo, picture, since you're already using img tag.

  Now the screen reader will pronounce it as the following: "Victor Crest photo, image"

  <img src="./images/image-victor.jpg" alt="Victor Crest photo">
  

  Marked as helpful

  1
• Account deleted

  Good job!, some observations:

  • I would tell you not to use so many div's, better use semantic tags.
  • The card would be an article or section
  • Can you see a thin cyan border on the avatar? You remove it by placing a background-color: white to the avatar container
  • If you think about it the stats are a list with three items, then I would use ul> li * 3
  • I would give a border-top to the list with the line color and thus I would not need the hr tag

  Have fun coding 😉

  Marked as helpful

  2

  ---

  

  Tiago Costa Rebelo•180

  @tiagocostarebeloPosted almost 3 years ago

  @Irs-mp thank you for your observations and your time. Thank you very much. I've updated the solution with your suggestions and they make perfect sense.

  0