Repo of mini projects using HTML, CSS, & vanilla JS

Strengthening the basics & building lots of reusable components. Vanilla JS, CSS & HTML.

A simple and responsive water tracker app built with HTML5, CSS3 and Javascript without the use of libraries and frameworks.

Day-4 Hidden Search Widget made using HTML, CSS, JS. Created with CodeSandbox

Day-5 Blurry Loading made using HTML, CSS, JS. Created with CodeSandbox

Day-7 Split Landing Page made using HTML, CSS, JS. Created with CodeSandbox

Day-11 Event Key Codes. Created with CodeSandbox

Day-23 Kinetic CSS Loader. Created with CodeSandbox

Day-24 Content placeholder. Created with CodeSandbox

Day-27 Toast Navigation. Method-1

Day-48 Random Image Feed. Created with CodeSandbox

A little project for picking random choices, built using HTML5, CSS3 and Javascript without the use of frameworks or libraries.

This repository includes the 50projects50days course examples.

This Progress Steps Project uses HTML, CSS, and JavaScript to make numbered circles and a line going through each change color after the "next" and "prev" buttons are clicked.

I have created progress steps or progress bar, whatever you wish to call it. It can be used in major projects in shopping carts, payment gateways or in filling up forms.

This Hidden Search Widget has been made using HTML, CSS and JS. When the search icon is clicked, the search bar expands and when it is clicked again, the search bar collapses.

This blurry loading feature has been created using HTML, CSS and JS. I have used it with a background image but it can be used with any image

This Hidden Search Widget project uses JavaScript and CSS transitions to display a search icon; when the icon is clicked, the search bar widens for typing.

I have created a Split Landing Page using HTML, CSS and JavaScript. The content can be changed as per the user requirement. When one part of the screen is hovered on, it expands.

This login page has been created using HTML, CSS and JS and the main function of JS in this page is executing the Wave Animation Effect. This effect can be used according to the users' requirement.