Profile Card Component - HTML CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in general looks great but it needs to be responsive/adaptable.

  Muh Suryadi Triputra Rahman gave great tip in git, just going to add some suggestions on the site itself:

  • Always have a main element to wrap the main content of your page. On this one, the .card-container should be using the main instead of section.
  • On the .card-container instead of width: 350px; use max-width: 350px because using the former makes an explicit width which makes the element not scale and just have fixed width. Also on the image background of the card, use and width: 100% so that it will scale as well.
  • Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag. Hide the img inside of the .card-top.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "background" and others. An img is already an image/graphic so no need to describe it as one.
  • Person's img should be visible because it is a meaningful image in the component so use the person's name as the alt like alt="Victor Crest".
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element.Have a look at Grace's solution on this inspect the layout and see how she used the h1 as well the stylings applied to it, copy that since you will need that a lot. But if you aren't comfortable right now, maybe use h1 on the person's name.
  • The london should not be a heading tag, use only p tag on it. Use only heading tag if the text gives an overview to what a section contains all about.
  • On the .activity-tracker you could use ul on it since those are "list" of information about the user. I wouldn't explain the next section in since on the link that I gave you, you will a proper markup on that.

  Aside from those, great work again on this one.

  Marked as helpful

  2

  ---

  

  Slim•145

  @SlimBloodworthPosted about 3 years ago

  @pikamart Absolutely wonderful feedback! Thank you so much!

  1
• 

  Muh Suryadi Triputra Rahman•400

  @msuryaditriputraRPosted about 3 years ago

  I also had the same problem.. you can try this

  git commit --allow-empty -m "Trigger rebuild"

  git push

  and refresh your page

  it worked for me.. happy coding

  Marked as helpful

  1

  ---

  

  Slim•145

  @SlimBloodworthPosted about 3 years ago

  @msuryaditriputraR I will give that a shot! Thank you so much!

  0

  

  Slim•145

  @SlimBloodworthPosted about 3 years ago

  @msuryaditriputraR That Did it! Thank you So Much!

  0