Design comparison
Solution retrospective
Hi, Frontend Mentor community! That's my solution for the Profile Card Component Challenge.
Following the challenge, I tried to do the best I could within what I know and with a little research, but I believe I can improve the code in the future.
I'm studying HTML and CSS with these challenges and would like some feedback to know what you guys think and what I can improve in my code.
Any suggestions? :)
Community feedback
- @correlucasPosted about 2 years ago
Hey Leo, here's one tip about responsiveness
When the card gets stretched the
stats
section gets a little bit too near and not fitting good together, something you can do to improve the card responsiveness is create a media query for thestats section
and make each stat number stay in a different row aftermax-width: 350px
using a media query, here's the code for that:@media (max-width: 350px) { .stats { display: flex; justify-content: center; flex-direction: column; gap: 20px; } }
I hope this helps, happy coding!
Marked as helpful1@leozizzPosted about 2 years agoHey @correlucas, thanks a lot for the tip!
I applied it to the code with some fixes and actually got a nicer result on smaller screens.
Thank you so much for the feedback and for taking the time to review my code!
0 - @ghostribPosted about 2 years ago
Your solution looks really good. I have a couple thoughts.
-
Your HTML starts with an h3 tag instead of an h1. This can cause accessibility issues for people who use screen readers. Generally, you need to have a single h1 tag and then h2 tags after that. Any h3 tags should go after h2 tags. You can style them however you like but the order of heading elements is pretty important for having semantically meaningful HTML.
-
Your css looks really good. Just be aware that setting height to 100vh sometimes won't behave the way you want it to with mobile devices. Not an issue in this project, just something to be aware of.
-
I think box-shadow is pretty standard now so I'm not sure if there's any need for -webkit-box-shadow. But it doesn't hurt to add it of course if you want to support older browsers.
Nice work!
Marked as helpful1@leozizzPosted about 2 years agoHey @ghostrib! Thank you very much for the feedback, I have already applied the suggested fixes and everything seems ok now.
-
Thanks for letting me know, I ended up leaving the h3 tags without noticing that they weren't in the correct order.
-
Thanks for the tip, I'm delving into CSS and will take note of the advice.
-
I think the same, but in this case I preferred to leave the -webkit just in case.
Once again, thank you very much for your time analyzing my code and for the tips!
1 -
Please log in to post a comment
Log in with GitHubJoin 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