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

Osman Bayโ€ข 690

@osmanbay90

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


this was fun.

Any suggestions on how I can improve are welcome.

Community feedback

Petrit Nurediniโ€ข 2,860

@petritnuredini

Posted

Congratulations on completing your Clipboard landing page project! It's a fantastic achievement and showcases your skills in front-end development. Here are a few suggestions to enhance your project even further:

  1. HTML Semantic Elements:

    • Great job on structuring your HTML! To further improve, consider using more semantic elements like <nav> for navigation links and <footer> for the footer content. This not only makes your code more readable but also improves accessibility.
    • Ensure all interactive elements like buttons are marked up correctly. For instance, if a <div> or <a> is acting as a button, itโ€™s better to use the <button> element for accessibility reasons.
  2. CSS Best Practices:

    • Be mindful of overusing !important in your CSS. It can make debugging styles more challenging and should generally be avoided unless absolutely necessary.
    • When using media queries, try to follow a mobile-first approach, starting with styles for smaller screens and then using media queries for larger screens. This approach is often more efficient.
  3. Performance and Optimization:

    • Consider optimizing your images for faster load times. Tools like TinyPNG can reduce image file sizes without losing quality.
    • Minify your CSS and JavaScript files for production. This reduces file sizes and improves loading times.

Here are some resources to help you learn more:

Keep up the excellent work! Each project you complete is a stepping stone towards more complex and rewarding challenges. Your progress is commendable, and I encourage you to keep learning and experimenting! ๐Ÿ‘

Marked as helpful

0
Hassan Moatazโ€ข 1,860

@hassanmoaa

Posted

Hello @Osmanbay90 !

i see a minor problem that could mess your project if it's bigger and there are more content in it.

body {
    font-size: 18px;
}

For the font-size it's is better to use rems and ems but px for this project is no big deal.

  • i see you using pixels for many elements, never use pixels for font-sizes in any element, here's why:
  • Certain font-related CSS properties will render your site completely inaccessible if their value is declared using pixels even once.

Which properties are affected?

All of these properties must never ever be declared in pixels:

  • font-size
  • line-height
  • letter-spacing

If you've used pixels to define any of the above style properties, these will not respect the user's font size preferences!

  • You should use ems, and rems for font-sizes would be better.

This article may help: https://fedmentor.dev/posts/font-size-px/

Other than that you're good, keep up the good work! Good luck mate.

Marked as helpful

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