# 50projects50days: Build 50 Mini Web Projects with HTML, CSS, and JS

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/bradtraversy-50projects50days
Generated for open source discovery and AI-assisted research.

50projects50days is an exceptional GitHub repository offering over 50 mini web projects designed to enhance your HTML, CSS, and JavaScript skills. This collection provides hands-on experience, making it perfect for beginners and those looking to solidify their front-end development knowledge. Each project comes with a live demo, allowing users to see the final result before diving into the code.

GitHub: https://github.com/bradtraversy/50projects50days
OSRepos URL: https://osrepos.com/repo/bradtraversy-50projects50days

## Summary

50projects50days is an exceptional GitHub repository offering over 50 mini web projects designed to enhance your HTML, CSS, and JavaScript skills. This collection provides hands-on experience, making it perfect for beginners and those looking to solidify their front-end development knowledge. Each project comes with a live demo, allowing users to see the final result before diving into the code.

## Topics

- HTML
- CSS
- JavaScript
- Web Development
- Front-end
- Learning Projects
- Coding Challenges
- Brad Traversy

## Repository Information

Last analyzed by OSRepos: Fri Jul 10 2026 12:28:58 GMT+0100 (Western European Summer Time)
Detail views: 2
GitHub clicks: 0

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction

The **50projects50days** repository by Brad Traversy is an outstanding resource for anyone looking to master front-end web development through practical application. With over 50 mini web projects, this collection focuses on building skills in HTML, CSS, and JavaScript. Boasting over 40,000 stars and nearly 10,000 forks, it's a highly popular and trusted resource in the developer community. Whether you're a beginner or an experienced developer seeking to refresh your fundamentals, this repository offers a structured and engaging way to learn by doing.

## Installation

To get started with the projects in **50projects50days**, you simply need to clone the repository to your local machine.

bash
git clone https://github.com/bradtraversy/50projects50days.git
cd 50projects50days


Each project is contained within its own folder. Navigate into any project folder to explore its code and open the `index.html` file in your browser to see the live result.

## Examples

The repository features a diverse range of projects, each demonstrating different concepts and techniques in web development. Here are a few examples that showcase the variety you'll find:

*   **Expanding Cards**: A simple yet engaging UI element that expands on click.
    *   [GitHub Link](https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards){:target="_blank"}
    *   [Live Demo](https://50projects50days.com/projects/expanding-cards/){:target="_blank"}
*   **Movie App**: An application that fetches and displays movie data, often using an API.
    *   [GitHub Link](https://github.com/bradtraversy/50projects50days/tree/master/movie-app){:target="_blank"}
    *   [Live Demo](https://50projects50days.com/projects/movie-app/){:target="_blank"}
*   **Pokedex**: A classic project for learning API interactions and data display.
    *   [GitHub Link](https://github.com/bradtraversy/50projects50days/tree/master/pokedex){:target="_blank"}
    *   [Live Demo](https://50projects50days.com/projects/pokedex/){:target="_blank"}
*   **Todo List**: A fundamental application for understanding state management and user interaction.
    *   [GitHub Link](https://github.com/bradtraversy/50projects50days/tree/master/todo-list){:target="_blank"}
    *   [Live Demo](https://50projects50days.com/projects/todo-list/){:target="_blank"}

Each project is self-contained, allowing you to focus on specific concepts without getting overwhelmed.

## Why Use 50projects50days?

This repository is an invaluable resource for several reasons:

*   **Hands-on Learning**: The best way to learn is by doing. These projects provide practical experience with core web technologies.
*   **Portfolio Building**: Each completed project can be a valuable addition to your front-end development portfolio.
*   **Skill Reinforcement**: Solidify your understanding of HTML, CSS, and JavaScript concepts through repeated application in different contexts.
*   **Variety of Concepts**: From UI animations to API integrations, the projects cover a broad spectrum of front-end techniques.
*   **Expert Guidance**: Created by Brad Traversy, a renowned instructor, the projects are well-structured and designed for effective learning.

## Links

*   **GitHub Repository**: [https://github.com/bradtraversy/50projects50days](https://github.com/bradtraversy/50projects50days){:target="_blank"}
*   **Official Course Link**: [https://www.traversymedia.com/50-Projects-In-50-Days](https://www.traversymedia.com/50-Projects-In-50-Days){:target="_blank"}
*   **Live Demos (Main Page)**: [https://50projects50days.com/](https://50projects50days.com/){:target="_blank"}