50projects50days
A course repo of 50+ small HTML, CSS and JavaScript mini-projects for learning front-end basics.
- Stars
- 40.6k
- Forks
- 9.7k
- Licence
- MIT
- Language
- CSS
- Last update
- 1.7 years ago
- Type
- Learning resource
No commits in over a year — check for forks or alternatives before adopting.
What it is
This is the main repository for the 50 Projects in 50 Days course by Brad Traversy. It contains a series of small web projects, such as expanding cards, a sound board, a password generator and a drawing app, each built with plain HTML, CSS and JavaScript. Each project is listed in a table with a link to its source folder and a live demo.
- Open a project folder and read the HTML, CSS and JavaScript to see how a specific effect is built
- Compare the live demo with the source code for a given project
- Work through the projects in order as a practice curriculum
- Copy a small component such as a toast notification or FAQ collapse into your own page
Great for
- Beginners who want hands-on practice with HTML, CSS and JavaScript
- Students following the 50 Projects in 50 Days course
- Developers wanting small, self-contained UI examples to copy or adapt
- Learners who prefer building many short projects over one large app
Not ideal for
- People looking for a production-ready application or framework, since these are small teaching projects
- Developers who want backend, database or API examples, since the listed projects are front-end only
- Readers who need a full written guide, because the README mainly links to the course and project folders
How to get it
- 1
Clone and build from source
Clone the repository
git clone https://github.com/bradtraversy/50projects50days.git - 2
Run it
- Clone the repository to your machine.
- Open a project folder such as expanding-cards.
- Open its index.html file in a web browser.
- Edit the HTML, CSS or JavaScript and refresh the page to see changes.
- 3
Get the most out of it
- Use the live demo links in the README to compare the running version with the source code.
- Read the CSS and JavaScript in one project at a time to see how each effect is made.
- Modify a project, such as changing colors or behavior, to test your understanding.
- Follow the linked course at traversymedia.com if you want the guided lessons.
Downloads
Strengths
- Covers many common front-end patterns in small, separate projects
- Each project has a live demo linked from the README
- Released under the MIT license
Trade-offs
- The README shown is truncated, so the full project list and setup details are not confirmed here
- Projects are educational examples rather than maintained products
- Learning the material fully is tied to the paid course linked in the README
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.