Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card made using Grid

#accessibility
Hania B. 1,360

@techanthere

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey everyone, any suggestions are more than welcome. Do you see any elements I can replace here or changes that can make the code look more cleaner, please suggest!

Community feedback

P
AK 6,700

@skyv26

Posted

Hi! Buddy, Good work, it is responsive and i really liked it. I saw no issue. Let me clear your doubts and I try my best to give some useful suggestion.

You can improve your below code.

<ul>
      <li><span class="followers color-dark">80K</span></li>
      <li><p class="color-light">Followers</p></li>
    </ul>
    <ul>
    <li><span class="likes color-dark">803K<span></li>
    <li><p class="color-light">Likes</p></li>
    </ul>
    <ul>
      <li><span class="photos color-dark">1.4K<span></li>
      <li><p class="color-light">Photos</p></li>
    </ul>

There is absolutely no issue in this code but I would like to say it could be more better in structure. Like

<ul>
      <li><p>80K</p><span>Followers</span></li>
      <li><p>803K</p><span>Likes</span></li>
      <li><p>1.4K</p><span>Photos</span></li>
</ul>

p is block where span is inline-block you can change block visibility of span by display property and get desired output as it is right now in deployement. So I think in this way you can also short your code too.

Overall Good !

Marked as helpful

1

Hania B. 1,360

@techanthere

Posted

@skyv26 thank you. I also wanted to have this as a single ul but since the focus was just to correct the mistakes in the accessibility report so I adopted this method. But yes, this is a nice suggestion, so I have accommodated the changes in my code, with just two lines addition in css code :) Please check here.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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