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

Clipboard landing page solution using flex

#accessibility
imad 3,310

@imadbg01

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi FM Community!!, I've complete this challenge using CSS flex, feel free to give you feedback!!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Greetings, imad! 👋

Well done on this challenge! 👍 Your solution is responsive! 🙌 It's great that you're learning how to use flexbox to lay out stuff with CSS! 🙂

A couple of things I suggest are,

  • Not adding aria-hidden: true to some of the icons/images in the page. There is no need to as long as you leave the alt text for those images empty, as that will cause screen readers to ignore them, anyway. 😉
  • Using the background color of the original design for the background of the footer of the page.
  • Perhaps using a list element for the features in the "Keep track of your snippets" section (since each of those items is part of a list) to make your HTML a little more semantic.

Hope you find these tips helpful. 😊

Keep coding (and happy coding, too)! 😁

2

imad 3,310

@imadbg01

Posted

Greetings @ApplePieGiraffe , Thanks a lot for your valuable feedback, the reason that let me add aria-hidden: true to the icons because I was thinking that the icons are just for the design, they are not important to screen readers, and for the colors I found a law contrast in the original color scheme, so I change it a letter bit for more readability, but I well update them again. Thanks a lot @ApplePieGiraffe, I appreciated

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@imadbg01

No problem! Glad to help! 😊

1

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