artemkotko14• 30
@artemkotko14
Posted
- Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
- This solution currently overflows my screen at the top so there's some content cut off that I can't reach. This card mustn't have a height. That's important to understand that you shouldn't limit the height of elements that contain text. Let the browser do it's job and decide what height is needed based on the content and spacings inside. As soon as you limit the height the card has the potential to break, like if an author changes the amount of text in there or a user changes their default text size or translates the site into another language.
- The card shouldn't have a width either. Give it a max width in rem instead. That way, it can shrink narrower if it ever needs to like on a small screen.
- The card doesn't have hover or focus states, which was the main challange here. If you need help with that you can read more about it here:
- focus state
- [hover](https://www.w3schools.com/cssref/sel_hover.php
- Font size shouldn't ever be in pixels. Use rem instead.
- Your h1 shouldn't be centered. Check again at the original design.
- I don't see
font-weightandfont-sizeproperties on most of your elements. - Your button is missing a
border-radius
0
