1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» 可拖动的 элемент и поместить его в droppable 区。
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
这篇文章是在爱迪生软件的支持下翻译的，它 和 .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- 奖励： как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
注： и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- 奖励： Если вам интересно, я недавно написал на криптовалюту с React Native.
注： 这里 .
Подборка проектов из предыдущих публикаций.
层
Layer 是一个社区，每个人都可以在共享“板”上绘制像素。 最初的想法诞生于 Reddit。 r/Layer 社区是共享创造力的隐喻，每个人都可以成为创造者并为共同的事业做出贡献。
创建自己的 Layer 项目时您将学到什么：
- JavaScript 画布如何工作 了解如何操作画布是许多应用程序中的一项关键技能。
- 如何协调用户权限。 每个用户每 15 分钟可以绘制一个像素，无需登录。
- 创建 cookie 会话。
Squoosh
Squoosh 是一款具有许多高级选项的图像压缩应用程序。
动图 20 MB
通过创建您自己的 Squoosh 版本，您将学到：
- 如何使用图像尺寸
- 了解 Drag'n'Drop API 的基础知识
- 了解 API 和事件侦听器的工作原理
- 如何上传和导出文件
注： 图像压缩器是本地的。 无需向服务器发送额外的数据。 您可以在家里使用压缩机，也可以在服务器上使用它，这取决于您的选择。
计算器
快点？ 严重地？ 计算器？ 是的，确切地说，是计算器。 了解数学运算的基础知识以及它们如何协同工作是简化应用程序的一项关键技能。 迟早你将不得不处理数字，而且越早越好。
通过创建自己的计算器，您将学习：
- 处理数字和数学运算
- 使用事件侦听器 API 进行练习
- 如何排列元素，了解风格
爬虫（搜索引擎）
每个人都使用过搜索引擎，那么为什么不创建自己的呢？ 需要爬虫来搜索信息。 每个人每天都使用它们，对这项技术和专家的需求只会随着时间的推移而增长。
谷歌搜索引擎
通过创建自己的搜索引擎您将学到什么：
- 爬虫如何工作
- 如何对网站进行索引以及如何按评级和声誉对网站进行排名
- 如何在数据库中存储索引站点以及如何使用数据库
音乐播放器（Spotify、Apple Music）
每个人都听音乐——它是我们生活中不可或缺的一部分。 让我们创建一个音乐播放器，以更好地了解现代音乐流媒体平台的基本机制是如何工作的。
Spotify
通过创建自己的音乐流媒体平台，您将学到什么：
- 如何使用 API。 使用 Spotify 或 Apple Music 的 API
- 如何播放、暂停或快退到下一个/上一个曲目
- 如何改变音量
- 如何管理用户路由和浏览器历史记录
使用 React 的电影搜索应用程序（带钩子）
您可以开始的第一件事是使用 React 创建一个电影搜索应用程序。 下图显示了最终应用程序的外观：
你会学到什么
通过构建此应用程序，您将通过使用相对较新的 Hooks API 来提高您的 React 技能。 该示例项目使用 React 组件、大量钩子、外部 API，当然还有一些 CSS 样式。
技术堆栈和功能
- 使用钩子进行反应
- 创建反应应用
- x
- 的CSS
在不使用任何类的情况下，这些项目为您提供了函数式 React 的完美切入点，并且肯定会在 2020 年为您提供帮助。 你可以找到 。 按照说明进行操作或自行制作。
使用 Vue 的聊天应用程序
您要做的另一个很棒的项目是使用我最喜欢的 JavaScript 库：VueJS 创建一个聊天应用程序。 该应用程序将如下所示：
你会学到什么
在本教程中，您将学习如何从头开始制作 Vue 应用程序 - 创建组件、处理状态、创建路由、连接到第三方服务，甚至处理身份验证。
技术堆栈和功能
- Vue公司
- 威克斯
- Vue路由器
- 命令行界面
- 推
- 的CSS
对于开始使用 Vue 或提高现有技能以在 2020 年进入开发来说，这确实是一个很棒的项目。 你可以找到 .
使用 Angular 8 打造漂亮的天气应用
此示例将帮助您使用 Angular 8 创建一个漂亮的天气应用程序：
你会学到什么
该项目将教您从头开始构建应用程序的宝贵技能 - 从设计到开发，一直到可部署的应用程序。
技术堆栈和功能
- 角度8
- 火力地堡
- 服务端渲染
- CSS 与网格和 Flexbox
- 移动友好性和适应性
- 黑暗模式
- 美观的界面
我真正喜欢这个包罗万象的项目的一点是，你不会孤立地研究事物。 相反，您将学习从设计到最终部署的整个开发过程。
使用 Svelte 的待办事项应用程序
Svelte 就像基于组件的方法的新生——至少类似于 React、Vue 和 Angular。 这是2020年最热门的新产品之一。
待办事项应用程序不一定是最热门的话题，但它确实可以帮助您磨练您的 Svelte 技能。 它看起来像这样：
你会学到什么
本教程将向您展示如何从头到尾使用 Svelte 3 创建应用程序。 您将使用组件、样式和事件处理程序
技术堆栈和功能
- 苗条3
- 组件
- 使用 CSS 设计样式
- ES 6 语法
好的 Svelte 入门项目并不多，所以我发现 .
使用 Next.js 的电子商务应用程序
Next.js 是构建支持开箱即用的服务器端渲染的 React 应用程序的最流行框架。
该项目将向您展示如何创建如下所示的电子商务应用程序：
你会学到什么
在此项目中，您将学习如何使用 Next.js 进行开发 — 创建新页面和组件、提取数据以及设计和部署 Next 应用程序。
技术堆栈和功能
- Next.js
- 组件和页面
- 数据采样
- 风格化
- 项目部署
- SSR 和 SPA
拥有一个像电子商务应用程序这样的现实世界的例子来学习新东西总是很棒的。 你可以 .
使用 Nuxt.js 的成熟多语言博客
Nuxt.js 适用于 Vue，Next.js 适用于 React：一个结合服务器端渲染和单页应用程序功能的出色框架
您可以创建的最终应用程序如下所示：
你会学到什么
在此示例项目中，您将学习如何使用 Nuxt.js 创建完整的网站，从初始设置到最终部署。
它利用了 Nuxt 提供的许多很酷的功能，例如页面和组件以及 SCSS 样式。
技术堆栈和功能
- Nuxt.js
- 组件和页面
- 故事块模块
- 盲鳗
- Vuex 用于状态管理
- SCSS 用于样式设置
- Nuxt中间件
，其中包括许多出色的 Nuxt.js 功能。 我个人喜欢使用 Nuxt，所以你应该尝试一下，因为它也会让你成为一名优秀的 Vue 开发人员。
盖茨比博客
Gatsby 是一个使用 React 和 GraphQL 的优秀静态站点生成器。 这是该项目的结果：
你会学到什么
在本教程中，您将学习如何使用 Gatsby 创建一个博客，您将用它来使用 React 和 GraphQL 编写自己的文章。
技术堆栈和功能
- 盖茨比
- 应对
- GraphQL
- 插件和主题
- MDX/降价
- 引导 CSS
- 模板
如果您曾经想创建一个博客， 关于如何使用 React 和 GraphQL 来实现它。
我并不是说 WordPress 是一个糟糕的选择，但是有了 Gatsby，您可以使用 React 构建高性能网站 - 这是一个令人惊叹的组合。
使用 Gridsome 写博客
Gridsome for Vue...好吧，我们已经在 Next/Nuxt 中实现了这个。
但 Gridsome 和 Gatsby 也是如此。 两者都使用 GraphQL 作为数据层，但 Gridsome 使用 VueJS。 这也是一个令人惊叹的静态站点生成器，它将帮助您创建出色的博客：
你会学到什么
该项目将教您如何创建一个简单的博客以开始使用 Gridsome、GraphQL 和 Markdown。 它还介绍了如何通过 Netlify 部署应用程序。
技术堆栈和功能
- 网格状
- Vue公司
- GraphQL
- 降价
- Netlify
这当然不是最全面的教程，但它涵盖了 Gridsome 和 .
使用 Quasar 的类似 SoundCloud 的音频播放器
Quasar 是另一个可用于创建移动应用程序的 Vue 框架。 在此项目中，您将创建一个音频播放器应用程序，例如：
你会学到什么
虽然其他项目主要关注 Web 应用程序，但这个项目将向您展示如何使用 Vue 和 Quasar 框架创建移动应用程序。
您应该已经在配置了 Android Studio/Xcode 的情况下运行 Cordova。 如果没有，该手册有一个 Quasar 网站的链接，在那里他们向您展示如何设置一切。
技术堆栈和功能
- 类星体
- Vue公司
- 科尔多瓦
- 冲浪者
- 用户界面组件
，展示了 Quasar 创建移动应用程序的能力。
Форма кредитной карты
酷炫的信用卡形状，流畅愉快的微交互。 包括数字格式化、验证和自动卡类型检测。 它基于 Vue.js 构建，并且完全响应式。 （你可以看到 .)
你将学到什么：
- 处理和验证表单
- 处理事件（例如，当字段更改时）
- 了解如何在页面上显示和放置元素，尤其是出现在表单顶部的信用卡信息
条图
直方图是用矩形条表示分类数据的图表或图形，矩形条的高度或长度与它们所表示的值成比例。
它们可以垂直或水平应用。 垂直条形图有时称为折线图。
你将学到什么：
- 以结构化且易于理解的方式显示数据
- 另外：了解如何使用该元素
canvas以及如何用它绘制元素
您可以找到世界人口数据。 它们按年份排序。
Анимация сердечка Twitter
早在 2016 年，Twitter 就在其推文中引入了这个令人惊叹的动画。 截至 2019 年，它看起来仍然很重要，那么为什么不自己创建一个呢？
你将学到什么：
- 使用 CSS 属性
keyframes - 操作 HTML 元素并为其设置动画
- 结合 JavaScript、HTML 和 CSS
Репозитории GitHub с функцией поиска
这里没有什么特别的——GitHub 存储库只是一个美化的列表。
目标是显示存储库并允许用户过滤它们。 使用 获取每个用户的存储库。
GitHub 个人资料页面 -
你将学到什么：
- 从API接收数据
- 显示来自API的数据
- 过滤并显示每次搜索的相关数据
- 可选：如果您准备迎接挑战，请使用 ，使用 GraphQL 构建。 .
Чаты в стиле Reddit
聊天因其简单易用而成为一种流行的交流方式。 但真正推动现代聊天室发展的是什么？ WebSockets！
你将学到什么：
- 使用WebSockets，实时通信和数据更新
- 使用用户访问级别（例如，聊天频道的所有者具有以下角色）
admin，以及房间里的其他人——user) - 处理和验证表单 - 请记住，用于发送消息的聊天窗口是
input - 创建并加入不同的聊天
- 处理个人消息。 用户可以与其他用户私聊。 本质上，您将在两个用户之间建立 WebSocket 连接。
Навигация в стиле Stripe
此导航的独特之处在于弹出窗口容器会进行转换以适应内容。 与打开和关闭新弹出窗口的传统行为相比，这种转变更加优雅。
你将学到什么：
- 将 CSS 动画与过渡相结合
- 调暗内容并将活动类应用于浮动元素
吃豆子
创建您自己的 Pacman 版本。 这是了解游戏如何开发并理解基础知识的好方法。 使用 JavaScript 框架、React 或 Vue。
你将学习：
- 元素如何移动
- 如何确定要按哪些键
- 如何确定碰撞时刻
- 您可以更进一步，添加幽灵移动控制
您将找到该项目的示例 GitHub上
用户管理
项目 GitHub上
创建用于用户管理的 CRUD 类型应用程序将教您开发的基础知识。 这对于新开发人员特别有用。
你将学习：
- 什么是路由
- 如何处理数据输入表单并检查用户输入的内容
- 如何使用数据库 - 创建、读取、更新和删除操作
Проверка погоды в вашем местоположении
项目 GitHub上
如果您想创建应用程序，请从天气应用程序开始。 该项目可以使用 Swift 完成。
除了获得构建应用程序的经验之外，您还将学习：
- 如何使用 API
- 如何使用地理定位
- 通过添加文本输入使您的应用程序更加动态。 在其中，用户将能够输入自己的位置来查看特定位置的天气。
您将需要一个 API。 要获取天气数据，请使用 OpenWeather API。 有关 OpenWeather API 的更多信息.
Окно чата
我的聊天窗口正在运行，在两个浏览器选项卡中打开
创建聊天窗口是开始使用套接字的完美方式。 技术堆栈的选择范围很大。 例如，Node.js 就很完美。
您将了解套接字如何工作以及如何实现它们。 这是该项目的主要优点。
如果您是想要使用套接字的 Laravel 开发人员，请阅读我的
亚搏体育app CI
如果您不熟悉持续集成 (CI)，请尝试一下 GitLab CI。 设置一些环境并尝试运行一些测试。 这不是一个非常困难的项目，但我相信您会从中学到很多东西。 现在很多开发团队都在使用 CI。 知道如何使用它很有用。
你将学习：
- 什么是 GitLab CI
- 如何配置
.gitlab-ci.yml它告诉 GitLab 用户该做什么 - 如何部署到其他环境
Анализатор сайтов
制作一个抓取工具来分析网站的语义并创建其评级。 例如，您可以检查图像中是否缺少 alt 标签。 或者检查页面是否有 SEO 元标记。 可以在没有用户界面的情况下创建抓取器。
你将学习：
- 刮刀如何工作？
- 如何创建 DOM 选择器
- 如何编写算法
- 如果您不想就此止步，请创建一个用户界面。 您还可以在您检查的每个网站上创建报告。
Определение настроений в социальных сетях
社交媒体上的情绪检测是了解机器学习的好方法。
您可以从分析一个社交网络开始。 每个人通常都是从 Twitter 开始的。
如果您已经有机器学习的经验，请尝试从不同的社交网络收集数据并将它们结合起来。
你将学习：
- 什么是机器学习
Клон Trello
你将学到什么：
- 请求处理路由的组织（Routing）。
- 拖放。
- 如何创建新对象（板、列表、卡片）。
- 处理和检查输入数据。
- 从客户端：如何使用本地存储、如何将数据保存到本地存储、如何从本地存储读取数据。
- 从服务器端：如何使用数据库、如何在数据库中保存数据、如何从数据库中读取数据。
，用 React+Redux 制作。
Панель админа
一个简单的 CRUD 应用程序，非常适合学习基础知识。 让我们来学习：
- 创建用户、管理用户。
- 与数据库交互——创建、读取、编辑、删除用户。
- 验证输入并使用表单。
Трекер криптовалют (нативное мобильное приложение)
任何东西：Swift、Objective-C、React Native、Java、Kotlin。
来学习吧：
- 本机应用程序如何工作。
- 如何从 API 检索数据。
- 本机页面布局如何工作。
- 如何使用移动模拟器。
。 如果您发现更好的东西，请写在评论中。
如果你有兴趣，这里是 .
Настроить собственный конфиг webpack с нуля
从技术上讲，这不是一个应用程序，但从内部了解 webpack 的工作原理是一项非常有用的任务。 现在它不再是一个“黑匣子”，而是一个可以理解的工具。
要求：
- 将 es7 编译为 es5（基础）。
- 将 jsx 编译为 js - 或 - .vue 编译为 .js （你必须学习加载器）
- 设置 webpack 开发服务器和热模块重载。 （vue-cli 和 create-react-app 都使用）
- 使用 Heroku、now.sh 或 Github，学习如何部署 webpack 项目。
- 设置您最喜欢的预处理器来编译 css - scss、less、stylus。
- 了解如何通过 webpack 使用图像和 svgs。
Клон Hackernews
每个绝地武士都必须制作自己的黑客新闻。
在此过程中您将学到什么：
- 如何与 hackernews API 交互。
- 如何创建单页应用程序。
- 如何实现查看评论、个人评论、个人资料等功能。
- 请求处理路由的组织（Routing）。
Тудушечка
严重地？ 图杜什卡？ 有数千个。 但请相信我，这种受欢迎是有原因的。
Tudu 应用程序是确保您了解基础知识的好方法。 尝试用普通 Javascript 编写一个应用程序，并用您最喜欢的框架编写一个应用程序。
学习：
- 创建新任务。
- 检查字段是否已填写。
- 过滤任务（已完成、活动、全部）。 使用
filterиreduce. - 了解 JavaScript 的基础知识。
Сортируемый drag and drop список
非常有助于理解 .
让我们来学习：
- 拖放API
- 创建丰富的 UI
Клон мессенджера (нативное приложение)
您将了解 Web 应用程序和本机应用程序的工作原理，这将使您从灰色人群中脱颖而出。
我们将研究什么：
- Web 套接字（即时消息）
- 本机应用程序如何工作。
- 模板如何在本机应用程序中工作。
- 在本机应用程序中组织请求处理路由。
文本编辑器
文本编辑器的目的是减少用户尝试将格式转换为有效 HTML 标记的工作量。 一个好的文本编辑器允许用户以不同的方式设置文本格式。
在某些时候，每个人都使用过文本编辑器。 那么为什么不呢 ?
Клон Reddit
是一个社交新闻聚合、网络内容评级和讨论网站。
Reddit 占据了我大部分的时间，但我还是继续闲逛。 创建 Reddit 克隆是学习编程的有效方法（同时浏览 Reddit）。
Reddit为您提供了非常丰富的。 不要遗漏任何功能或随意做事。 在与客户和客户打交道的现实世界中，您不能随意工作，否则您很快就会失业。
聪明的客户会立即意识到工作做得不好，并会寻找其他人。
Публикация пакета NPM с открытым исходным кодом
如果您用 Javascript 编写代码，您很可能会使用包管理器。 包管理器允许您重用其他人编写和发布的现有代码。
了解包的完整开发周期将提供非常好的体验。 发布代码时需要了解很多事情。 您需要考虑安全性、语义版本控制、可扩展性、命名约定和维护。
包可以是任何东西。 如果您没有想法，请创建您自己的 Lodash 并发布。
洛达什：
如果你在网上做过一些事情，你就会比其他人高出 10%。 关于开源和软件包。
Учебный план freeCodeCamp
freeCodecamp 收集了很多 .
freeCodeCamp 是一个非盈利组织。 它由一个基于网络的交互式学习平台、一个在线社区论坛、聊天室、媒体出版物和旨在让每个人都能参与学习网络开发的本地组织组成。
如果您能够完成整个课程，您将完全有资格胜任第一份工作。
Создайте HTTP-сервер с нуля
HTTP 协议是内容在 Internet 上传输的主要协议之一。 HTTP 服务器用于提供静态内容，例如 HTML、CSS 和 JS。
能够从头开始实现 HTTP 协议将扩展您对事物如何交互的了解。
例如，如果您使用 NodeJs，那么您就知道 Express 提供了 HTTP 服务器。
作为参考，看看您是否可以：
- 不使用任何库设置服务器
- 服务器必须提供 HTML、CSS 和 JS 内容。
- 从头开始实现路由器
- 监控更改并更新服务器
如果您不知道为什么，请使用 并尝试创建一个 HTTP 服务器 从头开始。
Десктопное приложение для заметок
我们都记笔记，不是吗？
让我们创建一个笔记应用程序。 应用程序需要保存笔记并将其与数据库同步。 使用 Electron、Swift 或任何您喜欢且适合您系统的工具构建本机应用程序。
请随意将其与第一个挑战（文本编辑器）结合起来。
作为奖励，请尝试将桌面版本与网络版本同步。
Подкасты (клон Overcast)
谁不听播客？
创建具有以下功能的 Web 应用程序：
- Завестиаккаунт
- 搜索播客
- 评价并订阅播客
- 停止和播放、变速、前进和后退功能 30 秒。
尝试使用 iTunes API 作为起点。 如果您还知道其他资源，请在评论中留言。
屏幕截图
你好！ 我现在正在拍摄我的屏幕！
创建一个桌面或网络应用程序，允许您捕获屏幕并将剪辑另存为 .gif
这里 如何实现这一点。
来源
来源： habr.com