50 HTML, CSS (SCSS) and Vanila JS projects
Each html page is a different fron-end mini project.
Most of the ideas for each projects are based on the course by Brad Traversy at https://www.udemy.com/course/50-projects-50-days/
I tried to add my own little twist to each project, and some other ideas I found along the way.
This a list of projects by categories (Number of the project in parentheses)
Some cool UI components for websites:
- Sliders: Expanding (1), Duplicate Background (19), Vertical (27), Animated (37).
- UI Feedback Design (2)
- Navigation Menus: Rotating (3), Hidden Search (4)
- Split Landing Page (7)
- Cards: Pure Rotating CSS Cards (8)
- Accordion (13)
- Pure CSS Loaders (15, 24)
- Buttons (22)
- Checkboxes (34)
- Animations (36, 42)
- Mobile Navigation Emulator (40)
- Custom Range Slider (45)
- Testimonials with a random Twist (47)
- Image Grid with side Menu (48)
Some fun games:
- Match the animals (9)
- Simple Tictactoe Clon (12)
- Pong Clon (21)
- Rock, Paper, Scissors (29)
- Minesweeper (31)
- 2048 Clon (43)
- Catch them Game (50)
Some fun with APIs:
- Dad Jokes API (10)
- The dogAPI (5, 39)
- PokeAPI (6, 18)
- MovieDB (25)
- Rick&Morty (26)
- Marvel (30)
- Random Advice (32)
- Harry Potter (44)
- Trivia API (46)
- Random Users and Random Rick&Morty Quotes (47)
Interesting JS libraries:
- Marked (35)
- GSAP (36)
- AXIOS (39)
Other fun projects:
- Blurry Loading (5)
- Scroll Animations (6)
- HMTL Key codes and Sound Tag (11)
- Random Choser for an input list (14)
- Increment Counters (16)
- Beer measures converter (17)
- Fun with SVG: Clock (20)
- Canvas Drawing (23)
- Rest stop (28)
- Password Generator (33)
- Notepad WebApp (35)
- Hover Color Board (38)
- Password Strength Checker (41)
- ToDo List (49)
I started this project January 01, 2022. Finished it on February 2nd. Currently working on the intro page design.
Check out the live page of the project at https://50in100projects.netlify.app/
Let me know if you have any comments or suggestions to improve.
Obviously, feel free to use any of the components for your own projects, these are not original ideas, I am just using them to learn and for portfolio purposes.