介紹
從第一天開始動手學習程式碼是進入編碼最酷的方法之一，每次你邁出一小步，修復錯誤或加入新功能，你都能感受到多巴胺的提升！
您可能會因為不知道如何建置某些東西或繼續前進而很快陷入困境，但這就是編碼的全部意義，當您遇到障礙時，您需要找到一種方法來實現和交付功能，閱讀文件，了解如何學習和如何用谷歌搜尋東西，但每次你都會做得更好一點...
……當您完成整個專案的那一刻真是太棒了！為你的作品集+1，學習新技能和成就感是獨一無二的。
讓我介紹另外 10 個您可以建立的專案，以將您的編碼技能提高 10 倍！
無恥地提前插入，但您可以訂閱SUMMER40促銷程式碼並釋放您的編碼能力，跳上程式碼學習火車並在 2-3 個月內申請工作（如果您認真對待學習）。
讓我們深入了解這些專案吧！ 🤿
1.圖鑑
把他們全部抓住！啊，這勾起了我很多回憶，讓我們一起建立一個包含所有物種的神奇寶貝字典！
顯然，您將了解有關 Pokémons 的更多資訊…以及有關具有無限加載、動態渲染和 RWD、互動式搜尋面板、排序、過濾和資料處理詳細視圖的 API 整合的更多資訊！
牌
-
API配置
-
介面渲染
-
搜尋面板
-
排序功能
-
過濾器
-
神奇寶貝詳情
如何建立教程
其他資源
2.音樂播放器
這是重新建立您最喜歡的音樂播放器並了解 HTML 中的音訊控制項（以及用於樣式設計的 CSS）的絕佳方法。
您將了解有關 UI 控制、資料處理、事件處理、音訊播放和酷炫 UX/UI 設計的更多資訊。
牌
-
使用者介面邏輯
-
播放鈕
-
暫停按鈕
-
重播按鈕
-
循環按鈕
-
時間滑桿
-
下一個按鈕
-
上一個按鈕
-
靜音按鈕
-
取消靜音按鈕
-
聲級滑桿
如何建立教程
其他資源
3.程式碼編輯器
重新建立 JSFiddle 或 CodePen 等網站的主要功能。 🤩
您將了解 JavaScript 互動性、CSS 靈活性（flexbox/網格佈局）、第 3 方庫整合（例如 CodeMirror）以及一些用於在使用者會話之間保留程式碼的本機儲存。
牌
-
導覽列
-
程式碼區
-
程式碼預覽
-
調整垂直條的大小
-
變更視圖按鈕
-
程式碼編輯器庫
-
響應式網頁設計
-
其他案例
如何建立教程
其他資源
4.測驗應用程式
建立一個有趣的測驗應用程式，其中包含來自不同類別的 10 個隨機生成的問題，可輕鬆玩遊戲並測試您的知識。
您將了解 API 整合（開放 Trivia DB API）、互動式 UI 開發、問題和結果頁面之間轉換的狀態管理以及響應式設計 (RWD)。
牌
-
API配置
-
首頁
-
測驗生成
-
問題邏輯
-
最後一個問題
-
結果欄
-
結果 答案
-
黏性導航
-
平板電腦設計
-
行動設計
如何建立教程
其他資源
5.找電影
建立您的應用程式以快速預覽精選電影和電視劇，搜尋您最喜歡的電影，並查看其詳細資訊頁面！
您將學習從外部 API 獲取資料、具有去抖動功能的動態搜尋技術、現代 UX/UI 設計以及資料分頁的無限滾動。
牌
-
API配置
-
搜尋欄
-
今日精選部分
-
首映和公告部分
-
詳情頁
-
骨骼動畫
-
錯誤處理
-
最近的搜尋
-
骨骼動畫
-
錯誤處理
如何建立教程
其他資源
6.井字棋
有史以來最經典的遊戲之一，稍微研究一下游戲邏輯總是很有趣的。
您將了解更多有關互動式現代前端開發、遊戲邏輯實現、RWD、模態、帶有狀態管理的事件處理以及基本路由的知識。
牌
-
首頁
-
選擇球員
-
遊戲板
-
遊戲玩法
-
遊戲結束
-
莫代爾
-
平板電腦設計
-
行動設計
如何建立教程
其他資源
7.所有應用程式
另一種經典的待辦事項應用程式風格，如果您還沒有建立一個，現在可能是個好時機！
您將學習互動式 UI 設計，包括動態 JavaScript 內容管理、CSS 和主題，以及使用狀態管理進行事件處理，以執行建立待辦事項、將其標記為已完成或刪除等操作。
牌
-
使用者介面容器
-
新增待辦事項
-
刪除所有
-
標記為已完成
-
燈光模式切換
如何建立教程
其他資源
8.博客
最好建立的專案之一，因為它是動態內容，通常需要 CMS，這是未來客戶建置的常見請求之一！ （例如動態內容網路商店網站等）
您將學到很多關於使用不同路由器的頁面導航、SEO 優化（如果在 NextJS 中建立）的知識，以及深入研究各種 CMS 以及如何在前端和 API 之間連接它們。 RWD 也包含在其中。
牌
-
內容策略
-
基本導航
-
英雄區
-
部落格文章部分
-
關於部分
-
全域頁腳
-
貼文頁面
-
動態搜尋
-
部落格文章頁面
-
行動設計
如何建立教程
其他資源
9.儀表板
圖表、表格中不同資料的視覺化是當今開發人員應該具備的關鍵技能，尤其是使用不同的元件和圖表庫。
您將學習如何使用選單專案建立側邊欄以及從頂部導覽和網格系統內容開始的整個導覽佈局。最重要的是，您可以連接模擬 API 資料以合併載入和錯誤狀態處理。
牌
-
資料管理
-
側邊欄
-
頂部導航
-
數位卡
-
銷售概覽圖
-
銷售區域圖
-
註冊用戶圖表
-
整合清單
-
淺色深色模式
如何建立教程
其他資源
10.角色產生器
具有狀態管理的頭像建立者是一個非常常見的問題，資料結構，從本地儲存加載，即時改變它。這是一個初級專案，但完成起來仍然會很有趣！
了解如何管理狀態、優化圖片/使用 SVG 以及實現隨機角色建立和從畫布下載圖像等功能。
牌
-
使用者介面容器
-
角色自訂
-
隨機選擇
-
儲存角色
-
堅持性格
如何建立教程
其他資源
概括
就是這樣！從這些專案中可以學到很多東西，每個專案都是獨一無二的，並且是您投資組合的一個很好的補充。
長期以來，我的目標是在社群中傳播基於專案的學習方法，並啟動並執行BigDevSoon ，這是我們過去 2 年一直致力於開發的應用程式。這對我們來說是一項偉大的成就。
繼續編碼！ 🙇♂️
原文出處：https://dev.to/bigsondev/10-projects-to-master-frontend-web-development-acm
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式