Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

nzcastilanโ€ข 40

@nzcastilan

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

@MelvinAguilar

Posted

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

@nzcastilan

Posted

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