@vanzasetia
Posted
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
orem
instead ofpx
for font sizes. Never usepx
unit. Relative units such asrem
andem
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! 👍
Marked as helpful