Guide · Open source
How to use 50projects50days: clone, explore and build
Updated · written with AI from the project's own documentation and checked against our catalogue data
50projects50days is the main GitHub repository for Brad Traversy's 50 Projects in 50 Days course. It holds a series of small front-end web projects, each built with plain HTML, CSS and JavaScript. This guide shows you how to clone the repository, find a project in the list, open its live demo and source folder, and decide which projects to study first.
50projects50daysbradtraversy/50projects50days · ★ 40.6k · MIT Install options & downloads Quick start
- 1Clone the repository. Run git clone with the repository URL from the README to copy the project files to your computer.
- 2Pick a project. Choose one number from the README table, starting with an early project such as Expanding Cards.
- 3Open the live demo. Use the Live Demo link in the table to see the project working before you read the code.
- 4Read the source folder. Follow the project name link to its folder and read the HTML, CSS and JavaScript.
- 5Change and experiment. Edit a small part of the code, such as a colour or a timing value, and observe the result.
- 6Work through the course. Use the linked 50 Projects in 50 Days course for explanations and move through the projects in order.
What is 50projects50days?
The repository is the central home for all of the projects in the Traversy Media course. Each project is a small, self-contained web page, such as expanding cards, a sound board, a password generator or a drawing app.
Every project uses only HTML, CSS and JavaScript. There is no backend, database or API in the listed projects, so they are a good fit for learning front-end basics.
- Small, single-purpose projects rather than one large app
- Plain HTML, CSS and JavaScript
- Licensed under MIT
Get the code: clone the repository
The README's install method is to clone the repository to your own computer. The README lists no other prerequisites, so you only need a way to run the git command.
Run the command below in the folder where you want the project files to live.
git clone https://github.com/bradtraversy/50projects50days.gitBrowse the project list
The README contains a table numbered from 01 upward. Each row gives the project name, a link to its source folder on GitHub and a link to a live demo hosted at 50projects50days.com.
Use the live demo first to see what a project does. Then open its source folder to read the code behind it.
- 01 Expanding Cards
- 09 Sound Board
- 22 Drawing App
- 31 Password Generator
- 37 Pokedex
Study a project: from demo to source
Pick one project and open its live demo in your browser. Note the behaviour: what happens on click, hover or scroll.
Then open the matching folder in the repository and read the HTML, CSS and JavaScript. Because each project is self-contained, you can follow one feature at a time without tracing a large codebase.
- Start with simpler projects such as Expanding Cards or Progress Steps
- Compare the CSS animation in one project with a similar effect in another
- Change a colour, text or timing value and see what breaks
Learn with the course
The README links to the 50 Projects in 50 Days course on the Traversy Media website. The README itself mainly points to the course and project folders, so use the course for step-by-step explanations.
If you need a full written guide, the README alone will not provide one.
Who should use it, and what to avoid
This repository suits beginners who want hands-on HTML, CSS and JavaScript practice, and developers who want small UI examples to copy or adapt.
It is not a production application or framework. If you need backend, database or API examples, look elsewhere.
What people use it for
- Practising HTML, CSS and JavaScript by rebuilding small interactive widgets
- Studying a single UI effect, such as a ripple button or a toast notification
- Adapting a self-contained component, such as a FAQ accordion, into your own site
- Following the 50 Projects in 50 Days course as a structured set of exercises
Frequently asked questions
Is 50projects50days free to use?
Yes, the repository is licensed under the MIT licence, as shown on its GitHub page. You can clone, read and adapt the code under those terms.
What do I need to install 50projects50days?
The README lists no prerequisites. The only install step it gives is cloning the repository with git clone. Each project is built with plain HTML, CSS and JavaScript.
Do I need to know JavaScript before using this repository?
The README does not state a skill requirement. The projects are aimed at learners who want hands-on practice with HTML, CSS and JavaScript, so basic familiarity with those languages will help you follow the code.
Does 50projects50days include backend or database examples?
No. The listed projects are front-end only and use plain HTML, CSS and JavaScript. For backend, database or API examples you will need a different resource.
What are good alternatives to 50projects50days?
Comparable projects include freeCodeCamp, The Odin Project and Frontend Mentor. These cover front-end learning in different formats, so choose based on whether you prefer short projects or a longer curriculum.
How is 50projects50days different from freeCodeCamp or The Odin Project?
50projects50days is a set of many short, self-contained front-end projects tied to one course. The comparable projects listed are broader learning paths, so 50projects50days suits learners who prefer building many small projects.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use 50projects50days if you are a beginner or student who wants many short, hands-on HTML, CSS and JavaScript projects, or if you want small UI examples to copy. Pick something else, such as a production framework, a backend tutorial or a full written curriculum like The Odin Project, if you need those things.
Install options & downloads