Submitted over 2 years ago

Profile card component - Grid, Flexbox, ::before, ::after

Juan Gomez• 220

@newbpydev

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my solution to the Profile card component challenge. It is a simple card that shows the image, name, age, city, and stats of a user. I practiced by using the ::before and ::after pseudo-elements.

Community feedback

Naveen Gumaste• 10,480

@NaveenGumaste

Posted over 2 years ago

Hay ! Juan Gomez Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body <main class="container"></main>

-> Always use h1 first and then h2, h3 and so on

-> Learn more on accessibility issues

If this comment helps you then pls mark it as helpful!

Have a good day and keep coding 👍!

Marked as helpful

Juan Gomez• 220

@newbpydev

Posted over 2 years ago

@Crazimonk I thought about this issue, but since we are doing a component only I thought that I might use h2 or h3 but then it was giving me a problem with the h1 not being present on the code, I will try it out on the next project. Thanks

Clément Creusat• 1,675

@ccreusat

Posted over 2 years ago

Hi !!

nice job!

Consider using a <ul> <li> list for the user's stats. It looks better to me

Marked as helpful

Juan Gomez• 220

@newbpydev

Posted over 2 years ago

@ccreusat pretty interesting observation, I didn't even think that should be an option but thinking about it can work out perfectly, I didn't like the fact of the tags that I used, it was a little crowded and this way the ul will also keep things all grouped together, thanks

Clément Creusat• 1,675

@ccreusat

Posted over 2 years ago

@newbpydev you're welcome

Old• 6,240

@Old1337

Posted over 2 years ago

Hello there! 👋

Congratulations on finishing your challenge! 🎉

I have some feedback on this solution:

Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools) like for example use h1 first then h2 etc.

*if my solution has helped you do not forget to mark this as helpful!

Marked as helpful

Juan Gomez• 220

@newbpydev

Posted over 2 years ago

@Old1337 Thanks, I kept wondering about this issue for some time, I think that I kept an h1 in the HTML but then hid it but next time I will use the main heading of the component as an h1. thanks

Please log in to post a comment

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