1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
本文的翻譯得到了 EDISON Software 的支持， 和 .
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 樣式。
技術堆疊和功能
- 使用鉤子進行反應
- 創建反應應用
- JSX
- 的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
- 降價
- 網絡化
這當然不是最全面的教程，但它涵蓋了 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)
誰不聽Podcast？
建立具有以下功能的 Web 應用程式：
- 創建一個帳戶
- 搜尋播客
- 評價並訂閱播客
- 停止和播放、變速、前進和後退功能 30 秒。
嘗試使用 iTunes API 作為起點。 如果您還知道其他資源，請在評論中留言。
屏幕截圖
你好！ 我現在正在拍攝我的螢幕！
建立一個桌面或網路應用程序，讓您可以捕獲螢幕並將剪輯另存為 .gif
這裡 如何實現這一點。
來源
來源： www.habr.com