Social Links

Community feedback

• 

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted 24 days ago

  Congrats on giving this challenge a try !

  Here are a few points that you'll want to check, it covers some fundamentals tips for building responsive and more accessible solutions later.

  • you need a <main> landmark to indicate the main content of the web page
  • you should load your stylesheet after loading the font styles, not before.
  • adding a modern css reset at the top of your stylesheet in all your project will help you deal with browser inconsistencies and have a strong foundation for your stylesheet. Look up for Andy Bell and Josh Comeau, they both have solid ones.
  • using pixel for font-size is an accessibility issue as it cannot respect the user browser settings. Use rem instead. https://fedmentor.dev/posts/font-size-px/
  • 100vw on your container is not advises as it can cause overflow in some case. You can remove it.
  • use a min-height:100vh instead of a fixed height on your container. It should be able to grow with the content.
  • use a max-width in rem for the width of your component instead of the fixed width in pixel.
  • the links should not have a width but take the 100% width of the card. Add a padding to the card so it doesn't touch the edge

  I hope you find something useful in this list. Don't hesitate to reach out on discord if you have any questions.

  Happy coding !

  0
• 

  P

  TheWraithDev•70

  @TheWraithDevPosted 28 days ago

  Looks identical - the HTML in my opinion could also include ARIA for accessibility

  0

  ---

  

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted 24 days ago

  @TheWraithDev no need of ARIA here.

  No ARIA is better than Bad ARIA

  https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/

  0