HTML, CSS and JS Solution

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is really good, though it is not really responsive. Not responsive is sense of, the layout doesn't size doesn't change when screen-size changes, you just transition it to mobile layout. Also the breakpoint is too early for mobile layout, the mobile layout takes form in about 1150+px which is too large for mobile, desktop layout could have used more of those. Though the mobile layout is good as well.

  Some suggestions would be:

  • You don't need to explicitly state the width on the main element, since you are using a grid on it and you are using the gtc or grid-template-columns with explicit column-width on it. Let the grid-template-columns shape the container.
  • The alt for the img of the person should have used its name as the value like alt="Jeremy Robson", if you are using a person's image, and their name is present, make it as the alt value.
  • The name of the person as well the the word report for is not really suited to be a h1. On this one, the h1 would only be a screen-reader only heading tag, it will have sr-only class on it. Though the person's name will still be a heading, just not h1.
  • You don't have to use section for each cards, because each card are related components, if you were to use section use it as a parent of those card, because it will be a "section" of information.
  • Each card title like "work", "play" should be a heading tag, because it gives the overview of what each card would be, hence "work" information, "play" information.
  • The alt for the ellipsis img should have been left empty like alt="", since it is just decoration, you don't need to add alt on it.
  • Using p tag on the selection on the bottom-left is not really good, it's functionality is limited to mouse users, but for keyboard and screen-reader users, they won't be able to toggle it since you are not using an interactive element. On this one, I suggest to use input type="radio" since those are selections and radio buttons are intended for it.

  Other than those, great work on this again.

  Marked as helpful

  0