2024-06-07 10:32:51 +00:00
|
|
|
# 50+ web练习小项目 HTML, CSS & JS
|
2020-11-30 07:53:29 +00:00
|
|
|
|
2024-06-07 10:32:51 +00:00
|
|
|
这是课程中所有项目的主要存储库。
|
2020-11-30 07:53:29 +00:00
|
|
|
|
2024-06-10 06:45:23 +00:00
|
|
|
- [课程国内自建链接](https://study.jonylee.top/50+js-css-html/)
|
|
|
|
|
|
|
|
|
|
- [原始课程链接](https://www.traversymedia.com/50-Projects-In-50-Days)
|
2020-12-02 14:49:29 +00:00
|
|
|
|
2024-06-09 07:59:10 +00:00
|
|
|
| # | 项目中文说明 | 项目代码链接 | 在线预览 |
|
|
|
|
|
| :-: | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
|
|
|
|
|
| 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-nav-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/) |
|
|
|
|
|
| 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-input-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-navigation/) |
|
|
|
|
|
| 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-boxes-background/) |
|
|
|
|
|
| 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 Generator](https://gitea.jonylee.top/caojiezi2003/50projects50days/src/branch/master/random-image-generator) | [Live Demo](https://study.jonylee.top/50+js-css-html/random-image-generator/) |
|
|
|
|
|
| 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/) |
|
2024-06-10 06:45:23 +00:00
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
|
|
The MIT License
|
|
|
|
|
|
|
|
|
|
Copyright (c) 2020-2021 Traversy Media https://traversymedia.com
|
|
|
|
|
|
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
|
|
|
of this software and associated documentation files (the "Software"), to deal
|
|
|
|
|
in the Software without restriction, including without limitation the rights
|
|
|
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
|
|
|
copies of the Software, and to permit persons to whom the Software is
|
|
|
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
|
|
|
|
|
|
The above copyright notice and this permission notice shall be included in
|
|
|
|
|
all copies or substantial portions of the Software.
|
|
|
|
|
|
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
|
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
|
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
|
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
|
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
|
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
|
|
|
THE SOFTWARE.
|
