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

abelsilva2407β€’ 10

@abelsilva2407

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


I know this is super messy. I just don't know what the typical thought process is so I just brute forced my way through. Any kind of recommendation is appreciated.

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hey there, abelsilva2407! πŸ‘‹

Congratulations on completing your first Frontend Mentor challenge! πŸŽ‰ Nice job on this one! πŸ‘

If you do end up using CSS background images to add the background images to this solution, you can use viewport units to position the background images, and they'll more or less remain in their place when the screen is resized! πŸ˜‰

Keep coding (and happy coding, too)! 😁

2
Aldair Avalosβ€’ 50

@AMLO-Bot

Posted

Nice Work boi! 😁, here are a few suggestions to improve your work as a developer.

Accessibilty: Try filling the alt attribute in img tags, this way any person using a screenreader device, think of visual disabilty persons, would have a short description about the images posted on your site. Swap px to rem o em units for font-size, this will allow users to change their browser font size settings freely.

For the background images i would recommend you to check the css property background-image: url(./YOUR_PATH/YOUR_IMAGE.jpg); This property will surely come in handy for other challenges in frontendmentor. Check more info in the links below:

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

https://developer.mozilla.org/es/docs/Web/CSS/background-image

Keep up with the hard work. πŸ˜‰

2
Roc Tanweerβ€’ 2,500

@RocTanweer

Posted

Hello πŸ‘‹ I struggled a lot to make this πŸ˜… There are a lot to learn but I will tell you one thing if you allow me...

You can set two background together and position them wherever you like...

If you can research on internet on your own, then go ahead, if not then review my code on same project...

If anything confuses you then lemmi know

Hope it helps ☺️

1

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