Web-Development-Projects

This is a collection of web development mini-projects I am working on to improve my html, css, and js skills. The projects are listed below with a short description. All the projects are from an Udemy course "50 Projects in 50 Days" by Brad Traversy.

Project List

1. Expanding Cards- This project has 5 panels of photos when you click on one it expands out. Some added functionality will be to have compress on click later on.
2. Progress Steps- Upon click a panel it moves to next circle or step in a process.
3. Rotating Navigation- Upon click a panel it rotates up revealing more icons.
4. Hidden Search Widget- Upon click it reveals a search bar to fill information and toggles.
5. Blur Percentage- the screen will show a percentage it loads from a blurred screen.
6. Scroll Animation: the boxes will come in from the right and left alternating as you scroll down the page.
7. Sound Board: sounds play when you click the button.
8. Split Screen Loading: the screen expands and shrinks depending on which one you are on. The button color also changes as you hover on it.
9. Form Wave: the form text moves up when you go to fill in the input.
10. Dad Joke Generator: It updates with a new joke when you click a button.
11. Event Key Code: when you press a key it shows the key, keycode, and the event code
12. FAQ Dropdown: when you click the button the faq answer drops down and retracts when you click the x button
13. Random Choice Selector: You create a list of choice and it cycles through and picks one randomly. This was the trickiest js I have encountered so far.
14. Animation Navigation: You click the button and it closes the navigation links to just the button to save space on the page.
15. Increment Counter: It counts up to your target value for whatever you want to count.
16. Drink Water: It adds up your the total amount of water you drank for a day.
17. Movie App: It shows a list of the most popular recent movies and also has a search feature.
18. Background Slider- the background changes with when you click
19. Kinetic Loader- the triangles infinite rotate with animation.
20. Button Ripple- a circle effect happens when you click on the button.
21. Theme Clock - A dynamic clock where you can switch it from light to dark mode.
22. Drap and Drop - Image can be moved from different div locations.
23. Drawing app - The canvas api is used to create a window to draw from size 5-50 with a provided color spectrum.
24. Content Holder - It loads content when you open it up.