Frontend Mentor - Profile card component solution CSS and HTML only

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 2 years ago

  Hi, Mikhail! 👋

  For the circles, I recommend showing them with pseudo-elements. You can see Grace's solution for your reference. Her solution does not require a media query to position the circles.

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

  Here are a few suggestions for improvements:

  • Alternative text should not describe the look of the picture: Do not describe what the picture looks like, i.e. "a graphic of bright blue bird" as the alternative text of the Twitter icon. Instead, describe what the image content is and what it does, such as "Twitter" in this case. In this case, the photo's alternative text should be the name of the person.
  • No empty elements: Remove the <header class="card__header"></header>. Then, use the <img> to show the background pattern of the card.
  • Each page must have one <h1>: The <h1> element is used to define the main heading of a page. In this case, replace <p class="card__content-name">Victor Crest</p> with <h1>.
  • Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

  I hope this helps. Happy coding! 👍

  10

  Marked as helpful
• 

  C4rlos•410

  @solracss

  Posted almost 2 years ago

  You can also fix bubbles to your card. Another way on doing this with pseudoelements. .content-section::before and .content-section::after. I was struggling 2 days with those bubbles. Overall did something similar to Grace solution, as it makes more logical sense to attach bubbles to background rather than to card.

  00