Welcome to my personal repository for the “50 Days, 50 Projects” challenge based on the O’Reilly Media book series. In this repository, I will be documenting and organizing my journey of completing 50 mini-projects using HTML, CSS, and JavaScript over the span of 50 days.
This repository is a collection of 50 self-contained projects, each designed to improve my skills in front-end web development. The projects will cover various concepts, techniques, and challenges, helping me to grow as a developer.
Each project follows a consistent structure (lmao as if I’m consistent):
project-name/
├── index.html
├── css/
│ └── styles.css
└── js/
└── script.js
- `index.html`: HTML file for the project’s user interface.
- `css/styles.css`: CSS file for styling the project.
- `js/script.js`: JavaScript file for interactivity and functionality.
Additionally, the `images/` directory may contain project-specific images or assets.
- Boiler Plate Code
- Project 1: Expand Cards
- Project 2: page progress bars
- Project 3: Slide Away Page
- Project 4: Hidden Search
- Project 5: Blur Loading Screen
- Project 6: Scroll Animation
- Project 7: Split Landing Page
- Project 8: Login Form Wave
- Project 9: Sounds of annoyance
- Project 10: API to Literature Clock + Joke
- Project 11: Keycode detect and show
- Project 12: FAQ Page
- Project 13: Choice Maker
- Project 14: Nav Fallout
- Project 15: Counter thing from all sites
- Project 16: Water Cup Count
- Project 17: Movie DB from TMDB API
- Project 18: Sliding Wallpapers
- Project 19: Clock with Date
- Project 20: Button Ripple Effect
- Project 21: Drag and Drop
- Project 22: Drawing Canvas
- Project 23: Loading Page
- Project 24: Content Box with loading
- Project 25: Website Top Bar
- Project 26: Vertical Sliders
- Project 27: Notification Popup
- Project 28: gayhub profile
- Project 29: Double Heart Click. Really not interested, like the circle. Heres Github
- Project 30: Automatic Text Typing Effect
- Project 31: Password Generator
- Project 32: slidy radio check box
- Project 33: Notes taking app - data storage wont work with hardened firefox
Skipping Chapters to interesting ones
- Project 36: Hover Highlight grid
- Project 37: Pokedex with API calls
Each project will have a unique focus and aim to teach me something new.
Feel free to explore the projects in this repository. They are for personal learning and growth purposes only. If you find any interesting concepts or ideas, feel free to use them in your own projects.
I’m just improving my front-end development skills to achieve “full stack completion” Follow along with my progress and feel free to connect with me if you’re also undertaking this challenge or if you have any suggestions! Happy coding!