Profile Card Component Solution

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great.

  Others already gave their feedback on this, just going to add some suggestions as well:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Then to properly center the layout, on the body tag add these stylings:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh; # making sure body has enough height
  

  • Person's img should be using the person's name as the alt like alt="Victor Crest". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • Your .bot-container could have used ul since those are "list" of information about the company website.
  • Also, inside in those list information, those text should not be using a heading tag because they don't really give content on what the section would contain right, so better using p tag on them.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hi @lisov1y,

  Great job finishing the project! It looks great on the desktop. A suggestion I would like to share is that you can add a margin on your component so that it has some spacing when it is on mobile view. I hope it helps :)

  Marked as helpful

  1
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @lisov1y 👋🏻

  I have some quick tips to help you fix the accessibility issues.

  • In your markup, <div class="profile-area">...</div> should be <main class="profile-area">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.

  I hope this was helpful 👨🏻‍💻 all in all, you did a nice job, well done. Cheers 👾

  Marked as helpful

  1