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

HTML, CSS, BEM

P

@gmagnenat

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


Hello everyone, This is my first challenge. If you have time to review my code, i'd like comments on the structure and the BEM methodology I try to implement. Thanks a lot for your feedbacks.

Community feedback

@adluders

Posted

Ok I'm going to be extremely picky here, so brace yourself. I think you did well implementing BEM; HOWEVER 😂, I would suggest instead of doing something like card__lineOne, two, etc..., do something like card__title and card__subtitle. I said that simply because I feel like that's more flexible. Had this not have just 2 lines, you'd have to do like card__lineFive, etc. Again EXTREME PICKINESS, not saying you did a bad job or trying to bash you. 😎

2

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Gwenaël, nice work on this challenge and congrats on submitting your first solution! 🎊

Your solution looks great and matches up to the design really well. As you can see from the design comparison, there are only small areas where it differs slightly, which is great. I'd definitely recommend spending the time to try refining a little bit more. Attention to detail is a key characteristic of being a front-end dev. However, you definitely don't need to try making every project absolutely pixel-perfect. Pixel-perfection is often not an attainable goal in modern web development and can lead to spending too much time on a project when getting 90-95% of the way there will do.

The main piece of feedback I'd have is to add in headings to create a proper content hierarchy. At the moment, you have no headings. Given this design, I'd say the person's name is the main heading (h1). The Followers, Likes, Photos content would be the other headings in this design and make sense as h2 headings. Because they're below the numbers in the design, you could flip the order in the HTML, so that screen reader software reads the headings first and then use flex-direction: column-reverse; to flip the order to match the design.

Let me know if you have any questions. This is a great first submission! 👍

1

P

@gmagnenat

Posted

@mattstuddert Thanks a lot for the thorough feedback!

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