Welcome to my web development learning journey! 🌟
This repository documents my progress as I master frontend and full-stack development
Showcasing my best work - updated as I create more advanced projects
| Project | Description | Technologies | Live Demo |
|---|---|---|---|
| 🎨 Dominate Design | A designing application implemented using HTML, CSS, and JavaScript | HTML5, CSS3, JavaScript | 🔗 View Live |
| 📸 Image Editor | An image editing application implemented using HTML, CSS, and JavaScript | HTML5, CSS3, JavaScript | 🔗 View Live |
| 📺 Drameoo OTT Platform | An OTT platform project implemented using React and TailwindCSS. | React, TailwindCSS | 🔗 View Live |
| ⛅ Weather App | A weather app implemented using JavaScript, HTML, and CSS. | JavaScript, HTML5, CSS3 | 🔗 View Live |
| 🐍 Snake Game | A classic snake game implemented using JavaScript, HTML, and CSS. | JavaScript, HTML5, CSS3 | 🔗 View Live |
| 🔥 Freakish Mind - NFT Landing | Advanced NFT-themed landing page with full responsiveness, hover effects, and clip-path animations | HTML5, CSS3, Responsive, Clip-path, Hover Effects | 🔗 View Live |
| 🪔 Diwali Celebration Project | Diwali Themed landing page with vibrant colors and festive elements with toggle diya feature (Light Up) | HTML5, SCSS,JS, Responsive, Animations, Interactive | 🔗 View Live |
| 🌟 Glow Box | Glow Box project with interactive lighting effects and smooth animations | HTML5, CSS,JS, Responsive, Animations, Interactive | 🔗 View Live |
This section gets updated with each new milestone project! 🚀
This repository serves as a comprehensive portfolio of my web development tasks and projects completed during my journey to become a full-stack developer. Each task represents a milestone in my learning process, showcasing the evolution of my skills from basic HTML/CSS to advanced web technologies.
- ✅ Master HTML5 semantic structure and accessibility
- ✅ Create responsive and visually appealing CSS designs
- ✅ Implement advanced CSS techniques (clip-path, hover effects, animations)
- ✅ Work with CSS preprocessors (SCSS/SASS)
- ✅ Build fully responsive websites for all devices
- ✅ Apply modern UI/UX design principles
- 📚 Continue learning through Sheryians Cohort 2.0 program
web-development-tasks/
├── Challenges/ # Additional coding challenges
├── Festival/ # Festive projects
├── Javascript/ # JavaScript projects
├── Practice/ # Practice exercises and experiments
├── Task01/ # Personal Resume Website
├── Task02/ # Aesthetic Journeys - Visual Storytelling
├── Task03/ # Fit Life - Fitness Website
├── Task04-ApplePage/ # Apple Website Clone
├── Task05-TheGarage/ # Luxury Cars Showcase
├── Task06/ # Gridverse - Superhero Grid Layout
└── ... # More tasks will be added as assigned
Status: ✅ Completed
Description: Diwali Themed landing page with vibrant colors and festive elements with toggle diya feature (Light Up).
🔗 Live Preview • 📂Code
Status: ✅ Completed
Description: An OTT platform project implemented using React and TailwindCSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A store management app implemented using React and TailwindCSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A contact management app implemented using React and TailwindCSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A clothing e-commerce project implemented using React and TailwindCSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A card UI project implemented using React and TailwindCSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A tennis court booking website implemented using React and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A stylish portfolio website implemented using React and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A window UI project implemented using JavaScript, HTML, and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A classic snake game implemented using JavaScript, HTML, and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A classic hangman game implemented using JavaScript, HTML, and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A copy of youtube shorts page implemented using JavaScript, HTML, and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A virtual piano implemented using JavaScript, HTML, and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A task management Kanban board implemented using JavaScript, HTML, and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: Made weather app that shows current weather information using JavaScript, HTML, and CSS.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: An Image editing application implemented using HTML, CSS, and JavaScript.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A designing application implemented using HTML, CSS, and JavaScript.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A clean and modern landing page design with a focus on user experience and conversion optimization.
🔗 Live Preview • 📂 Challenge Details & Code
Status: ✅ Completed
Description: A minimalist landing page inspired by the Nothing brand, emphasizing simplicity and elegance.
🔗 Live Preview • 📂 Challenge Details & Code
Status: ✅ Completed Description: A NFT-themed landing page with vibrant colors and modern design elements with responsive layouts.
🔗 Live Preview • 📂 Challenge Details & Code
Status: ✅ Completed
Description: A fun and interactive landing page inspired by the Kung Fu Panda movie, featuring animations and a playful design.
🔗 Live Preview • 📂 Practice Details & Code
Status: ✅ Completed
Description: A professional landing page for Nexora Consulting, showcasing services and client testimonials with a modern design.
🔗 Live Preview • 📂 Practice Details & Code
Status: ✅ Completed
Description: A professional landing page for ALVY FASHION, showcasing the latest fashion trends and collections with a modern design.
🔗 Live Preview • 📂 Practice Details & Code
Status: ✅ Completed
Description: Simple counter app to increment/decrement values.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: Randomly picks players/teams for fun team generation.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: Generates random background/colors for design exploration.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: Displays random motivational quotes; great for practicing arrays and DOM updates.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A progress bar that visually indicates the completion status of a task or process.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A spotlight effect that follows the cursor, highlighting specific areas of the webpage.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A glowing box effect that responds to mouse movements, creating an interactive visual experience.
🔗 Live Preview • 📂 Code
Status: ✅ Completed
Description: A professional resume website built with HTML5 and CSS3, featuring custom typography and clean design.
🔗 Live Preview • 📂 Task Details & Code
Status: ✅ Completed
Description: A captivating visual storytelling experience using background images and poetic text overlays with custom animations.
🔗 Live Preview • 📂 Task Details & Code
Status: ✅ Completed
Description: A modern fitness website with dark theme design, featuring navigation and fitness-focused content layout.
Status: ✅ Completed
Description: A pixel-perfect recreation of Apple's website design with modern layout, navigation, and brand aesthetics.
Status: ✅ Completed
Description: An elegant luxury car showcase website with card-based layout and premium automotive branding.
Status: ✅ Completed
Description: A superhero-themed website featuring CSS Grid layout techniques and modern hero character presentations.
| Frontend | Styling | Tools | Version Control |
|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
 |
Current Progress: Completing tasks assigned by Sheryians Cohort 2.0
✅ HTML Fundamentals
✅ CSS Basics & Styling
✅ Layout Techniques
✅ Responsive Design
✅ Modern UI/UX Design
📚 Continuing with mentor-guided learning
- 🏆 Challenges: Creative problem-solving and real-world scenarios
- 📝 Tasks & Practice: Foundation building with structured assignments
- 🌟 Featured Projects: Best work showcased for portfolio and growth tracking
- 🔄 Continuous Updates: Featured section evolves with skill advancement
- 🎨 Created a professional-looking resume website from scratch
- 📱 Implemented custom typography and design systems
- 🎯 Learned semantic HTML structure and accessibility basics
- 💡 Understanding of CSS box model and layout principles
-
Clone the repository:
git clone https://github.com/AlokKumarYadav2410/web-development-tasks.git
-
Navigate to any task folder:
cd web-development-tasks/Task01 -
Open in browser:
- Simply open
index.htmlin your preferred browser - Or use Live Server extension in VS Code for hot reload
- Simply open
Each task folder contains:
- Source code with detailed comments
- Learning objectives and outcomes
- Challenges faced and solutions implemented
- Areas for improvement and future enhancements
- Course: Sheryians Cohort 2.0
- Documentation: MDN Web Docs, W3Schools
- Community: Dev.to, Stack Overflow, GitHub Community
- Design Inspiration: Dribbble, Behance, Awwwards
- 📚 Learn & Get Inspired - Study the code structure and techniques
- 🎯 Use for Reference - Understand implementation approaches
- 🛠️ Fork for Learning - Create your own version with modifications
- 💡 Apply Concepts - Use the ideas in your own original projects
- 🎓 Educational Use - Use for learning and educational purposes
- 🚫 Direct Copy-Paste - Don't copy entire projects as-is
- 🚫 Claim as Your Own - Don't remove credits or claim authorship
- 🚫 Commercial Use - Don't use for commercial purposes without permission
- 🚫 Redistribute - Don't redistribute the exact code without attribution
- 🚫 README Theft - Don't copy my README structure/content without credits
✨ If you get inspired by my work:
→ Give proper attribution: "Inspired by @AlokKumarYadav2410"
→ Make it your own with significant modifications
→ Link back to the original repository
→ Be creative and add your unique touch!
⚠️ Remember: Learning from code ✅ | Copying code ❌
Original inspiration: [Project Name] by Alok Kumar Yadav
Repository: https://github.com/AlokKumarYadav2410/web-development-tasks
Modified and enhanced by: [Your Name]- Twitter: @AlokDevJourney
- LinkedIn: ALOK KUMAR YADAV
- GitHub: @AlokKumarYadav2410
This repository is protected under a Custom Learning License. Respect the creator's work while learning and growing! 🌱