Social media links using HTML and CSS

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 1 year ago

  Hi, I hope this feedback is helpful 😁

  1. The image alt must be properly written. See the excellent post in the resources channel on discord about how to write good alt text.
  2. If opening links in a new tab (unexpected behaviour) you must notify screen reader users that will happen. Include some visually hidden text in a span on each link that says (opens in a new tab) for example.
  3. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  4. Never limit the height of elements that contain text, including the body. This is making your solution overflow the page at the top and bottom on some screen sizes and is especially bad when users increase their font size (I'll add some Screenshots to demonstrate in discord for you). Min-height is fine to use on elements that contain text in descedents, if you need to, but height is not. The only elements that sometimes require a height are icons/images.
  5. Add text align center to the component.
  6. ⚠️ Very important: Font size must never be in px
  7. Unless using gap there is no real benefit to making the component into a flex column. It's not wrong but there is no benefit either so these kind of things will bloat the css.
  8. The link and hover styles should be on the anchors not on the list items. The whole anchor is what is clickable so that is where the hover must go.
  9. This challenge does not need a media query at all. The container should have a max width in rem (and optionally a width 100%).
  10. If you do need media queries in future challenges they must be defined in rem or em not px.

  02