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

I used HTML and CSS.

Ebuka Harryβ€’ 10

@ebukaharry

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


First trial ever. How'd I do? πŸ˜‰

Community feedback

drallasβ€’ 375

@Drallas

Posted

He Ebuka Harry

This 'simple' card requires many details in HTML and CSS, good first one to start with. There are many details that are a bit off position card (not y-axes centred) missing dark line (but too dark in the preview up here).

You have used a lot of ID's in your CSS: I think classes would have been a better choice. "The basic rule that you need to keep in mind while using classes and ids in CSS is that, id is used for single elements that appear on the page for only once (e.g. header, footer, menu), whereas class is used for single or multiple elements that appear on the page for once or more than once"

Seems you went for ID's because you already had classname with the same name as you had in mind. But you could also have used BEM https://www.integralist.co.uk/posts/bem/#4

<div class="photos">
          <h3>1.4K</h3>
        <span class="photos__text-below">Photos</span>
        </div>

Like that you could have one class for all three elements, using margin and padding on the surrounding block to move them in place.

1

Ebuka Harryβ€’ 10

@ebukaharry

Posted

@Drallas thank you very much for this feedback. I had already made some corrections to centre the y-axis and also make that line a bit lighter just like in the design. I'll take your corrections on IDs and classes. Thanks so much!

0
drallasβ€’ 375

@Drallas

Posted

@ebukaharry Np glad to help.. we are all here to learn and improve. Please remember that it's possible to upvote feedback if it was helpful to give some credit to the mentors. :)

1
Keith Priceβ€’ 65

@keith-price

Posted

Looks like you did well. The first thing I notice is that the font color and weight are different to the original design and the border between the mid and final section is too dark. Apart from that you got all the elements in place. Maybe centre the card on the page as it looks to be higher than centre.

1

Ebuka Harryβ€’ 10

@ebukaharry

Posted

@keith-price thanks Keith! Will make those adjustments as soon as I can!

0

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