diff --git a/README.md b/README.md index a8812d5..3510f96 100644 --- a/README.md +++ b/README.md @@ -2,62 +2,58 @@ 这是课程中所有项目的主要存储库。 -- [Course Link](https://www.traversymedia.com/50-Projects-In-50-Days) - - -| # | 项目 | 在线预览 | -| :-: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -| 01 | [Expanding Cards](https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards) | [Live Demo](https://50projects50days.com/projects/expanding-cards/) | -| 02 | [Progress Steps](https://github.com/bradtraversy/50projects50days/tree/master/progress-steps) | [Live Demo](https://50projects50days.com/projects/progress-steps/) | -| 03 | [Rotating Navigation Animation](https://github.com/bradtraversy/50projects50days/tree/master/rotating-nav-animation) | [Live Demo](https://50projects50days.com/projects/rotating-navigation-animation/) | -| 04 | [Hidden Search Widget](https://github.com/bradtraversy/50projects50days/tree/master/hidden-search) | [Live Demo](https://50projects50days.com/projects/hidden-search-widget/) | -| 05 | [Blurry Loading](https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading) | [Live Demo](https://50projects50days.com/projects/blurry-loading/) | -| 06 | [Scroll Animation](https://github.com/bradtraversy/50projects50days/tree/master/scroll-animation) | [Live Demo](https://50projects50days.com/projects/scroll-animation/) | -| 07 | [Split Landing Page](https://github.com/bradtraversy/50projects50days/tree/master/split-landing-page) | [Live Demo](https://50projects50days.com/projects/split-landing-page/) | -| 08 | [Form Wave](https://github.com/bradtraversy/50projects50days/tree/master/form-input-wave) | [Live Demo](https://50projects50days.com/projects/form-wave/) | -| 09 | [Sound Board](https://github.com/bradtraversy/50projects50days/tree/master/sound-board) | [Live Demo](https://50projects50days.com/projects/sound-board/) | -| 10 | [Dad Jokes](https://github.com/bradtraversy/50projects50days/tree/master/dad-jokes) | [Live Demo](https://50projects50days.com/projects/dad-jokes/) | -| 11 | [Event Keycodes](https://github.com/bradtraversy/50projects50days/tree/master/event-keycodes) | [Live Demo](https://50projects50days.com/projects/event-keycodes/) | -| 12 | [Faq Collapse](https://github.com/bradtraversy/50projects50days/tree/master/faq-collapse) | [Live Demo](https://50projects50days.com/projects/faq-collapse/) | -| 13 | [Random Choice Picker](https://github.com/bradtraversy/50projects50days/tree/master/random-choice-picker) | [Live Demo](https://50projects50days.com/projects/random-choice-picker/) | -| 14 | [Animated Navigation](https://github.com/bradtraversy/50projects50days/tree/master/animated-navigation) | [Live Demo](https://50projects50days.com/projects/animated-navigation/) | -| 15 | [Incrementing Counter](https://github.com/bradtraversy/50projects50days/tree/master/incrementing-counter) | [Live Demo](https://50projects50days.com/projects/incrementing-counter/) | -| 16 | [Drink Water](https://github.com/bradtraversy/50projects50days/tree/master/drink-water) | [Live Demo](https://50projects50days.com/projects/drink-water/) | -| 17 | [Movie App](https://github.com/bradtraversy/50projects50days/tree/master/movie-app) | [Live Demo](https://50projects50days.com/projects/movie-app/) | -| 18 | [Background Slider](https://github.com/bradtraversy/50projects50days/tree/master/background-slider) | [Live Demo](https://50projects50days.com/projects/background-slider/) | -| 19 | [Theme Clock](https://github.com/bradtraversy/50projects50days/tree/master/theme-clock) | [Live Demo](https://50projects50days.com/projects/theme-clock/) | -| 20 | [Button Ripple Effect](https://github.com/bradtraversy/50projects50days/tree/master/button-ripple-effect) | [Live Demo](https://50projects50days.com/projects/button-ripple-effect/) | -| 21 | [Drag N Drop](https://github.com/bradtraversy/50projects50days/tree/master/drag-n-drop) | [Live Demo](https://50projects50days.com/projects/drag-n-drop/) | -| 22 | [Drawing App](https://github.com/bradtraversy/50projects50days/tree/master/drawing-app) | [Live Demo](https://50projects50days.com/projects/drawing-app/) | -| 23 | [Kinetic Loader](https://github.com/bradtraversy/50projects50days/tree/master/kinetic-loader) | [Live Demo](https://50projects50days.com/projects/kinetic-loader/) | -| 24 | [Content Placeholder](https://github.com/bradtraversy/50projects50days/tree/master/content-placeholder) | [Live Demo](https://50projects50days.com/projects/content-placeholder/) | -| 25 | [Sticky Navbar](https://github.com/bradtraversy/50projects50days/tree/master/sticky-navigation) | [Live Demo](https://50projects50days.com/projects/sticky-navbar/) | -| 26 | [Double Vertical Slider](https://github.com/bradtraversy/50projects50days/tree/master/double-vertical-slider) | [Live Demo](https://50projects50days.com/projects/double-vertical-slider/) | -| 27 | [Toast Notification](https://github.com/bradtraversy/50projects50days/tree/master/toast-notification) | [Live Demo](https://50projects50days.com/projects/toast-notification/) | -| 28 | [Github Profiles](https://github.com/bradtraversy/50projects50days/tree/master/github-profiles) | [Live Demo](https://50projects50days.com/projects/github-profiles/) | -| 29 | [Double Click Heart](https://github.com/bradtraversy/50projects50days/tree/master/double-click-heart) | [Live Demo](https://50projects50days.com/projects/double-click-heart/) | -| 30 | [Auto Text Effect](https://github.com/bradtraversy/50projects50days/tree/master/auto-text-effect) | [Live Demo](https://50projects50days.com/projects/auto-text-effect/) | -| 31 | [Password Generator](https://github.com/bradtraversy/50projects50days/tree/master/password-generator) | [Live Demo](https://50projects50days.com/projects/password-generator/) | -| 32 | [Good Cheap Fast](https://github.com/bradtraversy/50projects50days/tree/master/good-cheap-fast) | [Live Demo](https://50projects50days.com/projects/good-cheap-fast/) | -| 33 | [Notes App](https://github.com/bradtraversy/50projects50days/tree/master/notes-app) | [Live Demo](https://50projects50days.com/projects/notes-app/) | -| 34 | [Animated Countdown](https://github.com/bradtraversy/50projects50days/tree/master/animated-countdown) | [Live Demo](https://50projects50days.com/projects/animated-countdown/) | -| 35 | [Image Carousel](https://github.com/bradtraversy/50projects50days/tree/master/image-carousel) | [Live Demo](https://50projects50days.com/projects/image-carousel/) | -| 36 | [Hoverboard](https://github.com/bradtraversy/50projects50days/tree/master/hoverboard) | [Live Demo](https://50projects50days.com/projects/hoverboard/) | -| 37 | [Pokedex](https://github.com/bradtraversy/50projects50days/tree/master/pokedex) | [Live Demo](https://50projects50days.com/projects/pokedex/) | -| 38 | [Mobile Tab Navigation](https://github.com/bradtraversy/50projects50days/tree/master/mobile-tab-navigation) | [Live Demo](https://50projects50days.com/projects/mobile-tab-navigation/) | -| 39 | [Password Strength Background](https://github.com/bradtraversy/50projects50days/tree/master/password-strength-background) | [Live Demo](https://50projects50days.com/projects/password-strength-background/) | -| 40 | [3d Background Boxes](https://github.com/bradtraversy/50projects50days/tree/master/3d-boxes-background) | [Live Demo](https://50projects50days.com/projects/3d-background-boxes/) | -| 41 | [Verify Account Ui](https://github.com/bradtraversy/50projects50days/tree/master/verify-account-ui) | [Live Demo](https://50projects50days.com/projects/verify-account-ui/) | -| 42 | [Live User Filter](https://github.com/bradtraversy/50projects50days/tree/master/live-user-filter) | [Live Demo](https://50projects50days.com/projects/live-user-filter/) | -| 43 | [Feedback Ui Design](https://github.com/bradtraversy/50projects50days/tree/master/feedback-ui-design) | [Live Demo](https://50projects50days.com/projects/feedback-ui-design/) | -| 44 | [Custom Range Slider](https://github.com/bradtraversy/50projects50days/tree/master/custom-range-slider) | [Live Demo](https://50projects50days.com/projects/custom-range-slider/) | -| 45 | [Netflix Mobile Navigation](https://github.com/bradtraversy/50projects50days/tree/master/netflix-mobile-navigation) | [Live Demo](https://50projects50days.com/projects/netflix-mobile-navigation/) | -| 46 | [Quiz App](https://github.com/bradtraversy/50projects50days/tree/master/quiz-app) | [Live Demo](https://50projects50days.com/projects/quiz-app/) | -| 47 | [Testimonial Box Switcher](https://github.com/bradtraversy/50projects50days/tree/master/testimonial-box-switcher) | [Live Demo](https://50projects50days.com/projects/testimonial-box-switcher/) | -| 48 | [Random Image Feed](https://github.com/bradtraversy/50projects50days/tree/master/random-image-generator) | [Live Demo](https://50projects50days.com/projects/random-image-feed/) | -| 49 | [Todo List](https://github.com/bradtraversy/50projects50days/tree/master/todo-list) | [Live Demo](https://50projects50days.com/projects/todo-list/) | -| 50 | [Insect Catch Game](https://github.com/bradtraversy/50projects50days/tree/master/insect-catch-game) | [Live Demo](https://50projects50days.com/projects/insect-catch-game/) | -| 51 | [Simple Timer](https://github.com/bradtraversy/50projects50days/tree/master/simple-timer) | [Live Demo](https://50projects50days.com/projects/simple-timer/) | - - +- [课程链接](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/) |