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

Community feedback

• 

  Fluffy Kas•7,655

  @FluffyKas

  Posted about 3 years ago

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

  00