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

mobile-first profile-card-component-main

scary developerā€¢ 155

@snake325

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


Hi guys this is my second project on this website I request all the senior developers pls tell me where I did mistake because it will help me a lot pls give me your feedback because your one feedback will help me and tell me what should I improve in my skills

Community feedback

P
Graceā€¢ 27,710

@grace-snow

Posted

Hi errr scary(?)

There's a lot of scroll going on with this at the moment, I think because you have those circle images in the html instead of background images. That's fine to do, but you need to hide the overflow while still making sure your solution works on mobile in portrait and landscape.

If you do include decorative / meaningless images in the html, it's important to leave the alt attribute empty not write things like svg img. That will be read out by assistive technology.

Other points for improvement would be :

  • indent your code consistently - its so hard to read and review when this isn't done and essential when you start working with others
  • don't wrap everything in divs. Only do that when it's essential to acheive a layout.
  • the html tags used for the stats need rethinking. 80k doesn't make sense as a heading on its own so can't be in a heading tag. Instead use a list item or paragraph to wrap the number and label together, and use spans inside to style them differently

Here is a link to my solution in case it helps you.

Keep on coding ā˜ŗ

0

scary developerā€¢ 155

@snake325

Posted

@grace-snow

Thank you so much for your feedback and when I share solution on this website I only wait for your feedback because you tell me my mistakes like a teacher Next time I will not do these kind of mistakes Pls always give a feedback on my projects ...................again Thank You so much šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™šŸ™

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