Skip to content
Submitted almost 2 years ago

Profile Card

nzcastilan•40
@nzcastilan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my 3rd challenge but it seems the hardest, I feel my code are not optimized enough. for e.g. it was difficult for me to align the Avatar and other text to center and I've been using a lot of margin code. Just wondering if theres a better way to center align those stuff without manually doing a margin.:) Thanks!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    Metadata 🗃️:

    • The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

      You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️

    CSS Reset 🔄:

    I'm sorry I can't help you much with the margins, I can only advise you to start with a CSS reset because each element like paragraphs and h3 have a default margin that takes up space.

    • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

      CSS resets that are widely used:

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    2
    nzcastilan•40
    @nzcastilanPosted almost 2 years ago

    Thanks @MelvinAguilar I'll have a look at those articles and refactor my code :)

    0

Please log in to post a comment

Log in with GitHub

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