mobile first, pure html and css

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The desktop layout looks really great, the site is responsive and the mobile state looks really great as well.

  Here are some suggestions for the site:

  • Don't use position: absolute a very large element. If you inspect your layout, hover on either html or body tag, you will notice that it has no height since its element is being absolute. Since you are just using this to center the layout, it would be much better to do it this way. But first, remove these stylings on the main and footer:

  position
  top
  left
  transform
  

  Then on the body tag, just add:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  

  You add a gap as well if you want to have a spacing between the card and the footer.

  • You don't need the section on it though since you already have a article tag inside it. It will just create an extra landmark navigation using screen-reader, the article is enough on this one.
  • The person's img could just use the person's name and you can remove the avatar word.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
  • For the share-toggle, you should have not set the display: none on the button. Remember that interactive component needs to use interactive element. By using only a div as toggle, you are excluding lots of user because only mouse could interact with it. Style the button to look like that toggle.
  • If you used button, it should have either aria-label attribute or sr-only text inside it which defines what the button does. It could be something like aria-label="share on social media dropdown".
  • The button as well should have a default of aria-expanded="false" attribute which will be set to true if the user toggles the button and vice-versa.
  • The img inside the toggle is only a decorative image. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
  • As I suggested the usage of flexbox to center the layout, the social-media-dropdown is out of place. For this one, I would prefer to make a container, a relative container, which will nest the button toggle and the dropdown so that it will be properly controlled.
  • Those social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
  • Social-media image should be hidden since it is only a decorative image so use alt="" and aria-hidden="true".

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Wang•60

  @effycocoPosted almost 3 years ago

  @pikapikamart thank you so much for your detailed feedback. I have fixed most of the problems according to your advice. It's nice to have people like you in this community.

  1