Fylo Landing Page Using 👉 CSS GRID, FLEXBOX , SASS AND BEM

Community feedback

• 

  Simeon Udoh•535

  @simeon4realPosted almost 5 years ago

  I added before pseudo-elements to with contents like content: "facebook"; etc for all 3. and then hid it using visibility or opacity. still, the report still says I have to fix it. what else can I do?

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  Awesome work on this challenge, Simeon! You've done a really good job on this challenge and your solution matches up really well to the design! Here are a couple of small pointers after taking a look at your solution:

  • There are a couple of areas where your fonts are slightly off, like the nav, the "See how Fylo works" call-to-action and some of the footer text. This is one area where you could make some refinements.
  • You have a few accessibility errors. It would be great to resolve these so that your social icons are accessible to screen reader users.

  You've done a really good job on this. Keep up the great work! 👍

  0

  ---

  

  Simeon Udoh•535

  @simeon4realPosted almost 5 years ago

  @mattstuddert Thanks Sir. For fixing the accessibility issues, Since there's nothing to use in between the hyperlink tag, can I use a space like this: <a href="linktofacebook.com" >  & nbsp ;<svg></svg> just before the svg icon?

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  @simeon4real you can either add text inside of the anchor tag and then hide it but making sure it's still accessible for screen reader users. Or you can add the aria-label attribute on the anchor tag itself to describe what it's for e.g. <a aria-label="Follow us on Facebook" href="...">...</a>.

  0