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

Responsive Web Design with BEM, Flexbox, Semantic Tags HTML5, CSS3

#accessibility

@vikramvi

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


  • Please review for BEM and Flexbox best practices
  • HTML5 SEO and Accessibility good practices
  • I'm breaking down styling into small chunks possible and doing regular commits, which is helping me a lot. You can check those in commits
  • Any other suggestion is welcome as well.
  • Had faced challenge with placing multiple background images, but could solve it after lots of proper googling and reading answers patiently

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hello,

Your solution looks pretty good! Your code is easy enough to read so well done on that part. I do have some suggestions though:

  1. There are a few html elements here that you're not using correctly: a) <figure> isn't needed for wrapping images, if you're not going to pair it with a figcaption. Either just use a div or don't use a wrapper for the image at all (if you can avoid). b) <summary> is used as a sort of heading for the <details> element. If you would like to wrap things in something for styling, div serves exactly this purpose. c) Same goes for the <section> element. It's being overused, even though it's not a semantic element by itself. I suggest swapping most of your sections for divs, except maybe the outer one named "profile" that could actually be an <article>.

  2. For the alt text of the profile pic, it's best to replace it with the person's name. So "Victor Crest." would be the most appropriate alt text for this.

  3. If you'd like to give the body some height, you should use min-height instead so you don't lock it to a fixed value.

  4. There's actually a super easy way to solve the background circles! They can all be added to the same element (body) and then you can use viewport units to position them, much like how I did it in my solution(please forgive me for linking it here, I'm not fishing for likes, just thought it might be easier if you check out the actual code ^^).

Everything else seems really good! I'm not an expert on BEM, I rarely use it but from my little experience, your naming seems fine and it's easy to follow. Happy coding! ^^

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