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

JesseStone 370

@jesseburn

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Awesome work on this challenge Jesse, it looks great! 👍

Here are a few things I picked up while taking a look at your code:

  • You're currently missing the background image at the top of the page
  • There are multiple h1 elements on the page at the moment. I'd recommend only ever having 1 h1 element per page to help with the content hierarchy for screen reader users.
  • You're using button elements for the "Download for X" call-to-actions. I'd say these should be anchor tags, as you would expect them to link off to the correct app store.
  • Your HTML structure for the footer links looks like this:
<ul>
  <div class="list1">
    <li><a href="#" aria-label="Frequently Asked Questions">FAQ</a></li>
    <li><a href="#" aria-label="Privacy Policy">Privacy Policy</a></li>
  </div>
  <div class="list2">
    <li><a href="#" aria-label="Contact Us">Contact Us</a></li>
    <li><a href="#" aria-label="Press Kit">Press Kit</a></li>
    <li><a href="#" aria-label="Install Guide">Install Guide</a></li>
  </div>
</ul>

Only li elements can be children of a ul, so unfortunately this is currently invalid HTML. You could instead have 2 separate lists.

  • It's great to see you using min-width media queries and also using rem units for your font sizes.

I hope those pointers helped. Keep up the great work! 🙂

0

JesseStone 370

@jesseburn

Posted

Thank you very much for the advice!

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