# 50+ web练习小项目 HTML, CSS & JS 这是课程中所有项目的主要存储库。 - [课程链接](https://study.jonylee.top/50+js-css-html/) | # | 项目中文说明 | 项目代码链接 | 在线预览 | | :-: | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | 01 | 扩展卡片 | [Expanding Cards](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/expanding-cards) | [Live Demo](https://study.jonylee.top/50+js-css-html/expanding-cards/) | | 02 | 进度条 | [Progress Steps](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/progress-steps) | [Live Demo](https://study.jonylee.top/50+js-css-html/progress-steps/) | | 03 | 旋转导航动画 | [Rotating Navigation Animation](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/rotating-nav-animation) | [Live Demo](https://study.jonylee.top/50+js-css-html/rotating-navigation-animation/) | | 04 | 隐藏搜索框 | [Hidden Search Widget](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/hidden-search) | [Live Demo](https://study.jonylee.top/50+js-css-html/hidden-search-widget/) | | 05 | 模糊加载 | [Blurry Loading](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/blurry-loading) | [Live Demo](https://study.jonylee.top/50+js-css-html/blurry-loading/) | | 06 | 滚动动画 | [Scroll Animation](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/scroll-animation) | [Live Demo](https://study.jonylee.top/50+js-css-html/scroll-animation/) | | 07 | 拆分登陆页面 | [Split Landing Page](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/split-landing-page) | [Live Demo](https://study.jonylee.top/50+js-css-html/split-landing-page/) | | 08 | 表单输入波浪效果 | [Form Wave](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/form-input-wave) | [Live Demo](https://study.jonylee.top/50+js-css-html/form-wave/) | | 09 | 声音卡 | [Sound Board](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/sound-board) | [Live Demo](https://study.jonylee.top/50+js-css-html/sound-board/) | | 10 | 爸爸的笑话 | [Dad Jokes](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/dad-jokes) | [Live Demo](https://study.jonylee.top/50+js-css-html/dad-jokes/) | | 11 | 事件键码 | [Event Keycodes](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/event-keycodes) | [Live Demo](https://study.jonylee.top/50+js-css-html/event-keycodes/) | | 12 | 常见问题折叠 | [Faq Collapse](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/faq-collapse) | [Live Demo](https://study.jonylee.top/50+js-css-html/faq-collapse/) | | 13 | 随机选择器 | [Random Choice Picker](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/random-choice-picker) | [Live Demo](https://study.jonylee.top/50+js-css-html/random-choice-picker/) | | 14 | 导航动画 | [Animated Navigation](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/animated-navigation) | [Live Demo](https://study.jonylee.top/50+js-css-html/animated-navigation/) | | 15 | 递增计数器 | [Incrementing Counter](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/incrementing-counter) | [Live Demo](https://study.jonylee.top/50+js-css-html/incrementing-counter/) | | 16 | 喝水 | [Drink Water](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/drink-water) | [Live Demo](https://study.jonylee.top/50+js-css-html/drink-water/) | | 17 | | [Movie App](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/movie-app) | [Live Demo](https://study.jonylee.top/50+js-css-html/movie-app/) | | 18 | 背景滑块 | [Background Slider](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/background-slider) | [Live Demo](https://study.jonylee.top/50+js-css-html/background-slider/) | | 19 | 主题时钟 | [Theme Clock](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/theme-clock) | [Live Demo](https://study.jonylee.top/50+js-css-html/theme-clock/) | | 20 | 按钮涟漪效果 | [Button Ripple Effect](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/button-ripple-effect) | [Live Demo](https://study.jonylee.top/50+js-css-html/button-ripple-effect/) | | 21 | 拖放 | [Drag N Drop](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/drag-n-drop) | [Live Demo](https://study.jonylee.top/50+js-css-html/drag-n-drop/) | | 22 | 画图APP | [Drawing App](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/drawing-app) | [Live Demo](https://study.jonylee.top/50+js-css-html/drawing-app/) | | 23 | 加载动画 | [Kinetic Loader](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/kinetic-loader) | [Live Demo](https://study.jonylee.top/50+js-css-html/kinetic-loader/) | | 24 | 内容占位符 | [Content Placeholder](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/content-placeholder) | [Live Demo](https://study.jonylee.top/50+js-css-html/content-placeholder/) | | 25 | 粘性导航栏 | [Sticky Navbar](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/sticky-navigation) | [Live Demo](https://study.jonylee.top/50+js-css-html/sticky-navbar/) | | 26 | 双垂直滑块 | [Double Vertical Slider](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/double-vertical-slider) | [Live Demo](https://study.jonylee.top/50+js-css-html/double-vertical-slider/) | | 27 | Toast通知 | [Toast Notification](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/toast-notification) | [Live Demo](https://study.jonylee.top/50+js-css-html/toast-notification/) | | 28 | Github 配置文件 | [Github Profiles](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/github-profiles) | [Live Demo](https://study.jonylee.top/50+js-css-html/github-profiles/) | | 29 | 双击加心点赞 | [Double Click Heart](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/double-click-heart) | [Live Demo](https://study.jonylee.top/50+js-css-html/double-click-heart/) | | 30 | 自动文本效果 | [Auto Text Effect](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/auto-text-effect) | [Live Demo](https://study.jonylee.top/50+js-css-html/auto-text-effect/) | | 31 | 密码生成器 | [Password Generator](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/password-generator) | [Live Demo](https://study.jonylee.top/50+js-css-html/password-generator/) | | 32 | 多快好省 | [Good Cheap Fast](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/good-cheap-fast) | [Live Demo](https://study.jonylee.top/50+js-css-html/good-cheap-fast/) | | 33 | 便签 | [Notes App](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/notes-app) | [Live Demo](https://study.jonylee.top/50+js-css-html/notes-app/) | | 34 | 动画倒计时 | [Animated Countdown](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/animated-countdown) | [Live Demo](https://study.jonylee.top/50+js-css-html/animated-countdown/) | | 35 | 图片轮播 | [Image Carousel](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/image-carousel) | [Live Demo](https://study.jonylee.top/50+js-css-html/image-carousel/) | | 36 | 彩色悬停效果 | [Hoverboard](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/hoverboard) | [Live Demo](https://study.jonylee.top/50+js-css-html/hoverboard/) | | 37 | 口袋妖怪 | [Pokedex](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/pokedex) | [Live Demo](https://study.jonylee.top/50+js-css-html/pokedex/) | | 38 | 移动选项卡导航 | [Mobile Tab Navigation](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/mobile-tab-navigation) | [Live Demo](https://study.jonylee.top/50+js-css-html/mobile-tab-navigation/) | | 39 | 密码强度背景 | [Password Strength Background](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/password-strength-background) | [Live Demo](https://study.jonylee.top/50+js-css-html/password-strength-background/) | | 40 | 3D盒子背景 | [3d Background Boxes](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/3d-boxes-background) | [Live Demo](https://study.jonylee.top/50+js-css-html/3d-background-boxes/) | | 41 | 验证账户UI | [Verify Account Ui](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/verify-account-ui) | [Live Demo](https://study.jonylee.top/50+js-css-html/verify-account-ui/) | | 42 | 实时用户筛选器 | [Live User Filter](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/live-user-filter) | [Live Demo](https://study.jonylee.top/50+js-css-html/live-user-filter/) | | 43 | 反馈UI设计 | [Feedback Ui Design](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/feedback-ui-design) | [Live Demo](https://study.jonylee.top/50+js-css-html/feedback-ui-design/) | | 44 | 自定义范围滑块 | [Custom Range Slider](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/custom-range-slider) | [Live Demo](https://study.jonylee.top/50+js-css-html/custom-range-slider/) | | 45 | Netflix移动导航 | [Netflix Mobile Navigation](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/netflix-mobile-navigation) | [Live Demo](https://study.jonylee.top/50+js-css-html/netflix-mobile-navigation/) | | 46 | 测验APP | [Quiz App](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/quiz-app) | [Live Demo](https://study.jonylee.top/50+js-css-html/quiz-app/) | | 47 | 推荐式换盒器 | [Testimonial Box Switcher](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/testimonial-box-switcher) | [Live Demo](https://study.jonylee.top/50+js-css-html/testimonial-box-switcher/) | | 48 | 随机图像生成器 | [Random Image Feed](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/random-image-generator) | [Live Demo](https://study.jonylee.top/50+js-css-html/random-image-feed/) | | 49 | Todo列表 | [Todo List](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/todo-list) | [Live Demo](https://study.jonylee.top/50+js-css-html/todo-list/) | | 50 | 捉虫游戏 | [Insect Catch Game](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/insect-catch-game) | [Live Demo](https://study.jonylee.top/50+js-css-html/insect-catch-game/) | | 51 | 简单计时器 | [Simple Timer](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/simple-timer) | [Live Demo](https://study.jonylee.top/50+js-css-html/simple-timer/) |