Small front-end projects, built without use of such frameworks or libraries, for learning purposes
➕ Feel free to add new projects in order to reach to 100!
➕ Feel free to modify the current ones!
➕ Those projects are the best first step for beginner to intermediate front-end devs
Clone the project and install live-server, then run live-server command in the root directory to see them live.
| # | Project name | Description | Demo |
|---|---|---|---|
| 1 | Animated svg | Simple svg animation with use of keyframes | live demo |
| 2 | Auto text writing | Text writing animation | live demo |
| 3 | Background Slider | Gallery of Images of nature | live demo |
| 4 | Blurry Loading | A Blurry animation while image loading | live demo |
| 5 | Button ripple effect | A Materiel design effect | live demo |
| 6 | Canvas Graph | Historical Graph without libraries | live demo |
| 7 | Carousel | Slides of Images | live demo |
| 8 | Dashboard Layout | Dashboard of tables & Graphs | live demo |
| 9 | Draggable Modal | Modal that moves | live demo |
| 10 | Drawing Canvas | A Canvas to draw lines | live demo |
| 11 | Flip Loader | A rectangle that flips | live demo |
| 12 | Github Profiles | Realtime search of github profiles | live demo |
| 13 | Hidden Search Component | It shows when hove over search section | live demo |
| 14 | Incrementing Counter | Number Incrementing effect | live demo |
| 15 | Input Items | Input Items component | live demo |
| 16 | Layers Effect Sidebar | Colored Layes animation when toggle sidebar | live demo |
| 17 | MacOS Desktop | Mac OS Desktop clone | live demo |
| 18 | Mobile Tab Navigation | Mobile version of navigation | live demo |
| 19 | Modal Component | Modal well animated | live demo |
| 20 | Movie List Search | Movie search app | live demo |
| 21 | Notification Component | Notification with timeout progress bar | live demo |
| 22 | Parallax Scroll | Parallax scroll effect of images | live demo |
| 23 | Password Typing Animation | Animation that reacts to password typing cas | live demo |
| 24 | Password Validation Background | Background no longer appear as long as the password is weak | live demo |
| 25 | Payment Checkout | Payment Checkout with validation | live demo |
| 26 | Pricing Page Toggle | Toggle between yearly and monthly prices | live demo |
| 27 | Quiz App | Test your programatical skills now | live demo |
| 28 | Random Image Feed | See some Images from pexels | live demo |
| 29 | Realtime Search | A Realtime search for users | live demo |
| 30 | Resizable Element | Resize an element | live demo |
| 31 | Resizable Modal | Resize a Modal | live demo |
| 32 | Scroll Animation | Animation while scrolling | live demo |
| 33 | Skeleton | Blocks of animated elements to fill data when loading | live demo |
| 34 | Spinner Loader | Spinner loader | live demo |
| 35 | Split Landing Page | A Realtime search for users | live demo |
| 36 | Steps Component | Steps component to devide the process of entering data | live demo |
| 37 | Sticky Element | Element stick to top when scroll | live demo |
| 38 | Task Board | The next Trello | live demo |
| 39 | Temperature Converter | 4 Temperature units converter | live demo |
| 40 | Tennis Loader | A ball bouncing loader | live demo |
| 41 | Testimonials Slider | Slides of testimonials | live demo |
| 42 | Theme Clock | A clock with light and dark mode | live demo |
| 43 | Toast Component | A component for messaging notifications | live demo |
| 44 | Todo List | Modern Todo List in terms of UI | live demo |
| 45 | Upload Component | Modern Upload component | live demo |
| 46 | Vertical Slider | To see nature | live demo |
| 47 | Video Landing Page | Footages of videos as background of the showcase | live demo |
| 48 | Weather App | a beautifull weather app | live demo |
| 49 | Win Desktop | Windows 11 Desktop clone | live demo |
| 50 | Windows Loader | Windows 10 offical loader cloned | live demo |