50 Projects in 50 Days: A 50 Projects 50 Days Course
/50projects50days
50 Projects in 50 Days is worth doing once you already know basic HTML and CSS syntax and just need reps building real UI instead of watching another tutorial. Each folder hands you a starter and a finished demo rather than a written walkthrough, so you learn by comparing your code against the working version. That format punishes total beginners and rewards anyone who already has the fundamentals and wants speed.
What is 50 Projects in 50 Days?
50 Projects in 50 Days is the companion repository for Brad Traversy's course of the same name, holding starter files and finished code for 51 small HTML, CSS and JavaScript builds — an expanding-cards animation, a password generator, a Pokedex that calls an API. Each project sits in its own numbered folder with a live demo linked from the README. There's no framework and no build step.
What the 51 projects cover
- ✓Micro-interactions and animation: expanding cards, rotating navigation, scroll animation, a button ripple effect, a kinetic loader, animated navigation
- ✓Small vanilla-JS utilities: a password generator, an incrementing counter, a simple timer, a random choice picker, event keycodes
- ✓Data-driven UI builds: Movie App, Pokedex, Github Profiles and Dad Jokes — project names that point to external API calls, though the README doesn't spell out which APIs
- ✓Form and input widgets: form wave, custom range slider, verify account UI, live user filter, password strength background
- ✓Apps that hold state between visits: notes app, todo list, and a drink water tracker
- ✓CSS-driven visual effects: blurry loading, background slider, 3D background boxes, double vertical slider, hoverboard
- ✓One canvas-based drawing app and one browser game, the insect catch game
Who this course is for
Bootcamp grads, self-taught developers, and backend engineers picking up frontend skills get the most out of 50 Projects in 50 Days — anyone who already writes basic HTML, CSS and JavaScript and wants faster reps at DOM manipulation, CSS transitions, and event listeners instead of another syntax tutorial. It's a poor fit for someone who has never written a for-loop or doesn't know what a CSS selector does, since there's no explanation layer to lean on when a finished folder doesn't make sense by itself.
How to use the repository
- •Clone the repo, pick a numbered folder, and try to rebuild the project from scratch before opening the finished code inside it.
- •Use the linked live demo on 50projects50days.com to see the target result before you start typing, then compare your version against it when you're stuck.
- •Work through folders in order for a rough difficulty ramp, or jump straight to a project name matching a skill you want to drill, like the custom range slider for form styling or the notes app for local storage.
- •Pull a single finished project's HTML/CSS/JS into a personal portfolio page, since nothing in the repo is gated behind a paid course wall.
Strengths
- ✓51 self-contained projects means you can dip in for 20 minutes without committing to a multi-hour tutorial.
- ✓Each project ships with a working live demo, so you always know what 'done' looks like before you start.
- ✓Everything is plain HTML, CSS and JavaScript — no framework, build tool, or package manager to configure first.
- ✓MIT-licensed, so finished projects can go straight into a portfolio.
Limitations and gaps
- △There's no written explanation or comment inside the repo walking through the why behind each solution — the README links out to Brad Traversy's course page for the teaching, so on its own this reads like an answer key rather than a lesson.
- △The maintainer's note in the README says pull requests are only accepted for bug fixes, not new projects or rewrites, so it isn't a community-curated or actively expanding list.
- △The projects are just numbered 01 through 51 with no difficulty rating or prerequisite guide, so a total beginner has to guess which folders are approachable and which assume prior JS knowledge.
Alternatives for learning web development
Frequently asked questions
The 50 Projects in 50 Days GitHub repository is free and open source under the MIT license, so the starter files, finished code, and live demos are free to clone and use. The README doesn't list pricing for the linked Traversy Media course page, so that part isn't confirmed here.
50 Projects in 50 Days doesn't include beginner explanations or comments walking through the code, so it assumes you already know basic HTML, CSS, and JavaScript syntax. Someone who has never written a function or a CSS selector will struggle to follow a finished solution folder without outside help.
50 Projects in 50 Days is built entirely with HTML, CSS, and JavaScript — no frontend framework, backend, or build tool is used anywhere in the 51 projects. GitHub lists CSS as the repository's primary language.
50 Projects in 50 Days includes finished solution code in every one of its 51 project folders, each paired with a linked live demo, so you can compare your own attempt against the working version.
50 Projects in 50 Days is MIT-licensed, so nothing in the license blocks using a finished project in a personal portfolio. Treat the exercises as practice you build from scratch rather than copy-pasting the repo's solution code wholesale, since portfolio reviewers can usually tell the difference.
The README doesn't state an official timeline for finishing all 51 projects in 50 Projects in 50 Days beyond the pacing implied by the course name — one project per day would take about 50 days, but the projects vary a lot in size, from a simple counter to a full drawing app, so actual pace depends on your experience level.
Want a second opinion on 50projects50days?
Ask an AI that can read this page — one click and you get its take on 50projects50days.