Social Links Profile

Community feedback

• 

  P

  Levi•230

  @law973Posted 2 months ago

  Hey! I like how well your solution matches the design.

  I think using p tags instead of h1 and h2, and then styling those pieces of text using classes, might be better; one way to think of the profile card is of it being a potential component on a page, not as the main content itself, if that makes sense. Headings are meant to divide sections/other pieces of content and that's not the purpose they're serving here (I made the choice of using headings myself with my initial solution, and someone helped me by pointing this out).

  The next point may lean more towards personal preference, but I would make the background of a card link belong to the anchor element itself and not the div that contains it; this way, a user can access the link by hovering over the link's background and without having to hover over the text specifically.

  Marked as helpful

  0
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

  • Setting font-size: 62.5% can affect accessibility by reducing the default browser font size, potentially making text harder to read for users with visual impairments. This does make it easier to work out the relative units but at what cost?

  • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

  • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  0