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

@shareef99

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

Congrats on completing this challenge Mohammed! 👏👏👏

Here are a few pointers after taking a look at your code:

  • Be careful with using position: absolute; in your CSS. I would only use it very rarely and for very specific reasons. The reason is that position: absolute; pulls the element out of the natural flow of the document. Meaning other elements aren't aware of an absolutely positioned element's position in the browser. You can see this can cause issues when you start to resize the browser and elements start to overlap. Here's a great tutorial on CSS position if you want to dive in further.
  • In your HTML I'd also recommend taking a look at HTML5 structural elements and starting to add them to your code. It helps add structure to your page and can benefit people using screen readers accessing your sites.

I hope these tips help you out! Let me know if you've got any questions.

Keep it up! 👍

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