Social Links Profile

Community feedback

• 

  P

  Matt Pahuta•580

  @MattPahutaPosted 3 months ago

  Hi there. Nicely done completing this challenge. Your markup and styles are concise and efficient and use correct semantic elements. Here are some other things I have flagged for you:

  1. Use a modern CSS reset at the start of the styles for all your projects. Andy Bell and Josh Comeau both have excellent resets you can google and use.
  2. Other than height: 100% the properties you have set on html, body should only be on the body. Set a min-height: 100svh or min-height: 100vh on the body along with the other props. Some of this would be handled for you when you include a reset in your code.
  3. You don't need to set a width and height on your main element (and you really shouldn't). For this challenge, you might achieve better results by consolidating your flexbox properties on just the body instead of on both body and main.
  4. There's no need for a max-height on the card. In fact, max-heights are rarely used anywhere.
  5. The box-sizing property should typically be set globally instead of on an element farther down the tree (you have it set on the card div). This is also handled for you with a proper CSS reset.
  6. If you're going to use a width on this card, it should take a CSS function like clamp(), like you're using for the default font-size, otherwise it should be a max-width. Using clamp would achieve the varied dimensions of the card across screen sizes that you've asked about.
  7. The padding applied to the card looks a little too high compared to the design comp.
  8. For images that are meant to have an exact size (like the profile img here), use width and height. You can set it in either pixels or rem units (if you need it to scale). In this case, I believe the image dimensions are the same across viewport sizes so pixels is fine.
  9. This component features a list of social links. Use an html list to contain the links.
  10. The hover state bg/color changes on the links should apply when navigating via the keyboard as well. Add a focus-within pseudo-class to accomplish this.
  11. Nice work going the extra mile to try and improve the contrast ratios. However, it looks like your final results actually have lower ratios than the design comp. You can quickly see this in Chrome using the dev tools and selecting the elements. Here's another tool you might find useful.

  Again, great job finishing this project! Keep going. Cheers!

  Marked as helpful

  0

  ---

  

  eros77sc•160

  @eros77scPosted 3 months ago

  @MattPahuta

  Thank you very much for your comment; I'm very happy that you took the time to review my code and provide feedback to help me improve! I wasn’t familiar with CSS Reset, and I will definitely apply it in my future projects. Your tips really helped me understand some aspects of the code better. I hadn’t used WebAIM’s Contrast Checker before—I had used another one that only showed “good/bad” without the AAA rating. WebAIM’s Contrast Checker allowed me to adjust the colors without having to search for new palettes again, and I loved it! Again, thank you for your time and advice. Happy coding journey to you!

  0

  

  P

  Matt Pahuta•580

  @MattPahutaPosted 3 months ago

  @eros77sc Glad to hear it. Keep up the great work!

  0