50-projects-front-end

Summary

Learn front end development by 50 projects.

The original course link referenced by this repository is Course Link

Recommended study order

Before you officially start practicing the project, it is strongly recommended that you first learn the three basic skills provided below: HTML, CSS and JavaScript.

| # | Project | Live Demo | | ----- | ------------------------------------------------------------ | ------------------------------------------------------------ | | base1 | HTML Quick Start | HTML Quick Start | | base2 | CSS Quick Start | CSS Quick Start | | base3 | JavaScript Quick Start | JavaScript Quick Start | | 01 | Expanding Cards | Live Demo | | 02 | Progress Steps | Live Demo | | 03 | Rotating Navigation Animation | Live Demo | | 04 | Hidden Search Widget | Live Demo | | 05 | Blurry Loading | Live Demo | | 06 | Scroll Animation | Live Demo | | 07 | Split Landing Page | Live Demo | | 08 | Form Wave | Live Demo | | 09 | Sound Board | Live Demo | | 10 | Dad Jokes | Live Demo | | 11 | Event Keycodes | Live Demo | | 12 | Faq Collapse | Live Demo | | 13 | Random Choice Picker | Live Demo | | 14 | Animated Navigation | Live Demo | | 15 | Incrementing Counter | Live Demo | | 16 | Drink Water | Live Demo | | 17 | Movie App | Live Demo | | 18 | Background Slider | Live Demo | | 19 | Theme Clock | Live Demo | | 20 | Button Ripple Effect | Live Demo | | 21 | Drag N Drop | Live Demo | | 22 | Drawing App | Live Demo | | 23 | Kinetic Loader | Live Demo | | 24 | Content Placeholder | Live Demo | | 25 | Sticky Navbar | Live Demo | | 26 | Double Vertical Slider | Live Demo | | 27 | Toast Notification | Live Demo | | 28 | Github Profiles | Live Demo | | 29 | Double Click Heart | Live Demo | | 30 | Auto Text Effect | Live Demo | | 31 | Password Generator | Live Demo | | 32 | Good Cheap Fast | Live Demo | | 33 | Notes App | Live Demo | | 34 | Animated Countdown | Live Demo | | 35 | Image Carousel | Live Demo | | 36 | Hoverboard | Live Demo | | 37 | Pokedex | Live Demo | | 38 | Mobile Tab Navigation | Live Demo | | 39 | Password Strength Background | Live Demo | | 40 | 3d Background Boxes | Live Demo | | 41 | Verify Account Ui | Live Demo | | 42 | Live User Filter | Live Demo | | 43 | Feedback Ui Design | Live Demo | | 44 | Custom Range Slider | Live Demo | | 45 | Netflix Mobile Navigation | Live Demo | | 46 | Quiz App | Live Demo | | 47 | Testimonial Box Switcher | Live Demo | | 48 | Random Image Feed | Live Demo | | 49 | Todo List | Live Demo | | 50 | Insect Catch Game | Live Demo | | 51 | Simple Timer | Live Demo |

Step 1

Learn the three basic skills provided above: HTML, CSS and JavaScript.

| Document | Contents | | --------------- | ----------------- | | baseHTML | HTML Basics | | baseCSS | CSS Basics | | base_javascript | javascript Basics |

工具推荐：VScode

扩展插件：Mithril Emmet、Live Server、Auto Rename Tag、Prettier - Code formatter

Step 2

Exercise Project.

| Document | Contents | | -------- | ---------------------- | | projects | All exercises projects |

Step 3

Build your own project.

| Document | Contents | | --------------- | -------- | | custom_projects | TODO |