This is great for 1 week in, well done! Here are my tips to improve:
- Instead of a large margin-top on your card, just have a little padding on the outer wrapper (in this case the body element) so content can't hit the sides. Give that body a min-height of 100vh and the card will be centered on the scene
- Don't forget details like box shadow on the card. There are some good box shadow generators out there that can help you get it looking right
- On card background, you don't need width. It's a block element already. Instead of height in percent, try a min-height in rem
- Similar for the card. You don't need to give it width or height. It will be more easily responsive if you give it width 100%, and a max-width of whatever in px/rem. That will let it shrink down for small phones. Height is not needed.
- Alt text is a good effort on Victor's image, but waaaay too long. Just Victor Crest is fine. It's an image of him, that's all the info we need to know.
- If you want to horizontally center with margin, you can do that with margin left and right set to auto rather than a pixel value
- You're relying on default margins on elements for vertical spacing at the moment. That means your solution will look different in different browsers. Consider adding a modern css reset to remove all those defaults, then add vertical margins to elements as needed (top tip - it's often more manageable if you add margins in one direction mainly, like margin top on each paragraph, heading etc, rather than setting both directions)
- The stats section needs semantic HTML adding. You never want to have text in spans/divs alone. Try swapping
container-ratesfor a ul, then each child within it can be an li. - I think you've set align items and justify content the wrong way around on that container-rates element too - maybe check that.
- remove the
brs. Use CSS to set elements to display block instead - Add text align center to the stats. I'd also remove margin from them or at the very least use the same class on all three of them.
Keep on going - that's loads of suggestions for you to be looking up 😂. Just take your time and learn step by step. Good luck 👍
Marked as helpful
@ellienndea
Posted
@grace-snow Hi Grace, thank you so much for all your tips! 🥰 I really appreciate this and am looking forward to improve my code! One question on the alt-attribute: I thought that maybe visually impaired people would appreciate a little more info than that what is already implied by the elements. On the other hand I can also imagine screen reader users being annoyed by too long alt texts. Is there a rule of thumb how long alt text should be? Thank you again! 🤗 Happy coding, Linda
@ellienndea it depends on the type of content the image is conveying. Like if this was a photo of Victor on holiday or something, or modelling, or anything where the image is a core part of the content that needs to convey richer meaning - then give it a long description. But this is just a profile avatar. All we need to know is its his photo ☺
@ellienndea
Posted
@grace-snow Sounds reasonable/sensible. Well meant is not always good. 😅 Thank you so much again! 😊
