[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1207":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},1207,"50projects50days","bradtraversy\u002F50projects50days","bradtraversy","50+ mini web projects using HTML, CSS & JS",null,"CSS",40579,9747,626,47,0,5,50,77.5,"MIT License",false,"master",true,[],"2026-06-12 04:00:08","# 50 Projects in 50 Days - HTML\u002FCSS and JavaScript\n\nThis is the main repository for all of the projects in the course.\n\n-   [Course Link](https:\u002F\u002Fwww.traversymedia.com\u002F50-Projects-In-50-Days)\n\n\n|  #  | Project                                                                                                                     | Live Demo                                                                         |\n| :-: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |\n| 01  | [Expanding Cards](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fexpanding-cards)                             | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fexpanding-cards\u002F)               |\n| 02  | [Progress Steps](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fprogress-steps)                               | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fprogress-steps\u002F)                |\n| 03  | [Rotating Navigation Animation](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Frotating-nav-animation)                       | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Frotating-navigation-animation\u002F) |\n| 04  | [Hidden Search Widget](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fhidden-search)                          | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fhidden-search-widget\u002F)          |\n| 05  | [Blurry Loading](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fblurry-loading)                               | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fblurry-loading\u002F)                |\n| 06  | [Scroll Animation](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fscroll-animation)                           | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fscroll-animation\u002F)              |\n| 07  | [Split Landing Page](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fsplit-landing-page)                       | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fsplit-landing-page\u002F)            |\n| 08  | [Form Wave](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fform-input-wave)                                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fform-wave\u002F)                     |\n| 09  | [Sound Board](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fsound-board)                                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fsound-board\u002F)                   |\n| 10  | [Dad Jokes](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fdad-jokes)                                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fdad-jokes\u002F)                     |\n| 11  | [Event Keycodes](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fevent-keycodes)                               | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fevent-keycodes\u002F)                |\n| 12  | [Faq Collapse](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Ffaq-collapse)                                   | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Ffaq-collapse\u002F)                  |\n| 13  | [Random Choice Picker](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Frandom-choice-picker)                   | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Frandom-choice-picker\u002F)          |\n| 14  | [Animated Navigation](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fanimated-navigation)                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fanimated-navigation\u002F)           |\n| 15  | [Incrementing Counter](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fincrementing-counter)                   | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fincrementing-counter\u002F)          |\n| 16  | [Drink Water](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fdrink-water)                                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fdrink-water\u002F)                   |\n| 17  | [Movie App](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fmovie-app)                                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fmovie-app\u002F)                     |\n| 18  | [Background Slider](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fbackground-slider)                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fbackground-slider\u002F)             |\n| 19  | [Theme Clock](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Ftheme-clock)                                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Ftheme-clock\u002F)                   |\n| 20  | [Button Ripple Effect](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fbutton-ripple-effect)                   | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fbutton-ripple-effect\u002F)          |\n| 21  | [Drag N Drop](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fdrag-n-drop)                                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fdrag-n-drop\u002F)                   |\n| 22  | [Drawing App](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fdrawing-app)                                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fdrawing-app\u002F)                   |\n| 23  | [Kinetic Loader](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fkinetic-loader)                               | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fkinetic-loader\u002F)                |\n| 24  | [Content Placeholder](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fcontent-placeholder)                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fcontent-placeholder\u002F)           |\n| 25  | [Sticky Navbar](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fsticky-navigation)                                 | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fsticky-navbar\u002F)                 |\n| 26  | [Double Vertical Slider](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fdouble-vertical-slider)               | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fdouble-vertical-slider\u002F)        |\n| 27  | [Toast Notification](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Ftoast-notification)                       | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Ftoast-notification\u002F)            |\n| 28  | [Github Profiles](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fgithub-profiles)                             | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fgithub-profiles\u002F)               |\n| 29  | [Double Click Heart](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fdouble-click-heart)                       | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fdouble-click-heart\u002F)            |\n| 30  | [Auto Text Effect](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fauto-text-effect)                           | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fauto-text-effect\u002F)              |\n| 31  | [Password Generator](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fpassword-generator)                       | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fpassword-generator\u002F)            |\n| 32  | [Good Cheap Fast](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fgood-cheap-fast)                             | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fgood-cheap-fast\u002F)               |\n| 33  | [Notes App](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fnotes-app)                                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fnotes-app\u002F)                     |\n| 34  | [Animated Countdown](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fanimated-countdown)                       | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fanimated-countdown\u002F)            |\n| 35  | [Image Carousel](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fimage-carousel)                               | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fimage-carousel\u002F)                |\n| 36  | [Hoverboard](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fhoverboard)                                       | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fhoverboard\u002F)                    |\n| 37  | [Pokedex](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fpokedex)                                             | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fpokedex\u002F)                       |\n| 38  | [Mobile Tab Navigation](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fmobile-tab-navigation)                 | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fmobile-tab-navigation\u002F)         |\n| 39  | [Password Strength Background](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fpassword-strength-background)   | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fpassword-strength-background\u002F)  |\n| 40  | [3d Background Boxes](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002F3d-boxes-background)                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002F3d-background-boxes\u002F)           |\n| 41  | [Verify Account Ui](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fverify-account-ui)                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fverify-account-ui\u002F)             |\n| 42  | [Live User Filter](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Flive-user-filter)                           | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Flive-user-filter\u002F)              |\n| 43  | [Feedback Ui Design](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Ffeedback-ui-design)                       | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Ffeedback-ui-design\u002F)            |\n| 44  | [Custom Range Slider](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fcustom-range-slider)                     | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fcustom-range-slider\u002F)           |\n| 45  | [Netflix Mobile Navigation](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fnetflix-mobile-navigation)         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fnetflix-mobile-navigation\u002F)     |\n| 46  | [Quiz App](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fquiz-app)                                           | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fquiz-app\u002F)                      |\n| 47  | [Testimonial Box Switcher](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Ftestimonial-box-switcher)           | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Ftestimonial-box-switcher\u002F)      |\n| 48  | [Random Image Feed](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Frandom-image-generator)                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Frandom-image-feed\u002F)             |\n| 49  | [Todo List](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Ftodo-list)                                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Ftodo-list\u002F)                     |\n| 50  | [Insect Catch Game](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Finsect-catch-game)                         | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Finsect-catch-game\u002F)             |\n| 51  | [Simple Timer](https:\u002F\u002Fgithub.com\u002Fbradtraversy\u002F50projects50days\u002Ftree\u002Fmaster\u002Fsimple-timer)                                   | [Live Demo](https:\u002F\u002F50projects50days.com\u002Fprojects\u002Fsimple-timer\u002F)             |\n\n**NOTE ON PULL REQUESTS**: All of these projects are part of the course. While I do appreciate people trying to make some things prettier or adding new features, we are only accepting pull requests and looking at issues for bug fixes so that the code stays inline with the course\n\n## License\n\nThe MIT License\n\nCopyright (c) 2020-2021 Traversy Media https:\u002F\u002Ftraversymedia.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and\u002For sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\n🔹 Software Disclaimer 🔹\n\n🛠️ Provided \"As Is\" – No guarantees, use at your own risk.\n📜 No Warranty – No promises on performance or fitness for any purpose.\n⚖️ No Liability – Authors aren't responsible for any damages or claims.\n🔄 Use Freely – But at your own discretion and responsibility.\n\n🚀 In short: Use it, but don’t blame us! 😃\n","该项目是一个包含50多个使用HTML、CSS和JavaScript构建的小型网页项目的集合。每个项目都旨在通过实践来帮助开发者提高前端开发技能，涵盖了从基础的卡片展开效果到复杂的表单波浪动画等多种技术点。所有代码简洁易懂，适合初学者学习以及有一定经验的开发者快速上手新功能或特效。特别适用于希望在短时间内提升自己前端实战能力的学习者，或是寻找灵感进行个人作品创作的前端工程师。",2,"2026-06-11 02:42:19","top_all"]