Skip to content
Submitted almost 2 years ago

Profile Card Component

#accessibility#sass/scss
Francisco Carrillo•5,540
@frank-itachi
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

Hi guys Frank Itachi here 👋!

I managed to complete another challenge. Any comment and/or suggestion is welcome.

Happy <coding /> 😎!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Francisco Carrillo! 👋

    The number statistics should not be <h2> elements. Also, the statistic categories can be just <span> since the text content has been wrapped by <li> elements.

    I recommend making the background patterns pseudo-elements of the <body> element. This way, you don't need to use media queries to adjust their positioning. I suggest taking a look at Grace's solution as an example.

    Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution

    Remove width and height from the <main>. It only needs a max-width to prevent it from getting too large. For the height, let the content inside it controls the height of it. Even better, make it as the card element instead of using <article> tag.

    body main {
  /* width: clamp(330px, 85vw, 20% + 60px); */
  /* height: clamp(350px, 51.5vh, 30% + 100px); */
  max-width: 300px;
  width: 100%;
}

    Also for the CSS selector, you should single-class selector or just select the main element. There is no need to include the body selector.

    You should not nest selectors unnecessarily. Remember to keep the CSS specificity as low and flat as possible.

    I hope you find this useful. Have fun coding! 😄

    0
    Francisco Carrillo•5,540
    @frank-itachiPosted almost 2 years ago

    @vanzasetia

    100% agree bro. Thank you for the feedback.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @frank-itachi

    No problem! 👍

    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