profile-card-component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, great work on this one. Just saw the site and it looks really great overall.

  Some suggestions on the site would be:

  • Separating the .attribution from the main would be really nice. The .attribution could be placed inside of a footer so that it will be contained by its proper landmark:

  <main />
  <footer />
  

  • Change the .container width into using max-width so that even if you go into small screen-size, the layout will still scale with it. Using width gives an element a fixed size while max-width just sets a maximum.
  • For the person's image, you don't need to use figure on this one but if you insist on doing so, I would use the person's name as the figcaption so that it will be present. figcaption is used alongside the figure to give a caption on an image.
  • For the .stats selector, if you look at the content inside it, those look like list of items right, for this, you could use a dl tag. Just now, I think dl would suit better than ul, since for second text like "followers"` it servers as a title for the content inside it. On this one, I would use a markup that looks something like this:

  <dl>
    <div>
      <dt></dt>
      <dd></dd>
    </div>
    ....
    .....
  </dl>
  

  Though on this one, for each div that would contain the dt and dd I would use flexbox on them and will set a flex-direction: column-reverse. The reason is that, the dt should be using the text like "followers", "likes" and not the number because the number-text is not suited to be a heading for each list-item. The column-reverse will swap their visual position but still keeping the same semantic.

  Aside from those, again great job for this one.

  Marked as helpful

  0