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

Profile card using HTML, CSS, Bootstrap rows and columns, card

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


This is my second attempt after some feedback from my first attempt. Still very early stages in learning, so all feedback is welcome.

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hey, Monica! 👋

Great to hear you've completed your second challenge! Good effort on this one! 👏

I suggest using CSS background images to add and position the background SVGs to your page. Doing so is easier and more intuitive and will keep your HTML cleaner. It should also get rid of the current overflow issue of the bottom-right background SVG, which is creating a horizontal scroll bar along the bottom of the page. Here's a helpful article that can help you get started with that (scroll down to the backgrounds sections).

I also suggest using only one or two media queries for this challenge since nothing much (besides the position of the background SVGs, perhaps) changes from the desktop to mobile layouts.

I think you can use flexbox to center the card component in the viewport (it's often easier and more foolproof). 😉

Keep coding (and happy coding, too)! 😁

0

Monica 100

@monicamclaughlan

Posted

Thank you so much for this feedback, I will read the article to get more of a handle on background-images. Also been learning more about flexbox to start utilizing that as it seems very helpful for page layout. Thank you again for taking the time to give this advice and resources!

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