Social media links using HTML and CSS

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 8 months 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.

  0

  ---

  

  Francisco Borja Lobato•450

  @francloboPosted 8 months ago

  Hi, @grace-snow

  Thank you for your feedback. I have completed some required changes, but I prefer to keep others like that.

  1. Done! It is good to know there are excellent posts in the resources channel on Discord about how to write good alt text, but it would be useful if you shared the link to the specific resource.
  2. When you click on the PREVIEW SITE button it opens the site without showing an alert to the user. Is the alert mandatory as you said? Is there an ISO standard?
  3. I don´t know who Andy Bell or Josh Comeau are. I noticed you used this comment several times in your feedback, I found 138 results on Discord, but it would be better if you shared a link.
  4. Please use a constructive tone. "Never..." sounds rude, doesn't it? It sounds better "Limiting the height of elements that contain text, including the body... 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. Yes, madame. I did it. Oh, sorry. It sounds like an order. "Please add...", "kindly add...", "It is better..." sound polite.
  6. Done! Thank you for the link to the article that clarifies the reason for the change requested.
  7. I used a flex column because the position of the elements is vertical otherwise it will appear in a row. Does it make sense?
  8. I got it, thank you for the feedback.
  9. I recommend using "In my opinion..." when the feedback isn't based on the challenge's requirements. Your challenge is to build out this social links profile and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
  10. Done! Thank you for the link. That's a good feedback.

  0

  

  T

  Grace•31,090

  @grace-snowPosted 8 months ago

  @franclobo

  2. Screen reader users see no alert. They just get taken to a new page unexpectedly and without warning which is why the label must be amended (or better yet don't open in a new tab at all because users can choose to do that themselves if they wish).
  3. Looking up resources is a key skill for any developer. I give hours and hours of free consultancy every week. Do not ask me to do even more. I will signpost to where you need to look but it is yo to you to go and learn.
  4. Never means never, that's all. It's essential, absolute. I will use direct communication on all essential items that must not be missed.
  7. Block elements stack vertically by default. So there is no need for flex at all unless using gap to create inner vertical spacing (it would be margins by default).
  9. This is based on challenge requirements.

  0