Profile Card Component using HTML and CSS

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Rodrigo;

  Well done! Congrats.

  I've just checked your HTML structure and preview site by the inspector. A few tips from me:

  • you didn't use the h1 tag, but IMO you can, even with the class hidden sr-only for the screen readers (accessibility it is a very important subject);
  • I am thinking about h2 tag for these numbers; IMO it is not necessary but maybe I can be wrong;
  • I'd recommend learning about semantic tags (why they matter) or how to write meaningful alt text. Divs are semantically inert elements — elements that don’t really do or say anything. "Semantic elements" are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear what they're for, what purpose they serve in the document.
  • inside of the alt text you can simply type just the name without image, because the tag img indicates that this is a picture.
  • the hr tag is not necessary here (try to do without it);
  • the circles are a bit tricky in this challenge: I have used pseudo-elements, position absolute, vw and vh, background url, transform translate and @media (in your solution they are not very stable on different devices);

  That's it from me. Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  3
• 

  Amir Jacobs•165

  @Amir-JacobsPosted almost 4 years ago

  Hey Rodrigo,

  I've taken a quick look and I noticed the following:

  • Instead of width: 375px I'd use width: 100%; max-width: 375px as this helps with responsive.
  • The blue background pattern images don't show up on mobile.
  • I'd add a margin to the sides of the page on mobile, so that the card doesn't touch the edges. Something like 5px to 15px should be perfect.
  • You could use the BEM method for your CSS. Not really necessary here as it's pretty clear, but I'd look into it nonetheless.

  Your code looks clean. Have a nice day. 😊

  3

  ---

  

  Rodrigo Gamboa•10

  @RodrigoGamboaPosted almost 4 years ago

  Hi Amir,

  Thanks for your clear feedback. I will fix how the page looks on mobile and definitely look into the BEM method and apply it to my CSS, I was wondering how to write structured CSS, so thanks for mention it :)

  Have a nice day.

  0