原文出處：https://dev.to/bigsondev/10-projects-to-skyrocket-your-coding-skills-19hl
介紹
每當您考慮提高編碼水平時，都有很多選擇可以實現。您可以閱讀開發文章或無限循環地閱讀教程、課程、影片和書籍，但真正的關鍵是從學習過渡到動手編碼，相信我，沒有比應用您所掌握的所有概念更好的方法了。到目前為止，我們已經透過基於專案的學習學習了。
我自己是一名擁有 8 年以上經驗 的軟體工程師，我發送了大量的履歷，進行了數十次面試，尤其是現在，當獲得前端/Web 開發人員的工作比以往任何時候都更加棘手時，我強烈建議您建立自己的專案。
為了在人群中脫穎而出，我將描述 10 個專案，每個專案都有獨特的設計、要求和技能，您可以掌握這些來建立您的作品集，並實際建立可以影響您作為開發人員進步的東西！
此外，每個專案都附帶預先定義的實施卡，可以幫助您感覺自己像在敏捷環境中工作的真正開發人員，具有使用者故事和驗收標準，同時也支援專案本身的規劃。
名片
深入 Web 開發的良好介紹暖身。
您將了解基本的 HTML 和 CSS、響應式設計原則以及線上個人品牌介紹。
卡牌
1.UI容器
-
用戶聯繫部分
-
用戶形象
-
使用者資訊部分
-
絕對定位的形狀
-
動畫
其他資源
素食王
經典的CSS RWD Landing Page樣式，感受媒體質疑！
您將學習進階 CSS 技術、CSS Flexbox/Grid，以及如何建立回應靈敏且有吸引力的登陸頁面。
卡牌
- 導航
2.英雄區
-
關於我們部分
-
菜單部分
-
畫廊部分
-
聯繫部分
-
頁尾
-
懸停效果
-
行動選單
10.響應式網頁設計
- 優化
其他資源
計算機
讓我們進一步了解 JS、邏輯、純函數和一些數學運算。
您將學習 JavaScript 基礎知識、DOM 操作和事件處理來建立互動式 Web 應用程式。
卡牌
1.UI容器
-
輸入數字
-
數學運算
-
清除和重置
-
之前的操作
-
明暗模式
-
邊緣情況處理
其他資源
Just Weather
此專案類型已多次用於面試帶回家挑戰，值得至少做一次！
您將學習如何從外部 API、非同步 JavaScript（Promises、async/await）獲取資料，並在 Web 上顯示動態資料。
卡牌
1.API配置
-
搜尋欄
-
地點和溫度
-
每小時預報
-
天氣詳情
-
位置存取
-
溫度單位切換
-
最近的搜尋
-
骨骼動畫
-
錯誤處理
其他資源
GifTok
更多 API、分頁、無限滾動。
您將學習如何使用富媒體 API、實作分頁並確保適合行動裝置的 UI。
卡牌
1.API配置
2.顯示第一個GIF
-
滑動下一步
-
向後滑動
5.無限滑動
-
用戶詳細訊息
-
骨架加載
-
桌面版
-
邊緣情況
其他資源
注意
另一種經典的待辦事項應用程式風格，如果您還沒有建立一個，現在可能是個好時機！
您將學習現代 JavaScript 框架中的 CRUD 操作、狀態管理以及不可變程式設計的原理。
卡牌
-
導航佔位符
-
新筆記
-
列出註釋
-
編輯註釋
-
刪除註釋
-
填寫註釋
-
搜尋筆記
-
過濾筆記
-
完成筆記
-
空狀態
-
字段驗證
-
持久性存儲
其他資源
顏色記憶
建立遊戲並擁有元件化和結構的高級圖片總是好的。
您將學習軟體開發中的邏輯建置、維護應用程式狀態和使用者互動處理。
卡牌
-
圓形元件
-
首頁
-
遊戲玩法
-
遊戲結束模式
-
最佳成績
-
遊戲規則模態
-
聲音通知
8.響應式網頁設計
- 邊緣情況
其他資源
AI 貼文產生器
人工智慧的現代趨勢很奇特，對吧？了解最受歡迎的可用 API 之一的絕佳機會。
您將學習透過 API 與 AI 交互，了解提示的工作原理，並根據實際用例建立工具。
卡牌
1.API配置
2.UI容器
-
社交平台選擇器
-
訊息文字區域
-
音調和風格選擇器
-
產生貼文按鈕
-
生成階段
-
按鈕邏輯
其他資源
關卡編輯器
這就像您的第一個「迷你 Photoshop 工具」😁 如今有很多類似風格的「無程式碼」應用程式。
您將學習如何實現拖放功能、資產管理以及遊戲級設計和 UX/UI 考量的基礎知識。
卡牌
1.UI容器
- 資產提現機制
3、快速資產
-
撤銷功能
-
橡皮擦工具
-
變焦能力
-
設定與匯出
-
調整網格大小
-
等級的持續性
其他資源
任何聊天
掌握前端和後端、套接字和事件廣播的完整流程是一項非常有用的技能。
您將學習全端開發，包括伺服器端程式設計、即時資料處理和資料庫管理。
卡牌
-
入職頁面
-
進入聊天頁面
3.Node.js伺服器
-
聊天頁標題
-
聊天視窗
-
聊天頁頁腳
-
訊息發送
8.表情符號支持
-
連接和斷開
-
邊緣情況
其他資源
結論
嘗試技術、框架和函式庫，建立您自己的創意變體，看看什麼最適合您。我絕對建議您擴展HTML/CSS 之外的技能，加入更多JS 和邏輯，同時使用API、React/Vue/Svelte 等一些流行框架，並深入研究Node.js/Express 以了解完整的前端是如何運作的。<-> 後端流程有效。
建立出色的專案，我祈禱面試成功，繼續編碼。
長期以來，我的目標是透過社區傳播基於專案的學習方法，並啟動並執行 BigDevSoon，這是我們過去 2 年一直在開發的應用程式年對我們來說是一項偉大的成就。
如果您喜歡本文，請隨意傳播！ ❤️
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式