Responsive & Interactive Notifications page | Tailwind | Vite

Hi Tusher, great job with using Tailwind and vanilla JavaScript for your project. I think your Tailwind code is very concise and easy to read. I also learned about the Tailwind's utility space-between space-y-2 from your code. It is amazing!!

However, I noticed that you put some parts like <section>Hello, thanks for setting up the Chess Club ...</section> in a separate paragraph; as a result, it does not appear in the same block of the parent. You can resolve this by wrapping it in the same div of the content besides the profile pic. This is also metioned by Igo in the 3rd point of his comment.

Keep up the amazing work!

Hi Tushar, good job!

Feedbacks about your solution.

1. What did I do wrong?

• The notifications counter background color is wrong, you need to use the primary blue color
• The "actions" text color needs to be more neutral, a opaque gray color. For example, in the text: "followed you"
• The last two notifications have the whole text as a link, but the links are only for the users name and the post/picture name

2. What did I do right?

• Nice job with the mark all as read
• The mobile view look's good
• Nice use of "section" semantical tag
• Good colors organization in the tailwind config file
• Nice job in the counter.js module file, next time, try to organize this file inside "utils" or "lib" folder, for example

3. How can I improve? Common mistakes?

• Try to use a wrapper around the whole notification component to center the component in the window, then set the background-color of the body to "Verylgb" and keep the notification component white
• You need to improve the paddings and margins
• Implement individual mark as read, e.g when clicking in the notification or in the red circle. Note: after implement this feature, add some condition that not allow the counter to be less than zero, I saw many users doing this mistake
• Wrap the "avatar" and the "content" in the same div, that will solve the "space-between", the space-between is throwing the avatar to the left side, away from the content, it is interesting when the content have the picture, like in the "Kimberly Smith" notification
• Improve the hover effect, see the "active state" picture in the design starter files, this will help you
• In my opinion, the most common mistake is: getting your hands dirty without stopping a little to think first, actually, this is a mistake that I make a lot. Before you start styling your HTML page with tailwind, first, stop a little and analyze the design you have to clone/reproduce, build the HTML from it WITHOUT any style first, just to organize the things, think about the parts you can organize in a container/wrapper , for example, "hmm, there is a main notification content here, but you can see that the avatar is next to this content, it is part of this content, it might be interesting if I organize them all inside a container, in addition, the notification paragraph and its timestamp are vertically aligned, maybe organizing them inside another div is also interesting, so I can use a flex with column direction

I hope you understand, english is not my native language, but I'm trying haha

Keep it up, one step at a time, good job! 🚀