Responsive Profile Card using HTML, CSS, and Google Fonts

Community feedback

• 

  geomydas•1,440

  @geomydasPosted about 1 month ago

  1. use a css reset
  2. don't use the global selector for everything. see why
  3. replace the .container div with a main tag instead. more info can be found here
  4. never ever set font-sizes and typography-related properties in px. see why
  5. wrap the social-links inside a list item. put all of the list items in a list. pretty self-explanatory to see why you would use lists for this. applies to other stuff too but quite a common pattern indeed.
  6. the image should have better alt text. profile picture describes nothing and you can use "Close-up image of [name]". sometimes you dont need to set an alt text to it as it is just purely decorative
  7. consider self hosting your fonts for better performance. using google fonts is slower and worse for privacy as it violates gdpr laws. it may not be an issue for this site but on larger, enterprise websites you can get sued for that.
  8. avoid descendant selectors if possible as it increases the specificity which makes your css harder to override in the long run. for exampl .social-links .btn:hover is an example of descendant selectors
  9. take a look at the bem methodology
  10. use min-height on the body instead of height. try using it on smaller devices and you can see that the content gets cut off and you are unable to scroll
  11. the .container div in your css does nothing at all. it is already being centered by the body. i don't see why you would need to use flex properties here. remove the flex properties and merge the styles with your .profile-card element. this doesn't need a media query at all. you can just use padding instead of centering the element in .container

  Marked as helpful

  1
• 

  P

  Kamran Kiani•1,280

  @kaamiikPosted about 1 month ago

  Hi. Congrats for doing this challenge. I have some notes I wanna mention:

  1. I think It's better to add a body font-size to your body in the CSS and with rem then add other font-sizes for headings and ... also in rem too. You are now saying with * that every element have a 14px font-size that is not true and is not needed.

  2. Using min-height: 100vh; is better to use because 100vh means 100% of the viewport height, if the content is bigger it will overflow. You should rather use min-height: 100vh, it has a minimum dimension of 100vh but can grow as needed.

  3. Headings by default have bold font-weight and you can delete font-weight: 700 from your css.

  4. For the link items, You can use ul with li for each link. It's more semantic than using div that is not semantic. Semantic tags is better for accessibility and make your page more robust and clean.

  Marked as helpful

  0