The Profile Card Component (HTML & CSS only)

Solution by
Desktop design screenshot for the Profile card component coding challenge
This is a solution for...

Profile card component

View Challenge

Design Comparison



  • 0Accessibility

  • 0HTML

View Report

drallas's questions for the community

This is my 3rd newbie challenge submit and I enjoyed the process of hacking this card component together. Building such a 'simple' card component isn't easy for a 'Newbie' and it requires some time to think over before trying to do it properly.

Feedback would be welcome How is the responsive experience; what can / should I improve (*see Note)? I try to use BEM but still have doubt if i used it correctly Anything else that I missed or should improve.

Note: Related to BEM I recommend this video: it's quite good and explains it in visual detail.

Where I struggle is how should elements be named when there are multiple levels of nesting.

<div class="card__mid">
          <div class="card__text">
            <div class="card__name">Victor Crest <span> 26</span></div>
            <div class="card__location">London</div>
Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!