Notification UI Lab

In this lab, you have to create a custom notification UI component using HTML, CSS, and JavaScript. The notification UI should show up when the user clicks a button, provide a message and dismiss automatically after a few seconds. Notification UI is used in websites and web applications for showing important information or alerts to the users such as success messages, error messages, or updates.

To make this lab even more interesting, we will provide different challenges focusing on creating an elegant notification UI and handling various interactions like closing the notification and managing the timing for the automatic dismissal.

Here, you will also learn how to work with CSS transitions and animations for better user experience.

Concepts

• HTML, CSS, and JavaScript
• Positioning elements using CSS
• Event handling in JavaScript
• CSS Transitions and animations