@FluffyKas
Posted
Hey,
First of all, it looks great. I'm glad to hear you got some useful feedback and was able to tackle this challenge more easily! Some general tips - for this challenge and for the future ones:
There is a very easy way to place everything in the center - even vertically:
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Or you can do the same with grid and place-items center, as you prefer. Giving the body a min-height will make sure your card is centered vertically. This way you won't need to rely on %-s for margins. Defining margins with % isn't super reliable anyway, you'd do better with em, rem.
Getting units right: so apart from margins, generally it's best to use rem when you're uncertain what units you should use - like your card width (where you now use px). Px values shouldn't be used widely, apart from setting smaller things, like a border-radius or box-shadow.
Alt texts: really nice to see you paid attention to this. Just a note: for decorative images, you can leave alts blank - like the music icon here.
Semantic stuff: make sure to wrap everything in a main tag. Of course you can have other landmark elements, like header, footer, etc in your websites, but there very least you should use a main.
All in all, really well done!
Marked as helpful
@ucolinmee
Posted
@FluffyKas Hi thank you so much for taking the time to review my project and giving feedback! This is exactly what I needed because I have been getting confused about what's the best practice when it comes to using %-s, px, em and rem, so I'll be sure to implement your tips into my next challenge.
