Skip to content

DevilDesired/100-javascript-projects

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

100 Projects In 100 Days - HTML, CSS & JavaScript

Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaScript. This collection serves as a comprehensive resource for developers of all levels to practice their skills, explore new techniques, and get inspired by a wide range of web projects. Consider this as the ideal companion if you want to embark on the 100 Days of Code journey and challenge yourself.

Project Showcase

Explore each project individually and view live demos to see them in action:

# Project
001 Expanding Cards
002 Progress Steps
003 Rotating Navigation Animation
004 Hidden Search Widget
005 Blurry Loading
006 Scroll Animation
007 Split Landing Page
008 Form Wave
009 Sound Board
010 Dad Jokes
011 Event Keycodes
012 FAQ Collapse
013 Random Choice Picker
014 Animated Navigation
015 Incrementing Counter
016 Drink Water
017 Movie App
018 Background Slider
019 Theme Clock
020 Button Ripple Effect
021 Drag N Drop
022 Drawing App
023 Kinetic Loader
024 Content Placeholder
025 Sticky Navbar
026 Double Vertical Slider
027 Toast Notification
028 GitHub Profiles
029 Double Click Heart
030 Auto Text Effect
031 Password Generator
032 Good Cheap Fast
033 Notes App
034 Animated Countdown
035 Image Carousel
036 Hoverboard
037 Pokedex
038 Mobile Tab Navigation
039 Password Strength Background
040 3D Background Boxes
041 Verify Account UI
042 Live User Filter
043 Feedback UI Design
044 Custom Range Slider
045 Netflix Mobile Navigation
046 Quiz App
047 Testimonial Box Switcher
048 Random Image Feed
049 Todo List
050 Insect Catch Game
051 Video Background
052 Portfolio with CSS Grid
053 Touch Slider
054 CSS Loaders
055 Glass Dashboard
056 Image Comparison Slider
057 Parallax Background with SVG
058 3D Product Card
059 Form Validator
060 Movie Seat Booking
061 Custom Video Player
062 Exchange Rate Calculator
063 DOM Array Methods
064 Menu Slider & Modal
065 Hangman Game
066 Meal Finder
067 Expense Tracker
068 Music Player
069 Infinite Scroll Posts
070 Typing Game
071 Speech Text Reader
072 Memory Cards
073 Lyrics Search App
074 Relaxer App
075 Breakout Game
076 New Year Countdown
077 Sortable List
078 Speak Number Guessing Game
079 Creative Agency Website
080 Health Dashboard
081 Animated SVG
082 Parallax Landing Page
083 Full-Screen Image Slider
084 Fluid Image Lightbox
085 Sneaker Shop
086 Coming Soon Page
087 Sliding Sign In & Sign Up Form
088 Promo Code
089 One Color UI
090 Tooltip
091 Chat Interface
092 Music Streaming Service
093 Creative Portfolio
094 Laptop UI
095 Headphones Product Page
096 Cloud Hosting Service
097 Terminal Style Landing Page
098 Magazine Layout
099 Parallax Website
100 Hulu Webpage Clone
101 Cascade Layers
102 Container queries
103 Candy Crush Game
104 Archery Game
105 Speed Typing Game
106 Breakout Game
107 Minesweeper Game
108 Tower Blocks Game
109 Ping Pong Game

Get Inspired

Check out my github for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.

Setup Instructions

To get started with these projects, follow these simple steps:

  1. Fork the Repository: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account.

  2. Clone the Repository: Clone the forked repository to your local machine using the following command in your terminal:

    git clone https://github.com/Your-Username/html-css-javascript-projects.git
    cd html-css-javascript-projects
  3. Open with VS Code: Open the cloned repository in Visual Studio Code (VS Code) or your preferred code editor.

  4. Install Live Server Extension: If you haven't already, install the Live Server extension for VS Code. This extension allows you to launch a local development server and automatically refresh your browser whenever you make changes to your HTML, CSS, or JavaScript files. You can install it from the VS Code Marketplace.

  5. Start Coding: Start exploring the projects, make changes, experiment with different ideas, and unleash your creativity! Use Live Server to preview your changes in real-time and see how they affect the project.

Show Your Support

If you find these projects helpful or interesting, please consider starring the repository. It's a simple gesture that helps to boost the visibility of the project and show appreciation for the effort put into creating it. Your support is greatly appreciated. Thank you!

Credits

All the credit goes to Vaibhav Kesarwani

About

100+ mini web projects crafted with HTML, CSS, and JavaScript—perfect for learning and practice.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 45.9%
  • CSS 31.4%
  • JavaScript 22.1%
  • SCSS 0.6%