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

HTML, CSS

Karthik SP 110

@karthisp

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


Any feedback on the code's design, would appreciated.

Community feedback

P
Grace 27,650

@grace-snow

Posted

Hi, looks good. Just try to fix the shadow so it looks like the design, it's not very nice at the moment

1

P
Grace 27,650

@grace-snow

Posted

Just had a look at the html and recommend you learn more about choosing semantic elements.

All of your content is headings at the moment, but this should have max one heading.

The stats-word pairs in particular need to be something more appropriate like

  • a table with the words in ths
  • a list, each pair in one list item
  • definition list

The alt text on the profile image needs rewriting too. Rather than alt="user image"> it should be the person's name. You don't need to ever write words like image or picture as it is already an image element.

I hope this is helpful ☺

1
Karthik SP 110

@karthisp

Posted

@grace-snow thanks for your feedback. It was really helpful. Will certainly go back and make these changes.

0

@Will-1-Am

Posted

Nice work. Something to look at would be the profile card sizing - the card can get very narrow if a browser is resized along its width. You should be able to prevent that from happening. The h2 and h3 headings don't really make sense as they have no children, so they could be replaced with something more appropriate. Additionally, h1 is not in use in the HTML, so h2 and h3 shouldn't be in use. I hope that helps and good luck with your coding!

1

Karthik SP 110

@karthisp

Posted

@Will-1-Am Thanks for the feedback. Will make the changes

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