@geomydas
Posted
- use a css reset
- don't use the global selector for everything. see why
- replace the
.container
div with a main tag instead. more info can be found here - never ever set font-sizes and typography-related properties in px. see why
- 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.
- 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
- 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.
- 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 - take a look at the bem methodology
- 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
- 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