50 Projects In 50 Days - HTML, CSS & JavaScript

Sharpen your skills by building 50+ quick, unique and fun mini projects

• 💡 Project-based learning focusing on HTML, CSS, and JavaScript skills
• 🚀 Ideal for beginners seeking to create distinctive projects quickly
• 🎨 Emphasis on modern styling techniques such as flexbox, CSS animations, and custom properties
• 🔄 Covers DOM manipulation, events, array methods, HTTP requests, and additional concepts.

• Cards expand and reveal more content when clicked or hovered over.

• Visual indication of progress through steps or stages, often seen in forms or tutorials.

• Navigation elements rotate or transform dynamically for visual interest.

• Search functionality hidden until activated, conserving space and offering a cleaner interface.

• Content gradually appears with a blurry effect while loading to soften the transition.

• Elements animate or transition based on scrolling actions, enhancing user experience.

• Landing page divided into distinct sections or panels, each serving a different purpose or content.

• Input fields or form elements with a wave-like animation effect for a modern touch.

• Interactive board with buttons triggering different sounds or audio clips.

• Collection of humorous, typically cheesy jokes, often presented in a simple format.

• Displaying keycodes corresponding to user keyboard inputs, useful for debugging or educational purposes.

• Frequently Asked Questions section with collapsible or expandable answers for organization.

• Tool for randomly selecting options from a list, often used in games or decision-making.

• Navigation elements with animated transitions or effects for a dynamic user experience.

• Counter that increments smoothly to display increasing numbers, often used for statistics or achievements.

• Reminder or tracker for staying hydrated by prompting users to drink water at regular intervals.

• Application for browsing, searching, and discovering movies, often with additional features like reviews and trailers.

• Slideshow or carousel for cycling through background images or visual content.

• Clock display with customizable themes or visual styles for personalization.

• Interactive buttons with a ripple or wave-like animation upon clicking, providing feedback to the user.

• Ability to drag and drop elements to rearrange or interact with content, enhancing usability.

• Application for creating digital drawings or sketches, often with various tools and customization options.

• Loading animation with fluid, kinetic movement to indicate activity or progress.

• Temporary placeholder content displayed while actual content is loading, preventing layout shifts.

• Navigation bar that remains visible and fixed at the top of the screen while scrolling.

• Slider component allowing adjustment along two separate vertical axes, providing more control.

• Brief, unobtrusive notification messages that appear and disappear automatically.

• Displaying user profiles and repositories from GitHub, often used in portfolio websites or developer tools.

• Heart icon that responds to double-clicking, commonly used for liking or favoriting content.

• Text animation effect where text appears or changes automatically, adding dynamism to content.

• Tool for generating secure passwords with customizable criteria such as length and complexity.

• Conceptual dilemma where one can only pick two out of three options: good quality, low cost, and fast delivery.

• Application for creating, organizing, and managing notes or written content.

• Countdown timer with animated elements or transitions for visual appeal.

• Interactive slideshow for cycling through a series of images or visual content.

• Interactive element that responds to mouse hover, often used for navigation or visual effects.

• Digital encyclopedia or database for cataloging and exploring information about fictional creatures, notably from the Pokémon franchise.

• Navigation system optimized for mobile devices, typically utilizing tabs for easy access to different sections.

• Visual indication of password strength through color-coded backgrounds in input fields.

• Three-dimensional boxes or geometric shapes used as a decorative or background element.

• User interface for verifying user accounts through email, SMS, or other authentication methods.

• Real-time filtering of content based on user-defined criteria, providing instant results.

• User interface elements for collecting feedback from users, often including forms or surveys.

• Slider component with customizable range and styling options, offering flexibility in user interaction.

• Navigation interface optimized for the mobile version of the Netflix streaming platform, providing easy access to content categories and features.

• Application for taking quizzes or tests, often with multiple-choice questions and scoring functionality.

• Rotating or cycling display of testimonials or reviews, adding dynamic content to web pages.

• Feed or stream of randomly selected images, providing visual variety and interest.

• List or organizer for managing tasks or items to be completed, often with checkboxes or prioritization features.

• Game where players catch virtual insects using mouse or touch inputs, often for entertainment or relaxation.

• Basic timer functionality for tracking elapsed time, useful for various purposes like cooking or productivity.

• 💡 Learn 20 projects using pure JavaScript, HTML5, and CSS3 with provided code
• 🚀 Progress from beginner to confident JavaScript developer
• 🎨 Master UI/UX practices for responsive and mobile-first web apps
• ⚡ Explore asynchronous programming with AJAX, Fetch API, Promises, and Async + Await
• 🧹 Develop clean, maintainable, and performant JavaScript code
• 🌐 Utilize Web APIs like localStorage, DOM, and more
• 🖌️ Dive into modern HTML5 features like Canvas, Video, and Audio
• 🎉 Explore modern CSS3 techniques including Animations, Transitions, and Variables
• 🛑 Avoid common mistakes made by JavaScript programmers and beginners
• 🏗️ Build 20 customizable, real-world frontend applications

• 🌟 Updated with all modern features of HTML5, CSS3, and JavaScript!
• 🚀 Live online community of over 900,000+ developers.
• 🎓 Taught by industry experts with experience in Silicon Valley and Toronto.
• 💼 Focus on efficiency to help you get hired or work as a freelancer.
• 📚 No more wasting time on confusing or outdated tutorials.
• 💻 Graduates are working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, and other top tech companies.
• 🛠️ Step-by-step guidance through 20 JavaScript projects for your portfolio.
• 🖥️ Learn to build projects using HTML, CSS, and JavaScript.
• 🔑 JavaScript fundamentals are crucial for future career advancement.
• 💰 Invest in learning JavaScript to future-proof yourself for years to come.

So what are we building? Get ready for this:

• 🖥️ Spock Rock Game: Implemented with Confetti.js and modules.
• 📜 Quote Generator: Utilizes Fetch and Async/Await to fetch quotes from a Quote API, handling CORS.
• 🖼️ Picture-in-Picture: Utilizes the Picture-in-Picture API and Screen Capture API.
• 📚 Bookmarks App: Uses DOM manipulation and localStorage for storing bookmarks.
• 🚀 NASA APOD: Fetches data from NASA API using Async/Await, updates DOM, and utilizes localStorage for storage.
• 🎉 Animated Navigation: Utilizes CSS Animations for animated navigation.
• 🔄 Infinite Scroll: Fetches data from Unsplash API using Async/Await, updates DOM dynamically, and employs a Scroll Event Listener for infinite scrolling.
• ⏳ Countdown App: Utilizes Date object and localStorage for countdown functionality.
• 🎵 Music Player: Implements HTML 5 Audio API for playing music.
• ➗ Calculator: Utilizes Math methods for calculations.
• 🌟 Splash Page: Implements basic DOM manipulation for a splash page.
• 🌓 Light/Dark Mode: Implements DOM manipulation and localStorage for switching between light and dark modes.
• ✅ Form Validation: Utilizes DOM manipulation for form validation.
• 😄 Joke Teller: Fetches jokes from a Joke API using Fetch and Async/Await, converts text to speech.
• 📹 Video Player: Implements HTML 5 Video API for playing videos.
• 🎨 MS Paint Clone: Utilizes Advanced HTML Canvas and localStorage for creating a MS Paint clone.
• 🏓 Pong Clone: Implements Advanced HTML Canvas for creating a Pong game clone.
• ➕ Math Sprint Game: Utilizes SetInterval, DOM manipulation, Array methods, and localStorage for a math sprint game.
• 🔄 Animated Template: Utilizes Template and AOS.js for animated templates.
• 🎯 Drag and Drop: Implements Drag and Drop API and localStorage.