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

Notifications Page with TailwindCSS

Abiโ€ข 300

@abimh66

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback would be much appreciated. Thank You.

Community feedback

Petrit Nurediniโ€ข 2,860

@petritnuredini

Posted

Congratulations on completing the Notifications Page project! It's great to see your progress and the application of modern web technologies. Here are a few suggestions to enhance your project even further:

  1. Accessibility Improvements:

    • While your project is visually appealing, it's important to ensure it's also accessible. For example, the alt attribute for images like "avatar-mark-webber" could be more descriptive. Instead of just repeating the file name, describe the person or object in the image. This is helpful for screen reader users. You can learn more about accessible images from WebAIM.
  2. Use of TailwindCSS:

    • You've integrated TailwindCSS effectively. However, consider keeping the custom configurations minimal. Over-customizing Tailwind might negate some of its benefits, like consistency and predictability. For instance, your tailwind.config has a lot of custom colors. While this is perfectly fine, ensure that these colors are essential to your design and are being reused throughout your project. Hereโ€™s a great resource on Tailwind best practices.
  3. Code Commenting and Cleanup:

    • Good job on commenting to explain the purpose of certain sections. However, make sure to remove commented out code, like the attribution comment at the bottom, before the final deployment. This keeps your codebase clean and professional. Here's a guide on writing clean code.

Keep up the excellent work! Each project you complete brings new learning opportunities and growth. You're doing an amazing job, and I'm excited to see your future projects. Keep exploring, learning, and coding! ๐ŸŒŸ๐Ÿ’ป

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