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 and CSS

@Ala161092

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


Hi Everyone,

It has taken me hours upon hours of frustration (mainly me bashing my head against the screen) butttt i think i have finally completed my first project! I would really appreciate if anyone can spare me a few minutes by looking through my code and giving me any tips/advice on how I can better improve my html and css?

I REALLY struggled with the background images and getting them into the right position, i'm not sure if my method was correct or if there was a better way of doing it, which i'm pretty sure there must be?

Anyway any tips/advice would be much appreciated - many thanks in advance!

Community feedback

Sarah 835

@sarahc-dev

Posted

Hey!

Good effort! Congrats on finishing it, and getting it uploaded!

I think it is better to use background-image in CSS for the background circles, rather than adding the images to the HTML, as it is purely decorative. You can size and position the images in CSS (in a similar way to what you have done), using background-size and background-position and it also allows you to add a media query (or queries) to change the size and positioning for smaller or larger screen sizes.

Hope that helps :)

1

@Ala161092

Posted

@sazzledazzle

Thank you so much for the feedback - didn’t even know you could add it to css! I know now that images used for decorative purposes can be added there - thanks again - much appreciated

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