Skip to content
Submitted over 1 year ago

Profile card component

Erick Armando Sánchez Flores•80
@esanchez2898
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

Community feedback

  • Account deleted

    Hi Erick

    Well done on completing the challenge

    You should not <div> so much and use more semantic HTML. HTML landmarks are important for adding structure to your page and landmarks such as <header>, <main>, <nav> and <footer> aid navigation in assistive technologies such as screen readers and for keyboard accessibility. You should wrap your markup in <main> , if you decide to keep the attribution in future wrap it in a <footer> element.

    Pages must have a level one heading <h1> and you must not skip heading levels as in you cannot go from <h2> to <h4>.

    I do not think there is a need to have a wrapper and a container. The container styles could just as easily been put in the wrapper. It seems an unnecessary duplication.

    As you have made <body> a flex container, you can use justify-content: center along with align-items: center to center container and not use margin: 0 auto;.

    hope this helps

    Happy coding.

    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