50projects50days

URL: https://github.com/bradtraversy/50projects50days
Category: Themed Directories
Tags: web-development, projects, javascript

Overview

50projects50days is a GitHub repository by Brad Traversy that contains 50+ small, focused web development mini projects built with HTML, CSS, and JavaScript. It serves as a curated collection of example front-end projects that can be used for learning, practice, or reference.

Features

• 50+ mini projects focused on core front-end skills.
• Tech stack: Pure HTML, CSS, and JavaScript (no heavy frameworks).
• Per-project folders: Each project is organized in its own directory (e.g., 3d-boxes-background, animated-countdown, animated-navigation, auto-text-effect, background-slider, blurry-loading, button-ripple-effect, content-placeholder, custom-range-slider, dad-jokes, etc.).
• Project starter template: A _project_starter_ directory to quickly bootstrap new mini projects with a consistent structure.
• UI/UX focused examples: Includes visual and interactive effects such as:
  • 3D box background layouts.
  • Animated countdown timers.
  • Animated navigation menus.
  • Auto-typing / text effects.
  • Background image sliders.
  • Blurry loading effects.
  • Button ripple click effects.
  • Content placeholder/loading skeleton effects.
  • Custom range slider styling and behavior.
  • Simple API-driven fun apps like “dad-jokes”.
• Discoverable via GitHub: Public repository with forks and stars, making it easy to clone, modify, and extend.
• Educational usage: Suitable as a practice track for building one small project per day.

Usage

• Clone or download the repository from GitHub.
• Open individual project folders to inspect HTML/CSS/JS implementations.
• Use _project_starter_ as a base to create new variations or additional mini projects.

Pricing

• Free, open-access GitHub repository (no paid plans indicated).