Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive component using Flexbox

yashgo30 40

@yashgo30

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • In smaller devices the share button overlaps the last last social media icon. I have positioned share button absolutely, maybe that's why it does so.

Community feedback

Ahmed Kamel 1,190

@hmadamk

Posted

well done a few notes

  1. describe the purpose of your button with aria-label like so
<button aria-label="pop the social icons"></button>
  1. make sure that all of your page is contained by a landmark examples of landmarks are
header for the top section
main for your main section
section with aria-label to describe why you added this section
footer for the bottom section

  1. wrap you social icons with link to show interactivity

Marked as helpful

1

yashgo30 40

@yashgo30

Posted

@hmadamk thank you so much for informing about these stuffs. I was just thinking why I got all these Accessibility issues. I will soon update my code🙂

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord