Design comparison
Solution retrospective
Any feedback is welcome
Community feedback
- @TagviPosted almost 3 years ago
Hello Tymur, The first issue is with accessibility, the font size is too small for most users. Second one is that you could use the
<main>
tag for semantic purposes. Third one is with selectors, you don't have to use classes to select something like:<div class="social-item"> <p class="number">1.4K</p> <span class="text">Photos</span> </div>
you can just use
<div class="social-item"> <p>1.4K</p> <span>Photos</span> </div>
p { /* whatever */ } span { /* whatever */ }
So it's not really useful. You could also turn the
span
into ap
and use:first-child
and:not(:first-child)
pseudo-selectors. Fourth issue is with giving each divwidth: calc(100% / 3)
. While the easiest way is to just use 100% width on the parent container andjustify-conent: space-between
which will put the remaining space in between elements. You can also use thegap
property if you want to keep a gap between elements when there is no free space. I've been into coding for a while now, and I can easily spot some common mistakes, don't let this discourage you, keep learning, and you will not make as many mistakes, I will also review your solutions in the future for more help. ~ Oto ❤️Marked as helpful0 - @darryncodesPosted almost 3 years ago
Hi Tymur,
I really appreciate the design and use of pseudo-elements - nice work!
You could consider clearing up your accessibility report including a
<h1>
and a<main>
tag.Happy coding!
Marked as helpful0 - @FabricioRivera2021Posted almost 3 years ago
Hey, good solution, how do you do to make the 2 backgrounds circles to stay in the center, i couldnt do that.
0@mendoncajoaoPosted almost 3 years ago@FabricioRivera2021 I did it this way:
body { background: hsla(185, 75%, 39%, 1); background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg"); background-size: 100vh, 100vh; background-position: -10vh -50vh, calc(100vw - 90vh) 50vh; background-repeat: no-repeat, no-repeat; font-family: 'Kumbh', sans-serif; }
You can check out my solution at: https://www.frontendmentor.io/solutions/profile-card-component-Yie_uM_pg
0
Please log in to post a comment
Log in with GitHubJoin 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