Profile Card Solution

Community feedback

• 

  Oto•400

  @Tagvi

  Posted about 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 a p and use :first-child and :not(:first-child) pseudo-selectors. Fourth issue is with giving each div width: calc(100% / 3). While the easiest way is to just use 100% width on the parent container and justify-conent: space-between which will put the remaining space in between elements. You can also use the gap 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 ❤️

  00

  Marked as helpful
• 

  darryncodes•6,350

  @darryncodes

  Posted over 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!

  00

  Marked as helpful
• 

  Fabricio Rivera•90

  @FabricioRivera2021

  Posted over 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.

  01