Profile card using flexbox

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  Hi Matheus,

  Well done! :D

  I have checked your HTML structure, a few tips from me:

  • I'd recommend reading more about the alt text. You don't need to use words like picture or image, photo, icons in the alt text as it's already announced as being an image. You can easily type the name "Victor";
  • a few times you have used the span tag. IMO SPAN (and DIV) elements by themselves are generally considered to be semantically neutral. A good approach is to use semantic markup as much as appropriately possible, it all depends on the context (of course, I use the span but before it, I try to think about the other semantic tags). In your project I'd recommend to use paragraph for => followers, likes, photos.
  • 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.

  Semantic tags and attributes - their importance is important for accessibility. Aslo, if you want to learn about RWD, I can recommend Flexbox or Grid courses made by Wes Bos, they are for free:

  • flexBox;
  • grid;

  Finally, congrats! ** Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.

  Greetings :D

  20
• 

  Jane•1,040

  @janegca

  Posted over 4 years ago

  Hi Matheus, nice work. For a more responsive design, instead of hard coding sizes with pixels, convert them to rem units using 1 rem = 16 pixels. It also helps to set max-widths or min-widths rather than strict widths.

  Hope that helps.

  10