Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card - Solution

Nathan Weberβ€’ 80

@WorldWideWeb-er

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Understanding the background were images was difficult to understand. Eventually found 'background-image' with all its properties was the intended solution.

Are there any other handy ways to display images in the background / their properties to look into?

Community feedback

T
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hi there, Nathan Weber! πŸ‘‹

Good effort on this challenge! πŸ‘

I think using CSS background images to add the background shapes in this challenge is a good way to go. You can experiment with using viewport/relative units to position the background shapes so that they more or less stay in their place when the screen is resized, as I tried to in my solution. πŸ˜…

Besides that, one or two things I suggest are,

  • Setting the alt text for background image in the top of the card to be an empty string so that it will be ignored by screen readers. That’s because that element isn’t necessary or important to the content of the page and as a result doesn’t need to be read by screen readers.
  • Making sure the avatar image doesn't cover up the text below it (as it is doing on my screen in Google Chrome).
  • Using the ul and li tags for the list of stats at the bottom of the card to make your HTML a little more semantic! πŸ˜‰

Hope you find these suggestions helpful. 😊

Keep coding (and happy coding, too)! 😁

0

Please log in to post a comment

Log in with GitHub
Discord logo

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