100 Web Development Projects in 100 Days

Build 100 independent projects from beginner to advanced and master HTML, CSS, JavaScript, APIs, and full-stack skills.

Created bySchool of AI, Arjun Vaid

Last updated 7/2026

English

English [Auto],

What you'll learn

Build 100 practical web development projects in 100 days.
Create responsive websites using HTML, CSS, and JavaScript.
Design portfolio pages, landing pages, dashboards, and web applications.
Build interactive tools such as calculators, timers, quizzes, and generators.
Use JavaScript to manage events, forms, arrays, objects, and dynamic content.
Store and retrieve browser data using local storage.
Connect applications to third-party APIs and display real-time information.
Build weather, movie, book, recipe, stock, crypto, and news applications.
Create productivity apps such as task managers, trackers, and planners.
Develop e-commerce features including catalogs, carts, wishlists, and filters.
Build advanced dashboards and management system interfaces.
Create full-stack applications, real-time chat platforms, and content systems.
Improve debugging, problem-solving, and application development skills.
Build a strong web development portfolio for jobs and freelance work.
Progress from beginner projects to advanced, production-style applications.

Course content

5 sections • 101 lectures • 30h 33m total length

Resources and Code Files for all the 100 Projects0:13
Personal profile page16:51
Simple portfolio website20:57
Digital business card17:03
Learn to build a digital business card by applying semantic page structure, responsive layout, and content hierarchy, with a focus on separating structure, presentation, and behavior across files.
Resume or CV website17:01
Product landing page17:08
Learn to build a product landing page with semantic page structure and responsive layout. Reinforce content hierarchy by examining files, following line-by-line code explanations, and testing interactions.
Restaurant homepage16:59
Travel destination page17:06
Event registration page16:59
Photography gallery16:33
Recipe page17:05
Build the recipe page by exploring semantic page structure, responsive layout, and content hierarchy across separate structure, presentation, and behavior files, then test accessibility and keyboard navigation.
Blog homepage mockup20:56
FAQ accordion page16:12
Pricing table page16:01
Testimonial slider page17:36
Countdown timer for an event16:39
Age calculator16:39
Tip calculator16:23
Build a tip calculator in a step-by-step, live-code walkthrough that emphasizes form inputs, calculation logic, and formatted output, while organizing code into structure, presentation, and behavior files.
BMI calculator16:24
Master a BMI calculator by building it piece by piece, learning form inputs, calculation logic, and formatted output while exploring file roles, accessibility, and responsive design.
Temperature converter16:06
Currency converter UI16:03
Random quote generator15:58
Explore building a random quote generator by examining code structure, arrays, randomness, dynamic styles, and copyable output, with a step-by-step walkthrough of HTML, CSS, and JavaScript files.
Random joke generator16:01
Color palette generator16:01
Gradient generator16:23
Password generator16:15
Build a password generator by inspecting files, implementing form inputs, calculation logic, and formatted output, then test accessibility and responsiveness with step-by-step debugging.

To-do list app19:37
Notes app19:37
Habit tracker19:26
Daily journal app19:27
Weather dashboard18:26
GitHub profile finder18:04
Movie search app19:30
Book search app18:13
Meme generator15:43
Pomodoro timer17:04
Build a pomodoro timer in a 100-day web development course, learning time arithmetic, interval lifecycle, and stateful controls through structured, piece-by-piece code.
Stopwatch app17:04
Build a functional stopwatch app through incremental coding, exploring time arithmetic, intervals, lifecycle, and stateful controls while inspecting the files, styling, and testing for a complete web project.
Analog clock16:16
Quiz app18:13
Flashcard app16:13
Calculator app16:05
Build a calculator app step by step, focusing on expression building, delegation, and error handling. Learn how separate files handle structure, presentation, and behavior while testing in a browser.
Drum kit app16:32
Learn to build a drumkit app using the Web Audio API, mastering keyboard controls and playback state through a structured, line-by-line code walkthrough.
Soundboard app16:38
Image carousel17:57
Lightbox gallery17:21
Form validation project17:45
Multi-step form17:03
Expense tracker19:25
Income and savings tracker19:34
Markdown previewer16:45
Text-to-speech converter15:38
Build a text-to-speech converter by iteratively coding, testing, and reviewing Web Speech API feature detection and accessible controls. Learn modular html structure, separating content, presentation, and behavior.

Speech-to-text notes app16:09
Kanban board18:17
Drag-and-drop task planner18:32
Bookmark manager19:30
Build the bookmark manager through a clear, piece-by-piece workflow, review files, and test in the browser, applying a laced approach to structure, presentation, and behavior.
Reading list tracker19:37
Workout tracker19:44
Meal planner19:33
Recipe finder with API18:19
Build a recipe finder with API by applying fetch and async/await, handle loading and error states, and render API data, through a line-by-line walkthrough that separates structure, presentation, and behavior.
Music player16:56
Build a music player using the Web Audio API, focusing on keyboard controls and playback state while exploring file roles, structure, and test-driven iteration.
Podcast player UI18:00
Build a podcast player UI for the course 100 web development projects in 100 days, mastering playback controls, progress state, and library filtering.
Video library app17:41
News aggregator18:18
Stock watchlist dashboard16:50
Crypto price tracker18:19
Job board UI21:09
Build a data-driven job board UI by constructing modular HTML structure, presentation, and behavior. Learn data-driven card search, filters, and array methods to drive the finished project.
Freelance project marketplace UI21:11
Create a data-driven freelance project marketplace UI with card search and filters, using array methods. Explore how the project splits structure, presentation, and behavior for easier understanding and testing.
E-commerce product catalog21:11
Shopping cart app17:21
Wishlist app17:16
Learn to build a wishlist app step by step, review project structure, manage product state, totals, and persistent selections, and test the interface across devices.
Product comparison tool17:12
Advanced search and filter interface21:05
Interactive chart dashboard16:50
Calendar and event planner19:30
Develop a calendar and event planner by building create and delete flows, exploring file roles (structure, presentation, behavior), and testing with keyboard navigation, accessible labels, and responsive styling.
Appointment booking UI15:55
Map-based location finder18:09
Build a map-based location finder by exploring file roles, fetching API data with async/await, and rendering results while handling loading and error states.

Admin dashboard17:01
Build a modular admin dashboard by studying files with structure, presentation, and behavior, and building in short sections with testing. Master summary metrics, data visualization, and interactive filters.
School management dashboard19:30
Library management system19:36
Inventory management app19:43
Build and test an inventory management app through line-by-line code construction, reviewing file roles, and practicing create and delete flows to derive summaries.
Invoice generator16:09
PDF downloader or exporter app15:29
File upload manager17:11
URL shortener app16:50
Build a URL shortener app while mastering URL validation, local mappings, and clipboard API, with guided code exploration, testing, and iterative improvements.
QR code generator15:27
Master the qr code generator in project 84 through a line-by-line code walkthrough, reviewing the goal, files, and testing camera or image input feature detection and qr workflows.
QR code scanner web app16:41
Build a QR code scanner web app through a structured, line-by-line code walkthrough. Focus on camera or image input detection, QR workflows, and separating structure, presentation, and behavior.
Poll and voting app16:15
Survey builder16:37
Feedback collection platform19:38
Customer support ticket UI19:27
Build a customer support ticket ui by exploring files, implementing create and delete flows, and testing the result. Learn to separate structure, presentation, and behavior while following line-by-line code explanations.
Chatbot interface17:19

Real-time chat app25:06
Team collaboration workspace18:24
Full-stack blog CMS25:06
Social media mini platform25:07
Forum or community Q&A site24:54
Learning management system25:05
Real estate listing platform25:12
Build a real estate listing platform from a guided, line-by-line code walkthrough. Explore node.js, http server, rest or server-sent events, and client-server state to understand how the project comes together.
Full-stack e-commerce store24:55
Progressive Web App with offline mode21:58
build a progressive web app with offline mode by implementing a web app manifest, service worker, and offline fallback, through a guided line-by-line coding process.
Multiplayer browser game25:00

Requirements

No previous web development experience is required.
No professional programming background is necessary.
Basic computer and internet navigation skills are sufficient.
A Windows, macOS, or Linux computer is recommended.
A modern web browser such as Chrome, Firefox, or Edge is required.
A free code editor such as Visual Studio Code is recommended.
An internet connection is helpful for downloading tools and using APIs.
Students should be willing to practice and build projects consistently.
Basic HTML, CSS, or JavaScript knowledge is helpful but not required.
All projects are introduced gradually, making the course beginner-friendly.

Description

This course contains the use of artificial intelligence.

Turn your interest in coding into a job-ready portfolio with 100 Web Development Projects in 100 Days. This hands-on course helps beginners and aspiring developers learn web development by building practical projects every day. Instead of spending months watching theory-heavy lessons, you will create real websites, interactive applications, dashboards, productivity tools, API-powered projects, and full-stack platforms that demonstrate your skills.

You will begin with beginner-friendly projects such as a personal profile page, portfolio website, digital business card, resume website, product landing page, restaurant homepage, photography gallery, pricing table, and event registration page. These projects will strengthen your understanding of HTML, CSS, responsive layouts, page structure, typography, forms, navigation, and modern user interface design.

As you progress, you will use JavaScript to build interactive applications, including calculators, timers, random generators, a to-do list, notes app, habit tracker, quiz app, Pomodoro timer, expense tracker, password generator, image carousel, and form validation system. You will learn how to work with events, functions, arrays, objects, local storage, browser APIs, and dynamic page updates.

The intermediate projects introduce API integration, data handling, search, filtering, dashboards, and advanced front-end development. You will build a weather dashboard, GitHub profile finder, movie search app, book search app, recipe finder, news aggregator, stock watchlist, cryptocurrency tracker, shopping cart, calendar planner, map-based location finder, and interactive chart dashboard. These projects show how modern web applications retrieve, process, and display real-time information.

Later, you will create larger applications such as an admin dashboard, inventory management app, invoice generator, file upload manager, URL shortener, survey builder, support ticket interface, chatbot UI, and school or library management system. You will then move into advanced web development with real-time chat, team collaboration tools, a full-stack blog CMS, social media platform, learning management system, real estate marketplace, e-commerce store, Progressive Web App, and multiplayer browser game.

The course follows a project-based path that gradually increases in complexity. You can build at your own pace, revisit earlier projects, customize features, and improve each application with your own branding and ideas. You will also learn to organize files, write cleaner code, test features, fix common errors, and present finished applications professionally.

Throughout the course, you will practice responsive web design, front-end development, full-stack development, debugging, reusable components, user experience, accessibility, application architecture, version control, and project deployment. Each project helps you solve a real problem, improve your coding confidence, and add meaningful work to your portfolio.

No professional programming experience is required. Basic computer skills, curiosity, and consistent practice are enough to begin. Whether you are learning for a new career, improving your current skills, preparing for interviews, or building products for clients, this course provides a structured roadmap from simple pages to production-style applications.

This course is ideal for beginners, students, career changers, freelancers, and self-taught programmers who want to become confident web developers. By the end of 100 days, you will have built 100 projects, developed a strong GitHub portfolio, and gained practical experience for internships, freelance opportunities, junior developer roles, or your own digital products.

Start building today and turn your web development knowledge into visible, career-focused results.

Who this course is for:

Complete beginners who want to learn web development through projects.
Students who prefer hands-on learning instead of theory-only lessons.
Aspiring front-end and full-stack web developers.
Self-taught programmers looking for a structured learning roadmap.
Career changers preparing for entry-level web development roles.
Freelancers who want to build websites and applications for clients.
Developers who want to strengthen their HTML, CSS, and JavaScript skills.
Learners who want to create a professional GitHub and project portfolio.
Job seekers preparing for internships or junior developer positions.
Entrepreneurs who want to build and test their own web application ideas.
Designers interested in turning user interfaces into functional websites.
Anyone who wants to build 100 practical projects and improve through daily coding.

100 Web Development Projects in 100 Days

What you'll learn

Explore related topics

Course content

Beginner26 lectures • 7hr 4min

Early Intermediate25 lectures • 7hr 24min

Intermediate25 lectures • 7hr 43min

Upper Intermediate15 lectures • 4hr 23min

Advanced10 lectures • 4hr 1min

Requirements

Description

Who this course is for: