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

@Mattvp21

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


Revised version. Still open to any feedback.

Community feedback

P
Grace 27,950

@grace-snow

Posted

Hi Matt On mobile I think you need to resize and reposition the bg images. Maybe hide overflow too as I can scroll offscreen in both axis/directions at the moment.

Looking at the html I have 2 suggestions:

  • leave some of those alt attributes empty so assistive tech knows to skip over them if they're not meaningful, otherwise add much clearer descriptions that would make sense if you couldn't see the image.
  • in your table markup, the followers etc would have to be the <th> elements semantically. 80k doesn't make sense as a heading, but followers does. You can still have them in that order, or you can use css to reverse the rows, but the bottom row (as it stands at the moment) should be the table headers.

Hope all that's helpful, keep on coding ☺

2

@Mattvp21

Posted

Hi @grace-snow,

Thanks for the suggestion on the tables. I just turned the top row into table data lines and adjusted the font in CSS. Looks great. Working on the bubbles. I just started a bootcamp a couple of weeks ago and I don't quite have the mobile side down. Is there anything I need besides VsCode to make it optimal on mobile? Thanks again for your help!

1
P
Grace 27,950

@grace-snow

Posted

Nope nothing in particular, just use dev tools a lot (I like to have dev tools on the side so it's easier to frow/shrink the viewport width.

You'll find all easier once you start building from mobile design first and working up from there. That habit builds over time

0
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hey, Matthew Van Pelt! 👋

Good effort on this challenge! 👍

I suggest using CSS background images (or even pseudo-elements) to add and position the background SVGs in this challenge. That'll keep you from having any overflow issues and leave your HTML a little cleaner (it's probably also a little easier to position the background SVGs, I think). 😉

Keep coding (and happy coding, too)! 😁

1

@Mattvp21

Posted

@ApplePieGiraffe Using the background image in CSS to position helped. For the overflow I just set it to hidden. Thanks for the tip!

0

@DoctorDerek

Posted

The design has some more padding for those elements inside

1

@Mattvp21

Posted

Hi Derek,

Added 20px padding-top. Looks much better! Thanks for your help!

0

@DoctorDerek

Posted

@Mattvp21 No problem! Don't forget to upvote my answer 😉

I can't actually upvote yours until you upvote mine 😅

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