Submitted about 4 years ago

Profile-card

@AdamCodes42

A solution to the Profile card component challenge

Solution retrospective

This Challenge looked very easy at the first but as a beginner when I started this challenge I came across the background elements which made it difficult to use flex box and also had to use negatives values. My code Need a review from some expert I may have messed up 😅.But learned new things too.

Code

Please log in to post a comment

Community feedback

Faris P•2,810
@FarisPalayi
Posted about 4 years ago
Good work on this one👍
- About positioning the background image, using CSS background-image property could make things much easier, and also it is more flexible with the help of related properties like background-position and background-size. Or you could use a CSS pseudo-elements like ::before or ::after for this.
- Also, those images are purely decorative, so set the alt tag to empty alt="", so that screen readers and other assistive devices can ignore them.
- Victor's image's alt text shouldn't be "profile-img", it should be something descriptive like Victor's name or something like that.
- Furthermore, try to clear the issues in the reports section if you can.
I suggest you to take a look at these articles if you can:
- HTML: A good basis for accessibility
- Semantic HTML5 Elements Explained
I'm not at all an expert in these things, so, do your own research and if there are mistakes on my part, let me know😀

Have fun coding✨
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord