Vanza Setia• 27,835
@vanzasetia
Posted
Hi, jcastro! 👋
For the fluid position of those circles, I recommend showing them as pseudo-elements. You can see Grace's solution for your reference.
Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution
I have some suggestions to improve your solution.
- Use
<div>: Do not use<article>or<section>for all content. Use<article>for an article such as blog post content. It is okay to use<div>to separate content for styling purposes. Also, those two elements have no meaning if they are not labeled properly using the ARIA attribute—WebAIM: HTML Semantics and Accessibility Cheat Sheet. - Use a list element: Use
<ul>for the statistic. Also, the number should not be a heading. - No extra element: Use the
<main>element as the wrapper instead of using<section class="wrapper">. - Do not specify default styling: Remove
width: 100%from the<body>styling. It is already the default styling.
I hope this helps. Happy coding! 👍
0
