Skip to content
Submitted over 4 years ago

Profile Card (HTLM, CSS)

Lucas Laino•70
@l-laino
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, I'm trying to get serious about learning web development. There are some things that I'd like to do better in the viewport, it just doesn't look right on mobile. Should I start a site from mobile and then scale it to a browser? I'd like to hear (read) everything that I could do better. Thanks for the attention.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Samyr Oliveira Ribeiro•215
    @SamyrOR

    Hello @l-laino, its look good at all, but somethings a think can be better, for best pratices you could put all colors that you will use, on variables of css, putting this on :root {}, this help in the maintence of the code (possible to put common sizes too and other things), matching all colors with the recived style guide , and for the bottom status under the numbers, you could space it with "letter-spacing" property.

    At the mobile, i would add more margin on top to center the card, and match the font-sizes to better view with media queries.

    The Mobile First aprochion, is a thing that i'm learning and loving it, you can code the entire site to mobile, and then with media queries just scale, this is much more easier, confortable than just try to make it fit on mobile, you could give a try, and look for mobile first.

    I expect that i have helped in something.

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hello there, Lucas Laino! 👋

    I just wanted to say, congratulations on completing your first Frontend Mentor challenge! 🎉 Well done on this one! 👍

    Simply follow the helpful suggestions given above, and I think you'll be good to go! 👍

    Keep coding (and happy coding, too)! 😁

  • Abhik•4,820
    @abhik-b

    Hi Lucas, You have done a great job on this challenge , background circles are responsive and your card looks cool!

    I guess if you reduce the font-size a bit and try mobile first approach (which I'm told is the industry best practice) then your solution would have been amazing !!

    Happy coding 😇 and Keep contributing these Great solutions 🚀

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