HTML, CSS, BEM

Community feedback

• 

  Adler G Luders•1,580

  @just-a-devguy

  Posted over 4 years ago

  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. 😎

  21
• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted over 4 years ago

  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! 👍

  11