Clipboard landing page

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  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:

  • Semantic HTML: MDN Web Docs
  • Mobile-First Approach: CSS-Tricks
  • Image Optimization: Google Developers

  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

  @hassanmoaaPosted 10 months ago

  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