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

Used lots of margins and padding

Monica 100

@monicamclaughlan

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


Am in my first few weeks of learning, but wanted to get responses on possibly a simpler way of formatting this without using quite so many classes. Any input appreciated.

Community feedback

P
Grace 27,650

@grace-snow

Posted

Hi Monica,

I'm afraid this doesn't work at all on mobile. And I can see purely from the code that this approach wouldn't work great for desktop either, sorry 😕

The main crux of the problem is using absolute units for everything,which results in a static layout that only looks right on your exact screen size + resolution.

Suggestions:

  • learn about relative units like % vh vw fr
  • learn a bit of flexbox (there's some great resources on the resources page to help with this
  • look into what alt text is for / how it works. (Much better to leave alt attributes blank for decorative images)
  • start with mobile layouts before moving on to larger screens - look into min-width media queries.
  • Make sure your html would make sense of just written as a document with no styles. (You can even turn styles off in the browser to preview!) eg. the numbers in your html would make no sense if read out on their own without their corresponding labels (like 'followers')

I hope that's helpful. Keep learning, and remember all this stuff takes time! ☺

1
Roman Filenko 3,335

@rfilenko

Posted

Hey Monica, nice try, but there some issues you can easily fix. First, add your your pattern images as background-image with css, this will fix positioning and overflow issues. And work on previous feedback.

Cheers, Roman

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