# bradtraversy/50projects50days

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bradtraversy-50projects50days).**

40,441 stars · 9,764 forks · CSS · mit

## Links

- GitHub: https://github.com/bradtraversy/50projects50days
- awesome-repositories: https://awesome-repositories.com/repository/bradtraversy-50projects50days.md

## Description

This project is an educational code repository containing a collection of over 50 mini web development exercises. It serves as a front-end learning resource designed to help developers practice foundational skills by building small, interactive projects using standard HTML, CSS, and JavaScript.

The repository distinguishes itself by focusing on standalone interactive component prototyping and the implementation of client-side logic. Each project is organized into a decoupled directory structure, allowing users to explore individual interface patterns and visual effects in isolation. These exercises demonstrate how to manipulate the document object model directly and integrate browser-native programming interfaces to handle user input and state.

The collection covers a range of technical capabilities, including asynchronous data retrieval through external service integration and the use of declarative style rules for visual transitions. All projects are delivered as static files, requiring no server-side processing or database configuration to execute.

## Tags

### Education & Learning Resources

- [Educational Repositories](https://awesome-repositories.com/f/education-learning-resources/educational-repositories.md) — Provides a curated collection of small web development exercises for beginners.
- [Frontend Development Tutorials](https://awesome-repositories.com/f/education-learning-resources/frontend-development-tutorials.md) — Builds foundational web skills through interactive projects.
- [Coding Exercises](https://awesome-repositories.com/f/education-learning-resources/coding-exercises.md) — Improves coding proficiency through daily exercises that reinforce web development best practices.
- [Project Collections](https://awesome-repositories.com/f/education-learning-resources/project-collections.md) — Provides a collection of mini web projects for hands-on practice. ([source](https://github.com/bradtraversy/50projects50days#readme))
- [Web Development Curricula](https://awesome-repositories.com/f/education-learning-resources/web-development-curricula.md) — Provides a structured collection of practical coding challenges and learning materials for mastering web interface patterns.

### User Interface & Experience

- [UI Component Prototypes](https://awesome-repositories.com/f/user-interface-experience/ui-component-prototypes.md) — Develops standalone interface elements to demonstrate dynamic styling and DOM manipulation.
- [Component Showcases](https://awesome-repositories.com/f/user-interface-experience/component-showcases.md) — Features a series of interactive components that demonstrate fundamental techniques for building modern browser-based user interfaces.

### Web Development

- [Client-Side Logic](https://awesome-repositories.com/f/web-development/client-side-logic.md) — Handles user input and state management directly in the browser.
- [DOM Manipulation Libraries](https://awesome-repositories.com/f/web-development/dom-manipulation-libraries.md) — Updates the user interface by directly modifying document elements through native browser interfaces.