Merge pull request #1 from nexoscreator/day-002

update

Readme.md → README.md

@@ -12,8 +12,8 @@ Welcome to my **365 Days of Web Development** challenge! In this repository, I'm
 
 | Day | Project Name | Description | Live Demo |
 |-----|--------------|-------------|-----------|
-| 001 | [Project Name](./projects/day-001-syntax-code-box) | How to Create a Syntax Code Box | [Demo](https://example.com) |
-| 002 | [Project Name](./projects/day-002-toast-notification) | Creating a Toast Notification | [Demo](https://example.com) |
+| 001 | [Syntax Code Box](./projects/day-001-syntax-code-box) | How to Create a Syntax Code Box | [Demo](https://example.com) |
+| 002 | [Toast Notification](./projects/day-002-toast-notification) | Creating a Toast Notification | [Demo](https://example.com) |
 | ... | ... | ... | ... |
 
 

projects/day-001-syntax-code-box/README.md

@@ -0,0 +1,37 @@
+# Day 01: How to Create a Syntax Code Box
+
+## Project Description
+
+The code box is useful for displaying code snippets in a web page with proper syntax highlighting and styling. Here’s a brief explanation of how it’s done.
+
+## Technologies Used
+
+- HTML5
+- CSS3 
+- JavaScript (with prism lib)
+
+## Features
+
+- Responsive design that works on various screen sizes
+- Light and Dark mode
+- Highlight Colors
+
+## Future Improvements
+
+- Copy Button or DoubleClick Copy code
+- Improve ui and layout
+- For Larger Code Download Option 
+
+## Live Demo
+
+[View Live Demo](https://nexoscreator.github.io/365-Days-of-Web-Development/projects/day-001-syntax-code-box/)
+
+## Screenshots
+
+![Animated Login Form Screenshot](https://github.com/nexoscreator/365-Days-of-Web-Development/raw/main/projects/day-001-syntax-code-box/screenshot.png)
+
+## How to Use
+
+1. Clone the repository
+2. Navigate to the `projects/day-001-syntax-code-box` directory
+3. Open `index.html` in your web browser

projects/day-002-toast-notification/README.md

@@ -0,0 +1,43 @@
+# Day 002: Creating a Toast Notification
+
+## Project Description
+
+This project is part of the **365 Days of Web Development** series, where we build small projects every day to improve our development skills. On Day 2, we implement a simple toast notification system in vanilla JavaScript, HTML, and CSS.
+
+## Technologies Used
+
+- HTML5
+- CSS3 (with animations and transitions)
+- JavaScript (for toggle functionality)
+
+## Features
+
+- Simple toast notifications that appear on button clicks
+- **Customizable Toasts**: Toasts can display different types of messages, such as success, information, danger, or warning.
+- **Accessible Design**: The notifications include aria-live attributes, which ensure they are announced by screen readers.
+- **Notifications Duration**: Notifications auto-dismiss after 3 seconds.
+- **Smooth Animations**: Each toast fades in and out with a smooth transition.
+
+## Future Improvements
+
+- Implement a dark mode option
+- Create a mobile-specific layout for smaller screens
+- Icons With notifications messaging
+- Custom Notification Duration
+
+## Live Demo
+
+[View Live Demo](https://nexoscreator.github.io/365-Days-of-Web-Development/projects/day-002-toast-notification/)
+
+## Screenshots
+
+![Animated Sidebar Menu Screenshot](https://github.com/nexoscreator/365-Days-of-Web-Development/raw/main/projects/day-002-toast-notification/screenshot.png)
+
+## How to Use
+
+1. Clone the repository
+2. Navigate to the `projects/day-002-toast-notification` directory
+3. Open `index.html` in your web browser
+4. Click the toggle button or hover over the sidebar to see the animation in action
+
+This project can serve as a great starting point for implementing animated sidebar menus in your web applications. Feel free to customize and expand upon it!