Flexbox, CSS, Mobile first

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 3 years ago

  Hi

  Some more work is needed on this but it looks good overall

  Essentials

  • read about how and when to write image alt text
  • for anchor tags to work they need the href attribute
  • social media links need to be labelled so the accessibility api and search engines know what the links do. I suggest adding some text like “Facebook” in a span with an sr-only class on it (look up the css snippet for that class) and placing that inside the anchor tags
  • always include focus visible styles on interactive elements. These should be really obvious, like an outline, for keyboard users to know where they are on the page
  • if mobile styles are your base they do not need to be in a media query, so remove the 280 one altogether.

  Marked as helpful

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Like what Grace said, the site looks great.

  Some little suggestions besides Grace's helpful feedback on this one:

  • Use main tag on the .main-container so that your main-content will be wrapped by a landmark element. This helps users to navigate your site easier and properly.
  • Those social-media links could be inside a ul element since those are "list" of links.
  • Each social-media-link should not use aria-hidden="true" since links are supposed to be shown, if img is used as the icon, then that img should have the attribute but not the a tag directly.

  Aside from those, great job again on this one.

  1