Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card component solution

@etiennedesfontaines

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


Hey Everyone 👋

I found this challenge far more difficult than I anticipated, but I learned a lot as a result.

My biggest challenge was making those pesky background SVG bubbles responsive. I persisted with media queries and am happy with my result, but I realized by the sheer number of media queries required that there must be a better way...

And wouldn't you know it, there is! 
@ApplePieGiraffe's solution cleverly utilised a combination of viewport width, height units and percentages to make the SVGs subtly change their position when the screen is resized. 
Stumbling upon it after all my media query struggles was like unexpectedly kicking a bar of gold - it hurt, but I’m so grateful for the lesson! 😂



Here’s to smoother, more concise responsive code in the future. 



Hi ho, hi ho, to learn some more I go..." 🎶

Happy coding all!

Community feedback

@shashreesamuel

Posted

Hey good job completing this challenge.

Keep up the good work

Your solution looks great however I think that your card is missing a subtle box-shadow using box-shadow.

In terms of your accessibility issues simply wrap all your content between main tags.

I hope this helps

Cheers Happy coding 👍

0

@etiennedesfontaines

Posted

@TheCoderGuru Hi Shashree, Thank you for your feedback.

My card does however already have a box-shadow applied.

As for the accessibility issues, I feel apprehensive to wrap the background SVG images in my main tag, because semantically I do not think they warrant being represented by main.

As far as I've learned, <main> represents the dominant content of the body of a document. Its contents should directly expand upon the central topic of a document and be unique to that document.

In the case of this challenge, in my assessment, the central functionality is the profile card. I do not think the background beyond the actual profile card warrants being included in main.

Please share if my understanding is limited? I am always looking to learn more...

0

@etiennedesfontaines

Posted

p.s I managed to solve the accessibility issues by adding an aria role attribute with a value of "presentation" to the SVG's. So I think my reasoning re semantic HTML was sound... 🤷‍♂️

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