50projects50days

50 Projects in 50 Days is a collection of over fifty small, self-contained web projects built with HTML, CSS, and vanilla JavaScript, meaning JavaScript without any frameworks or libraries. The problem it addresses is that beginners learning web development often understand the theory of CSS and JavaScript but struggle to build anything practical because they lack exposure to how real interface effects are actually coded. Each project in this collection is a focused exercise that demonstrates one specific technique or visual pattern.

Each project lives in its own folder within the repository and typically consists of just three files: an HTML file for structure, a CSS file for styling, and a JavaScript file for interactivity. The projects cover a wide range of front-end patterns including expanding image cards, animated progress steps, a rotating navigation menu, a hidden search widget, blurry image loading transitions, scroll-triggered animations, a split landing page, form animations, a sound board, a drag-and-drop interface, a drawing canvas app, toast notifications, GitHub profile lookups using an API, password generator, animated countdown timer, and many others. Each one includes a live demo hosted online so you can see the finished result before looking at the code.

You would use this repository as a hands-on learning resource for front-end development fundamentals. It is particularly useful if you want to build muscle memory with DOM manipulation, CSS animations and transitions, and working with browser APIs. The entire stack is HTML, CSS, and plain JavaScript with no build tools or package managers required.