小編精選 - 技術文章翻譯  ·  11月10日

10 個可提升您編碼技能的專案

10 個可提升您編碼技能的專案

原文出處：https://dev.to/bigsondev/10-projects-to-skyrocket-your-coding-skills-19hl

介紹

每當您考慮提高編碼水平時，都有很多選擇可以實現。您可以閱讀開發文章或無限循環地閱讀教程、課程、影片和書籍，但真正的關鍵是從學習過渡到動手編碼，相信我，沒有比應用您所掌握的所有概念更好的方法了。到目前為止，我們已經透過基於專案的學習學習了。

我自己是一名擁有 8 年以上經驗 的軟體工程師，我發送了大量的履歷，進行了數十次面試，尤其是現在，當獲得前端/Web 開發人員的工作比以往任何時候都更加棘手時，我強烈建議您建立自己的專案。

為了在人群中脫穎而出，我將描述 10 個專案，每個專案都有獨特的設計、要求和技能，您可以掌握這些來建立您的作品集，並實際建立可以影響您作為開發人員進步的東西！

此外，每個專案都附帶預先定義的實施卡，可以幫助您感覺自己像在敏捷環境中工作的真正開發人員，具有使用者故事和驗收標準，同時也支援專案本身的規劃。

名片

深入 Web 開發的良好介紹暖身。

圖片描述

您將了解基本的 HTML 和 CSS、響應式設計原則以及線上個人品牌介紹。

卡牌

1.UI容器

  1. 用戶聯繫部分

  2. 用戶形象

  3. 使用者資訊部分

  4. 絕對定位的形狀

  5. 動畫

其他資源

素食王

經典的CSS RWD Landing Page樣式，感受媒體質疑！

圖片描述

您將學習進階 CSS 技術、CSS Flexbox/Grid，以及如何建立回應靈敏且有吸引力的登陸頁面。

卡牌

  1. 導航

2.英雄區

  1. 關於我們部分

  2. 菜單部分

  3. 畫廊部分

  4. 聯繫部分

  5. 頁尾

  6. 懸停效果

  7. 行動選單

10.響應式網頁設計

  1. 優化

其他資源

計算機

讓我們進一步了解 JS、邏輯、純函數和一些數學運算。

圖片描述

您將學習 JavaScript 基礎知識、DOM 操作和事件處理來建立互動式 Web 應用程式。

卡牌

1.UI容器

  1. 輸入數字

  2. 數學運算

  3. 清除和重置

  4. 之前的操作

  5. 明暗模式

  6. 邊緣情況處理

其他資源

Just Weather

此專案類型已多次用於面試帶回家挑戰，值得至少做一次！

圖片描述

您將學習如何從外部 API、非同步 JavaScript（Promises、async/await）獲取資料，並在 Web 上顯示動態資料。

卡牌

1.API配置

  1. 搜尋欄

  2. 地點和溫度

  3. 每小時預報

  4. 天氣詳情

  5. 位置存取

  6. 溫度單位切換

  7. 最近的搜尋

  8. 骨骼動畫

  9. 錯誤處理

其他資源

GifTok

更多 API、分頁、無限滾動。

圖片描述

您將學習如何使用富媒體 API、實作分頁並確保適合行動裝置的 UI。

卡牌

1.API配置

2.顯示第一個GIF

  1. 滑動下一步

  2. 向後滑動

5.無限滑動

  1. 用戶詳細訊息

  2. 骨架加載

  3. 桌面版

  4. 邊緣情況

其他資源

注意

另一種經典的待辦事項應用程式風格，如果您還沒有建立一個，現在可能是個好時機！

圖片描述

您將學習現代 JavaScript 框架中的 CRUD 操作、狀態管理以及不可變程式設計的原理。

卡牌

  1. 導航佔位符

  2. 新筆記

  3. 列出註釋

  4. 編輯註釋

  5. 刪除註釋

  6. 填寫註釋

  7. 搜尋筆記

  8. 過濾筆記

  9. 完成筆記

  10. 空狀態

  11. 字段驗證

  12. 持久性存儲

其他資源

顏色記憶

建立遊戲並擁有元件化和結構的高級圖片總是好的。

圖片描述

您將學習軟體開發中的邏輯建置、維護應用程式狀態和使用者互動處理。

卡牌

  1. 圓形元件

  2. 首頁

  3. 遊戲玩法

  4. 遊戲結束模式

  5. 最佳成績

  6. 遊戲規則模態

  7. 聲音通知

8.響應式網頁設計

  1. 邊緣情況

其他資源

AI 貼文產生器

人工智慧的現代趨勢很奇特，對吧？了解最受歡迎的可用 API 之一的絕佳機會。

圖片描述

您將學習透過 API 與 AI 交互，了解提示的工作原理，並根據實際用例建立工具。

卡牌

1.API配置

2.UI容器

  1. 社交平台選擇器

  2. 訊息文字區域

  3. 音調和風格選擇器

  4. 產生貼文按鈕

  5. 生成階段

  6. 按鈕邏輯

其他資源

關卡編輯器

這就像您的第一個「迷你 Photoshop 工具」😁 如今有很多類似風格的「無程式碼」應用程式。

圖片描述

您將學習如何實現拖放功能、資產管理以及遊戲級設計和 UX/UI 考量的基礎知識。

卡牌

1.UI容器

  1. 資產提現機制

3、快速資產

  1. 撤銷功能

  2. 橡皮擦工具

  3. 變焦能力

  4. 設定與匯出

  5. 調整網格大小

  6. 等級的持續性

其他資源

任何聊天

掌握前端和後端、套接字和事件廣播的完整流程是一項非常有用的技能。

圖片描述

您將學習全端開發，包括伺服器端程式設計、即時資料處理和資料庫管理。

卡牌

  1. 入職頁面

  2. 進入聊天頁面

3.Node.js伺服器

  1. 聊天頁標題

  2. 聊天視窗

  3. 聊天頁頁腳

  4. 訊息發送

8.表情符號支持

  1. 連接和斷開

  2. 邊緣情況

其他資源

結論

嘗試技術、框架和函式庫，建立您自己的創意變體，看看什麼最適合您。我絕對建議您擴展HTML/CSS 之外的技能，加入更多JS 和邏輯，同時使用API、React/Vue/Svelte 等一些流行框架，並深入研究Node.js/Express 以了解完整的前端是如何運作的。<-> 後端流程有效。

建立出色的專案，我祈禱面試成功，繼續編碼。

長期以來，我的目標是透過社區傳播基於專案的學習方法，並啟動並執行 BigDevSoon，這是我們過去 2 年一直在開發的應用程式年對我們來說是一項偉大的成就。

如果您喜歡本文，請隨意傳播！ ❤️

0個讚   0留言 160瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。
熱門文章
🔥 分享從十開始的轉職之路
🔥 分享最近面試心得
🔥 各位新年快樂 😁
🔥 ✨2024 我的決心：更以開源專案為中心思想！
🔥 使用 VSCode 更快輸入程式碼的技巧分享
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 工作 node.js 房 COM C 學習 使用 2 COMPO 開發 前 Ai . c 1 ui 10 AI 20 React 4 html github 分享 語言 網站 作業 git 技術 ci PHP 作為 50 HTML 題 第一 前端 java JS api 搜尋 工程師 研究 資料庫 專案 react ` 系列 結構 id cn go with create 測試 非同步 % 後端 分離 .NET jav user PYTHON 新創 ") 練習 prisma 聊天 Line for 作業分享 遊戲 Github theprofs 研 this colab js ＣＳＳ CD 謝謝 vs 架構 機器人 Java CSS promise app rest vue 資料結構 part Node Can javascript /etc/passwd 非同步 JS 訓練 Fetch API ruby PHP'
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。