基于项目的前端教程的精选列表 [Project-Based Learning Frontend]
基于项目的学习 – 前端
前端开发对学习具有挑战性。对我帮助很大的不仅仅是学习理论，而是每天编程。如果您是初学者或已经作为前端开发人员或设计人员工作，您可以从此列表中受益。
使用Javascript
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
| Calulator | https://zellwk.com/blog/calculator-part-1/ https://zellwk.com/blog/calculator-part-1/ https://zellwk.com/blog/calculator-part-1/ |
|
| 使用HTML和JvaScript的简单URL缩短器 | https://www.freecodecamp.org/news/building-a-simple-url-shortener-with-just-html-and-javascript-6ea1ecda308c/ | |
| 30天30件事 | https://javascript30.com/ | |
| 使用JavaScript的Todo List应用程序 | https://freshman.tech/todo-list/ | |
| JavaScript的简单计算器应用程序 | https://freshman.tech/calculator/ | |
| 使用Vanilla Javascript即时搜索 | https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/ | |
| Vanilla JavaScript中的简单Chrome扩展程序 | https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-how-to-build-a-simple-chrome-extension-in-vanilla-javascript- e52b2994aeeb | |
| 香草JavaScript中的记忆游戏 | https://medium.com/free-code-camp/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae |
Javascript游戏
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
| Snake仅使用JavaScript，HTML和CSS | https://www.freecodecamp.org/news/think-like-a-programmer-how-to-build-snake-using-only-javascript-html-and-css-7b1479c3339e/ | |
| JavaScript中的精灵动画 | https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa | $5个/ m |
| 使用纯JavaScript的2D突破游戏 | https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript | |
| 如何在React中构建俄罗斯方块 | https://www.youtube.com/watch?v=ZGOaCxX8HIU | |
| JavaScript的简单计算器应用程序 | https://freshman.tech/calculator/ | |
| 使用Vanilla Javascript即时搜索 | https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/ | |
| Vanilla JavaScript中的简单Chrome扩展程序 | https://medium.com/javascript-in-plain-english/ https-media-com-javascript-in-plain-english-how-to-build-a-simple-chrome-extension-in-vanilla-javascript- e52b2994aeeb | |
| 香草JavaScript中的记忆游戏 | https://medium.com/free-code-camp/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae |
Javascript动画
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
| Anime.js的JavaScript动画 | https://medium.com/@ajmeyghani/creating-javascript-animations-with-anime-js-f2b14716cdc6 | $5个/ m |
HTML / CSS / JS
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
| 使用CSS网格的日历 | https://www.freecodecamp.org/news/how-to-build-a-calendar-with-css-grid/ | |
| Reddit启发的加载微调器，只有HTML和CSS | https://www.freecodecamp.org/news/how-to-build-a-reddit-inspired-loading-spinner-with-only-html-and-css-5b2fca3fdca/ | |
| 使用CSS Flexbox的移动应用程序布局 | https://freshman.tech/flexbox-mobile-app/ | |
| 带有CSS Flexbox的导航栏 | https://freshman.tech/flexbox-navbar/ | |
| 见证卡 | https://www.florin-pop.com/blog/2019/07/testimonial-card/ | |
| 社交媒体按钮 | https://www.florin-pop.com/blog/2019/07/social-media-buttons/ | |
| 纯Css工具提示 | https://www.florin-pop.com/blog/2019/05/pure-css-tooltip | |
| 聊天界面 | https://www.florin-pop.com/blog/2019/04/chat-interface | |
| 按钮Ui Kit | https://www.florin-pop.com/blog/2019/04/buttons-ui-kit/ | |
| 过滤纯CSS中的组件 | https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css–cms-33111 | |
| 灵敏的响应式，多层次，粘性页脚 | （https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-multi-level-sticky-footer-with-flexbox–cms-33341 | |
| 与CSS网格的节日出现日历 | https://webdesign.tutsplus.com/tutorials/how-to-build-a-festive-advent-calendar-with-css-grid–cms-30070 | |
| 使用CSS3动画弹出页面加载器 | https://scotch.io/tutorials/create-a-bouncing-page-loader-with-css3-animations | |
| 现代仪表板布局与CSS网格和Flexbox | https://medium.com/better-programming/build-a-responsive-modern-dashboard-layout-with-css-grid-and-flexbox-bd343776a97e | $5个/ m |
| 使用Flexbox只需53行代码的极简主义HTML卡 | https://codeburst.io/build-a-minimalist-html-card-in-just-53-lines-of-code-with-flexbox-b40801927eb5 | $5个/ m |
| Mashable的导航栏，带有HTML和CSS | https://medium.com/free-code-camp/how-to-easily-build-mashables-navigation-bar-with-html-and-css-9e5007af786 | |
| 通过构建计算器来学习CSS border-radius属性 | https://codeburst.io/learn-css-border-radius-property-by-building-a-calculator-53497cd8071d | |
| 响应，纯CSS Off-Canvas汉堡菜单 | https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793 | |
| 建立一个设计系统 | https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd https://medium.com/codyhouse/create-your-design-system-part-2-grid-layout-aa961d59b8d6 https://medium.com/codyhouse/create-your-design-system-part-3-colors-798e4729921fs https://medium.com/codyhouse/create-your-design-system-part-4-spacing-895c9213e2b9 https://medium.com/codyhouse/create-your-design-system-part-5-icons-594f39cfb1b https://medium.com/codyhouse/create-your-design-system-part-6-buttons-58e2eda2173e |
|
| 创建一个分页 | https://www.florin-pop.com/blog/2019/07/how-to-create-a-pagination/ | |
| 通知框 | https://www.florin-pop.com/blog/2019/06/how-to-create-a-notification-box | |
| 自定义进度条 | https://www.florin-pop.com/blog/2019/06/how-to-create-a-custom-progress-bar/ | |
| 手风琴 | https://www.florin-pop.com/blog/2019/06/how-to-create-an-accordion/ | |
| 黑暗/光明主题切换 | https://www.florin-pop.com/blog/2019/05/dark-light-theme-toggle | |
| 语气 | https://www.florin-pop.com/blog/2019/04/how-to-create-a-modal | |
| 标签栏导航 | https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/ | |
| 整页滑块 | https://www.florin-pop.com/blog/2019/03/full-page-slider/ | |
| 双滑块签到表单 | https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/ | |
| 使用CSS和JavaScript的简单甘特图 | https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript–cms-33813 | |
| CSS和JavaScript的水平时间轴 | https://webdesign.tutsplus.com/tutorials/building-a-horizontal-timeline-with-css-and-javascript–cms-28378 | |
| 使用CSS和JavaScript改变下划线悬停效果 | https://webdesign.tutsplus.com/tutorials/how-to-build-a-shifting-underline-hover-effect-with-css-and-javascript–cms-28510 | |
| 修复了页面滚动动画的标题 | https://webdesign.tutsplus.com/tutorials/how-to-create-a-fixed-header-which-animates-on-page-scroll–cms-26672 | |
| 标签栏导航 | https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/ | |
| 标签栏导航 | https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/ | |
| 带有JavaScript，jQuery和CSS的动画书店 | https://www.freecodecamp.org/news/how-i-designed-an-animated-book-store-with-javascript-jquery-and-css-9e7102ca7689/ |
CSS动画
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
| 只有CSS的动画加载器 | https://codeburst.io/how-to-create-a-beautiful-animated-loader-with-nothing-but-css-d1962fc5a66c | |
| 带SVG和CSS的动画虚线背景 | https://blog.fullstackdigital.com/creating-an-animated-dashed-line-background-with-svg-and-css-170f89f47000 |
角
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
|
|
https://www.ng-book.com/2/ | 35美元 – 79美元 |
| 食谱 | https://www.udemy.com/vuejs-2-the-complete-guide/ | 10美元 – 199美元 |
| 简单的渐进式网络应用程序（PWA）与角度和灯塔 – 黑客新闻克隆 | https://medium.com/crowdbotics/learn-to-build-a-simple-progressive-web-app-pwa-with-angular-and-lighthouse-hacker-news-clone-51aca763032f | |
| 切换组件 | https://blog.angularindepth.com/build-a-toggle-component-6e8f44889c2c | |
| 使用i18n工具在Angular中进行本地化 | https://www.freecodecamp.org/news/how-to-implement-localization-in-angular-using-i18n-tools-a88898b1a0d0/ |
Vue公司
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
|
|
https://www.fullstack.io/vue | 39美元 – 79美元 |
| Trello克隆 | https://www.vuemastery.com/courses/watch-us-build-trello-clone/tour-of-the-app | 19美元 – 190美元 |
|
|
https://www.udemy.com/vuejs-2-the-complete-guide/ | 10美元 – 199美元 |
| Instagram克隆与Vue.js和CSSGram | https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408 | |
| Youtube克隆与VueJS，Webpack和Flexbox | https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408 | |
| 与Vue的扫雷游戏 | https://medium.com/javascript-in-plain-english/minesweeper-rebuild-with-vue-vuex-and-vuetify-ab1921e5258e | |
| 带有Vue，Chart.js和API的Web应用程序 | https://medium.com/hackernoon/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44 | |
| Web应用程序与Vue，Chart.js和API第二部分 | https://medium.com/hackernoon/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf | |
| 购物车与Vue 2和Vuex | https://medium.com/employbl/build-a-shopping-cart-with-vue-2-and-vuex-5d58b93c513f | |
| 带Vue.js的实时K线走势图 | https://medium.com/js-dojo/build-a-realtime-chart-with-vue-js-d7e2e25a5e21 | |
| 带Vue.js递归组件的可折叠树菜单 | https://medium.com/js-dojo/build-a-collapsible-tree-menu-with-vue-js-recursive-components-e598306dc3d1 | |
| 与Vue.js的多人测验游戏 | https://medium.com/front-end-weekly/build-a-multiplayer-quiz-game-with-vue-js-ca22bad8fb52） | |
| 使用VueJS，Vuex和Cloud Firestore的实时聊天应用程序 | https://medium.com/js-dojo/build-a-realtime-chat-app-with-vuejs-vuex-and-firestore-32d081668709 | |
| 与Vue脱机的第一个砌体网格展示 | https://medium.com/js-dojo/offline-first-masonry-grid-showcase-with-vue-3cd3121dabae | |
| 具有Vue的互动和无分心形式 | https://medium.com/vue-mastery/building-an-interactive-and-distraction-free-form-with-vue-bfe23907e981 | |
| 具有Vue.js插槽的高度可定制的选项卡组件 | https://blog.bitsrc.io/highly-customizable-tab-component-with-vue-js-slots-7e1cee400a7c | |
| 使用示例在Vue.js中进行路由 | https://medium.com/@saidhayani/understand-routing-in-vue-js-with-examples-6da96979c8e3 | |
| 使用Vue.js的加密货币跟踪器 | https://medium.com/eliteng/build-a-cryptocurrency-tracker-with-vue-js-c0efd4c0139e |
应对
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
| Todoist克隆 | https://www.youtube.com/watch?v=hT3j87FMR6M | |
| 建立一个Evernote克隆 | https://www.youtube.com/watch?v=I250xdtUvy8 | |
| 黑客新闻克隆 | https://levelup.gitconnected.com/react-redux-tutorial-build-a-hacker-news-clone-64f320364f85 | |
| 实时PWA | https://medium.com/better-programming/build-a-realtime-pwa-with-react-99e7b0fd3270 | |
| 图像滑块与React和ES6 | https://medium.com/@ItsMeDannyZ/build-an-image-slider-with-react-es6-264368de68e4 | |
| PWA与Create-React-App和自定义服务工作者 | https://medium.com/free-code-camp/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3 | |
| 使用React进行模因制作 | https://medium.com/free-code-camp/react-for-beginners-building-a-meme-maker-with-react-7164d3d3e55f | |
| 在React中构建一个热图 | https://www.freecodecamp.org/news/a-heat-map-implementation-in-typescript/ | |
| 使用React和MomentJS的倒计时组件 | https://www.freecodecamp.org/news/how-to-create-a-countdown-component-using-react-momentjs-4717edc4ac3/ |
jQuery的
| 你建立什么 | 资源 | 价钱 |
|---|---|---|
| 使用jQuery进行网格手风琴 | https://css-tricks.com/grid-accordion-with-jquery/ |
支持这个项目
如果这个清单对你有帮助，如果你支持我，我会很高兴。您可以直接购买贴纸或支持我给我买咖啡。这使我能够扩展此列表，使此列表保持最新并执行更多此类项目。
您可以通过购买贴纸或T恤或直接通过买我一杯咖啡来支持我
你也可以在Github上为这个项目加注星标：
https://github.com/binconsole/project-based-learning-frontend
谢谢
资讯来源：由0x资讯编译自DEV，原文：https://dev.to/binconsole/curated-list-of-project-based-tutorials-project-based-learning-frontend-3c8l ，版权归作者所有，未经许可，不得转载