Responsive profile card – vanilla HTML and CSS

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Maria!

  Well done! :D

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

  • you have used the main semantic tag here, that's really good but also if you will check it out - we still got lots of divs. Divs are semantically inert elements — elements that don’t really do or say anything. That's a reason why it is necessary to get to know well the semantic tags.
  • in your project is a good occasion to create the h1 tag instead of the paragraph;
  • you can remove lots of divs when you will use the unordered list and list item ul > li;
  • it is not necessary to use br and hr tags;
  • 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 img.

  In the end, I can recommend MDN and W3C.

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

  Greetings :D

  4
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Maria! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice work on this challenge! Your solution looks good! 👍

  I suggest,

  • Adding overflow-x: hidden to the body (or something similar) to prevent a horizontal scroll bar from appearing along the bottom of the page.
  • Giving the card component a fixed width (or perhaps a max-width) so that it doesn't become too squished when the width of the page decreases.
  • As theoprocreate mentioned, you have quite a few breakpoints on this page. You really only need one or two to perhaps change the position of the background circles in this challenge. (A tip—if you use viewport units to position the background circles in this challenge, they won't move around when the page is resized). 😉

  Keep coding (and happy coding, too)! 😁

  And happy holidays! 🎄

  2

  ---

  

  Maria•290

  @itsfedorukPosted almost 4 years ago

  hey @ApplePieGiraffe! thank you so much for all the feedback and advice – it helped a lot to improve the project, make it less "jumpy" and squished, and have only a relevant breakpoint :) very happy with the project now.

  happy holidays 🎄

  0
• 

  Cramento•185

  @theoprocreatePosted almost 4 years ago

  Hey ! Your html efficient. Css looks too but maybe you shouldn't use so many breakpoints ... Continue like that ! It's overall very good :)

  1

  ---

  

  Maria•290

  @itsfedorukPosted almost 4 years ago

  @theoprocreate ah thank you, appreciate it! Noted :)

  1