Profile card component using Gulp, Sass, Flexbox and Grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Jenny

  This looks great! Only a few changes needed to finish it off fully ☺

  • on landscape mobile, the card has no space above or below it and the attribution footer is overlapping the content
  • in your html you need to change the markup a little as the h2s dont make sense as they are

  At the moment, you have numbers like 80k that would be listed in a document outline (used a lot by search engines and assistive tech) as headings. But they don't make semantic sense on their own, they need the word after them. As soon as you read it as "80k followers" that makes sense. But it's still not a heading for any other content.

  Thats how you know you need to use a different meaningful element. When I did this challenge, I placed each stat in a list item inside an unordered list. The alternative would be placing each of the 3 stats (with their accompanying word) in a paragraph tag.

  You can still style the number and the word however you want by wrapping them in spans with classes on. But the semantics of the elements you choose is important.

  I hope that makes sense and is helpful to you. Keep going, you're doing great

  2

  ---

  

  Jenny Ryden•145

  @jnnrdnPosted almost 4 years ago

  @grace-snow

  Hi Grace,

  This is great, thank you! I really appreciate you taking time to check out my solution and provide such clear and constructive feedback. This is what I was hoping for when I joined this community, but didn't dare to expect :)

  I focused so much on the mobile portrait format that I actually forgot to check it in mobile landscape, and what you wrote about the h2:s makes perfect sense. That's how I would build a nav after all. A classic case of too much focus on the design and too little on what the actual content is :) I've replaced them with an unordered list and spans now.

  1