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

HTML Flexbox CSS Responsive Layout Mobile-First

@T4R0TARO

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


All feedback is welcome 😁

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey, good job on completing this one! It looks good, there's just a few suggestions:

  1. The hover effect on the ios buttons are super bright, they almost hurt my eyes :D Perhaps you could go with something more subtle. :)

  2. In mobile view there are several places where inline padding is missing so text touches the sides.

  3. Take a look at the accessibility report, there are plenty of small issues to fix. Semantic markup is very important. The report is helpful enough with this but if you need any additional help about this topic, let us know.

1

@T4R0TARO

Posted

@FluffyKas Thank you for your input 😀 I went ahead and made the changes you suggested. I am still confused regarding the accessibility report, I attempted to make the corrections but ended up with more errors about my landmarks and role="value". A point to the right direction would be great.

1
P
Fluffy Kas 7,735

@FluffyKas

Posted

@T4R0TARO Divs have their purpose but using ONLY divs in your HTML is bad practice. There are appropriate tags you can use, like header, main, footer, section, etc. I would need to write here a small essay if I wanted to explain them all so I suggest you read about semantic HTML a bit. :) MDN, freecodecamp, anything will do ^^ When you do this, you'll understand why you keep getting those errors in the report (like there can only be one main in a HTML file, etc). When you're done with this, it would be the best if you swapped some divs for appropriate HTML tags (the report suggests doing this AND using roles as well). If after learning a bit more, you're still unsure what you're doing, reply here or message me on Slack, I'll help ^_^ Good luck!

Marked as helpful

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