Profile card component. Only HTML and CSS.

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi,

  This looks good on mobile portrait, but breaks a little on landscape with the footer overlapping the card and the top of the card hitting the top of the screen. See if you can fix these small things

  Good job on the rest 👍

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  There are a few issues with your html at the moment. Here's a few tips that should help (they seem like small things but are really important for real websites when you need search engines and assistive tech to outline your webpage content correctly)

  • headings always need to go in order. It's nothing to do with their size in a design as that can be changes with css, just the meaning matters. H2s always follow h1
  • those numbers can't actually be headings anyway as they don't make sense on their own. 80k is not a heading for the word 'followers'. Instead the number and word need to be in the same meaningful element, with spans inside that element to style the number and word separately.
  • when you write alt text, never use words like 'image' or 'photo of'. The element is announced as an image anyway
  • background or decorative images that have no meaning like Card header background image should have their alt attribute left blank like alt="". That tells screenreaders they don't need to announce it.

  Hope these help you ☺

  Marked as helpful

  1

  

  Jesús Alarcón•215

  @AlarconJesusPosted over 3 years ago

  Hi, Thank you very much grace!, for taking your time and reading my code. I will take into account all your recommendations, I appreciate your feedback 💻🙂.

  0
• 

  Art•420

  @Art-wdtPosted over 3 years ago

  I love your job. I also recently completed this challenge

  I had problems with background-position But I liked your solution background-position: right 50vw bottom 50vh, left 50vw top 50vh;

  1