50 Projects in 50 Days

50 Mini Web Projects using Vannila HTML, CSS & Javascript

Credits: 50 Projects 50 Days by Brad Traversy & Florin Pop

Day 1

expanding-cards

Expanding Cards

Live Demo

Day 2

progress-steps

Progress Steps

Live Demo

Day 3

rotating-navigation-animation

Rotating Navigation Animation

Live Demo

Day 4

hidden-search-widget

Hidden Search Widget

Live Demo

Day 5

Blurry Loading

Live Demo

Day 6

scroll-animation

Scroll Animation

Live Demo

Day 7

split-landing-page

Split Landing Page

Live Demo

Day 8

form-wave

Form Wave

Live Demo

Day 9

sound-board

Sound Board

Live Demo

Day 10

dad-jokes

Dad Jokes

Live Demo

Day 11

event-keycodes

Event Keycodes

Live Demo

Day 12

Faq Collapse

Live Demo

Day 13

random-choice-picker

Random Choice Picker

Live Demo

Day 14

animated-navigation

Animated Navigation

Live Demo

Day 15

incrementing-counter

Incrementing Counter

Live Demo

Day 16

drink-water

Drink Water

Live Demo

Day 17

movie-app

Movie App

Live Demo

Day 18

background-slider

Background Slider

Live Demo

Day 19

Theme Clock

Live Demo

Day 20

button-ripple-effect

Button Ripple Effect

Live Demo

Day 21

drag-n-drop

Drag N Drop

Live Demo

Day 22

drawing-app

Drawing App

Live Demo

Day 23

Kinetic Loader

Live Demo

Day 24

content-placeholder

Content Placeholder

Live Demo

Day 25

sticky-navbar

Sticky Navbar

Live Demo

Day 26

double-vertical-slider

Double Vertical Slider

Live Demo

Day 27

toast-notification

Toast Notification

Live Demo

Day 28

github-profiles

Github Profiles

Live Demo

Day 29

double-click-heart

Double Click Heart

Live Demo

Day 30

auto-text-effect

Auto Text Effect

Live Demo

Day 31

password-generator

Password Generator

Live Demo

Day 32

good-cheap-fast

Good Cheap Fast

Live Demo

Day 33

notes-app

Notes App

Live Demo

Day 34

animated-countdown

Animated Countdown

Live Demo

Day 35

image-carousel

Image Carousel

Live Demo

Day 36

hoverboard

Hoverboard

Live Demo

Day 37

pokedex

Pokedex

Live Demo

Day 38

mobile-tab-navigation

Mobile Tab Navigation

Live Demo

Day 39

password-strength-background

Password Strength Background

Live Demo

Day 40

3d-background-boxes

3d Background Boxes

Live Demo

Day 41

verify-account-ui

Verify Account Ui

Live Demo

Day 42

live-user-filter

Live User Filter

Live Demo

Day 43

feedback-ui-design

Feedback Ui Design

Live Demo

Day 44

custom-range-slider

Custom Range Slider

Live Demo

Day 45

netflix-mobile-navigation

Netflix Mobile Navigation

Live Demo

Day 46

quiz-app

Quiz App

Live Demo

Day 47

testimonial-box-switcher

Testimonial Box Switcher

Live Demo

Day 48

random-image-feed

Random Image Feed

Live Demo

Day 49

todo-list

Todo List

Live Demo

Day 50

insect-catch-game

Insect Catch Game

Live Demo

About The Projects

50 Mini Web Projects using Vannila HTML, CSS and Javascript. Every project is different and involves fundamental concepts of HTML, CSS and Javascript. All the Projects are responsive.
Concepts I learnt includes-

1. Webpage Layout Using HTML
2. CSS Stylings
3. Responsive Design
4. Key CSS Concepts like Flex, transform, transition, keyframes, etc
5. DOM Manipulations using Javascript
6. Fetch APIs/Axios
7. Array methods - map(), filter(), reduce(), etc

Github Repo For All Projects