I have created these projects with the aim to practice HTML5 & CSS3, and learn JavaScript. I followed this course on Udemy.
- The course can be found here: https://www.udemy.com/course/50-projects-50-days/
- The website, including live demos of each mini-project, can be found here: https://50projects50days.com/
| Day | Project title | Any extra information |
|---|---|---|
| 1 | Expanding cards | |
| 2 | Progress steps | |
| 3 | Rotating navigation | |
| 4 | Hidden search widget | |
| 5 | Blurry loading | |
| 6 | Scroll animation | Useful for future projects. |
| 7 | Split landing page | |
| 8 | Form wave animation | |
| 9 | Sound board | Used the audio HTML tag for the first time |
| 10 | Dad jokes | This is my first JavaScript project calling an API! |
| 11 | Event keycodes | |
| 12 | FAQ collapse | The content collapse toggle in this project is useful for future use. |
| 13 | Random choice picker | |
| 14 | Animated navigation | |
| 15 | Incrementing counter | |
| 16 | Drink water | |
| 17 | Movie app | This project involves an asynchronous API call. |
| 18 | Background slider | |
| 19 | Theme clock | |
| 20 | Button ripple effect | |
| 21 | Drag n drop | |
| 22 | Drawing app | Uses the canvas API to draw on a canvas element. |
| 23 | Kinetic loader | |
| 24 | Content placeholder | |
| 25 | Sticky navbar | Navigation bar changes as the user scrolls, making this project a good example for scrolling animations in new projects. |
| 26 | Double vertical slider | |
| 27 | Toast notification | |
| 28 | GitHub profiles | This project uses axios, with the GitHub public APIs, and includes error handling too. Loved this one! |
| 29 | Double click heart | |
| 30 | Auto text effect | |
| 31 | Password generator | |
| 32 | Good cheap fast | This project uses toggles which are nice for future projects. |
| 33 | Notes app | CRUD app using local storage! |
| 34 | Animated countdown | |
| 35 | Image carousel | |
| 36 | Hoverboard | |
| 37 | Pokedex | |
| 38 | Mobile tab navigation | |
| 39 | Password strength background | Uses some Tailwind CSS. |
| 40 | 3D background boxes | |
| 41 | Verify account UI | |
| 42 | Live user filter | |
| 43 | Feedback UI design | |
| 44 | Custom range slider | |
| 45 | Netflix mobile navigation | |
| 46 | Quiz app | |
| 47 | Testimonial box switcher | |
| 48 | Random image feed | |
| 49 | Todo list | |
| 50 | Insect catch game |