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

pettikβ€’ 580

@pettik

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

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello @pettik, Congratulations on completing this challenge!

Amazing solution as always is everything so beautiful and the mobile/desktop version are full responsive with 0 issues. Here are two tips to improve your workflow:

1.To reduce your CSS file and improve the performance of loading your page you can use a tool called CSS minify that reduces the CSS code by removing the unnecessary characters. You can use a VSCode plugin called minify css or this website tool to reduce your code: https://www.toptal.com/developers/cssminifier

2.To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem here's the link β†’ https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

✌️ I hope this helps you and happy coding!

Marked as helpful

2

pettikβ€’ 580

@pettik

Posted

@correlucas Hi Lucas πŸ‘‹. Thank you for you advices! I already installed "minify" and "px to rem" plugins to my VS. Thank you for your time to comment my solutions πŸ™‚.

Happy coding to you too πŸŽ‰πŸ˜‰βœŒοΈ

0

@VCarames

Posted

Hey @pettik, great job on this project!

Some suggestions to improve you code:

  • When using buttons/links alongside the β€œhover” effect, you’ll run into the problem where the hover effect gets β€œstuck”. To prevent this, you’ll want to add the @media (hover: hover) to your CSS code and include within the query all the classes that are using the hover effect. Since not all devices support hover effects this query will then check to see if it is or not.

  • For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

Happy Coding!

Marked as helpful

0

pettikβ€’ 580

@pettik

Posted

@vcarames Hi vcarames, πŸ‘‹ thanks a lot for you suggestions and your time ⏱️. I fix that on github. Now should be good :)

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