update

nexoscreator · Oct 16, 2024 · a243b11 · a243b11
1 parent 15439ff
commit a243b11
Show file tree

Hide file tree

Showing 22 changed files with 722 additions and 41 deletions.
diff --git a/Day 01/Readme.md b/Day 01/Readme.md
diff --git a/Day 02/Readme.md b/Day 02/Readme.md
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nexos Creator 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/Readme.md b/Readme.md
@@ -1,26 +1,40 @@
 # 365 Days of Web Development
 
-Welcome to the **365 Days of Web Development** series! This project provides daily short tutorials covering various web development topics, with code snippets, examples, and explanations.
+Welcome to my **365 Days of Web Development** challenge! In this repository, I'm creating a new web development project every day for a year. Each project is designed to showcase different web technologies and improve my skills as a developer.
 
-## Day 01: How to Create a Syntax Code Box
+## Project Structure
 
-On Day 01, you'll learn how to create a syntax-highlighted code box using simple HTML and CSS.
+- `/projects`: Contains all the daily projects
+- `/resources`: Useful resources and project ideas
+- `/scripts`: Helper scripts for project management
 
-### How to Use
-1. Clone this repository:
-   ```bash
-   git clone https://github.com/nexoscreator/365daysofwebdev.git
-   ```
-2. Navigate to `day01`:
-   ```bash
-   cd 365daysofwebdev/day01
-   ```
-3. Open `index.html` in a browser to see the syntax code box.
+## Daily Projects
+
+| 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) |
+| ... | ... | ... | ... |
+
+
+## Project Showcase Playlist
 
-### Tutorial Video
 Watch the tutorial for this lesson on [YouTube](https://youtube.com/playlist?list=PLsi_twzeQSKRxJ7AkX_FpbalYD0bjsxZ0).
 
-### Connect with Me
-- [Subscribe YouTube Channel](https://youtube.com/@nexoscreator)
+## Resources
+
+- [Project Ideas](./resources/project-ideas.md)
+- [Useful Tools](./resources/useful-tools.md)
+
+## Contributing
+
+If you'd like to contribute to this project, please read our [Contributing Guidelines](./CONTRIBUTING.md).
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
+
+## Connect with Me
+- [Subscribe YouTube Channel](https://www.youtube.com/@nexoscreator)
 - [Follower on GitHub](https://github.com/nexoscreator)
 - [Join Discord Community](https://discord.com/invite/A3euTAVqHv)
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>365 Days of Web Development</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <div class="logo">365 Days of Web Dev</div>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/projects">Projects</a></li>
+                <li><a href="/resources">Resources</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section id="home">
+            <h1>Welcome to My 365 Days of Web Development Journey</h1>
+            <p>Join me as I create a new web project every day for a year!</p>
+        </section>
+
+        <section id="about">
+            <h2>About This Challenge</h2>
+            <p>I've committed to building a new web development project every day for 365 days. This challenge is designed to improve my skills, explore new technologies, and create a diverse portfolio of web applications.</p>
+        </section>
+
+        <section id="projects">
+            <h2>My Projects</h2>
+            <div id="project-grid">
+                <!-- Project cards will be dynamically inserted here by JavaScript -->
+            </div>
+        </section>
+
+        <section id="contact">
+            <h2>Get in Touch</h2>
+            <form id="contact-form">
+                <input type="text" id="name" name="name" placeholder="Your Name" required>
+                <input type="email" id="email" name="email" placeholder="Your Email" required>
+                <textarea id="message" name="message" placeholder="Your Message" required></textarea>
+                <button type="submit">Send Message</button>
+            </form>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Nexos Creator. All rights reserved.</p>
+    </footer>
+
+    <!-- Popup container -->
+    <div id="popup-container" class="popup-container">
+        <div class="popup-content">
+            <span class="close-popup">&times;</span>
+            <h2 id="popup-title"></h2>
+            <iframe id="project-iframe" src="" frameborder="0"></iframe>
+        </div>
+    </div>
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/projects/day-001-syntax-code-box/Readme.md b/projects/day-001-syntax-code-box/Readme.md
@@ -0,0 +1,21 @@
+# Day 01: How to Create a Syntax Code Box
+
+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.
+
+## Overview
+
+In this tutorial, we demonstrate how to create a syntax-highlighted code box using basic HTML and CSS. You can use this to display code snippets on your web pages with proper formatting.
+
+## Live Demo
+
+[View Live Demo](https://your-demo-link-here.com)
+
+## Screenshots
+
+![Project Screenshot](screenshot.png)
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
diff --git a/Day 01/index.html → projects/day-001-syntax-code-box/index.html b/Day 01/index.html → projects/day-001-syntax-code-box/index.html
diff --git a/Day 01/main.js → projects/day-001-syntax-code-box/main.js b/Day 01/main.js → projects/day-001-syntax-code-box/main.js
diff --git a/Day 01/style.css → projects/day-001-syntax-code-box/style.css b/Day 01/style.css → projects/day-001-syntax-code-box/style.css
diff --git a/projects/day-002-toast-notification/Readme.md b/projects/day-002-toast-notification/Readme.md
@@ -0,0 +1,28 @@
+# Day 02: Creating a Toast Notification
+
+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.
+
+## 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.
+
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+
+## Live Demo
+
+[View Live Demo](https://your-demo-link-here.com)
+
+## Screenshots
+Here are some examples of the toast notifications you can create:
+
+![Project Screenshot](screenshot.png)
diff --git a/Day 02/index.html → ...cts/day-002-toast-notification/index.html b/Day 02/index.html → ...cts/day-002-toast-notification/index.html
diff --git a/Day 02/main.js → projects/day-002-toast-notification/main.js b/Day 02/main.js → projects/day-002-toast-notification/main.js
diff --git a/Day 02/style.css → ...ects/day-002-toast-notification/style.css b/Day 02/style.css → ...ects/day-002-toast-notification/style.css
diff --git a/resources/project-ideas.md b/resources/project-ideas.md
@@ -0,0 +1,51 @@
+# Project Ideas for 365 Days of Web Development
+
+## Small Projects (1-3 days)
+1. Personal portfolio website
+2. To-do list application
+3. Weather app using a public API
+4. Calculator with basic and scientific functions
+5. Countdown timer
+6. Random quote generator
+7. Simple blog layout
+8. Responsive navigation menu
+9. Image gallery with lightbox
+10. Form validation
+
+## Medium Projects (4-7 days)
+11. Recipe finder app
+12. Expense tracker
+13. Pomodoro timer with task management
+14. Memory card game
+15. Music player with playlist functionality
+16. Chat application (front-end only)
+17. Interactive quiz app
+18. Kanban board for task management
+19. Markdown previewer
+20. E-commerce product page with cart functionality
+
+## Larger Projects (1-2 weeks)
+21. Social media dashboard
+22. Job board with search and filter options
+23. Booking system for a small business
+24. Personal finance management app
+25. Fitness tracker with data visualization
+26. Blog platform with CMS functionality
+27. Real-time collaborative whiteboard
+28. Project management tool
+29. Online code editor with syntax highlighting
+30. E-learning platform with course management
+
+## Advanced Projects (2+ weeks)
+31. Full-stack social media application
+32. E-commerce platform with payment integration
+33. Video streaming service
+34. Real-time multiplayer game
+35. Cryptocurrency portfolio tracker
+36. AI-powered chatbot
+37. Virtual event platform
+38. Augmented reality (AR) web application
+39. Progressive Web App (PWA) with offline functionality
+40. Blockchain-based voting system
+
+Remember to adjust project complexity based on your skills and available time. Feel free to combine ideas or expand on them to create unique projects.
diff --git a/resources/useful-tools.md b/resources/useful-tools.md
@@ -0,0 +1,69 @@
+# Useful Tools for Web Development
+
+## Design Tools
+1. Figma - Collaborative interface design tool
+2. Adobe XD - UI/UX design and prototyping tool
+3. Sketch - Digital design platform for Mac
+4. Canva - Graphic design platform
+
+## Code Editors
+1. Visual Studio Code - Free, open-source code editor by Microsoft
+2. Sublime Text - Sophisticated text editor for code
+3. WebStorm - Powerful IDE for modern JavaScript development
+4. Atom - Hackable text editor for the 21st Century
+
+## Version Control
+1. Git - Distributed version control system
+2. GitHub - Web-based hosting service for version control using Git
+3. GitLab - Web-based DevOps lifecycle tool
+4. Bitbucket - Git code management for teams
+
+## Frontend Frameworks/Libraries
+1. React - JavaScript library for building user interfaces
+2. Vue.js - Progressive JavaScript framework
+3. Angular - Platform for building mobile and desktop web applications
+4. Svelte - Cybernetically enhanced web apps
+
+## CSS Frameworks
+1. Bootstrap - Popular CSS framework
+2. Tailwind CSS - Utility-first CSS framework
+3. Bulma - Modern CSS framework based on Flexbox
+4. Foundation - Responsive front-end framework
+
+## Backend Frameworks
+1. Express.js - Web application framework for Node.js
+2. Django - High-level Python web framework
+3. Ruby on Rails - Server-side web application framework
+4. Laravel - PHP web application framework
+
+## Database Management Systems
+1. MongoDB - Document-oriented NoSQL database
+2. PostgreSQL - Open-source relational database
+3. MySQL - Open-source relational database management system
+4. Firebase - Google's mobile platform for developing apps
+
+## API Development and Testing
+1. Postman - API development environment
+2. Insomnia - Cross-platform HTTP and GraphQL Client
+3. Swagger - API development tools for teams
+4. GraphQL - Query language for APIs
+
+## Performance and Optimization
+1. Google Lighthouse - Automated tool for improving web page quality
+2. WebPageTest - Website performance testing tool
+3. GTmetrix - Website speed and performance optimization
+4. Chrome DevTools - Web developer tools built into Google Chrome
+
+## Deployment and Hosting
+1. Netlify - All-in-one platform for automating modern web projects
+2. Vercel - Cloud platform for static sites and Serverless Functions
+3. Heroku - Cloud platform as a service supporting several programming languages
+4. DigitalOcean - Cloud infrastructure provider
+
+## Collaboration and Project Management
+1. Trello - Web-based Kanban-style list-making application
+2. Asana - Web and mobile application designed to help teams organize, track, and manage their work
+3. Slack - Business communication platform
+4. Notion - All-in-one workspace for notes, tasks, wikis, and databases
+
+Remember to explore these tools and find the ones that work best for your workflow and projects!