100 天 Web 開發學習計劃

這份 **100 天 Web 開發學習計劃** 提供了一個結構化的路徑，幫助你在 100 天內學習 Web 開發。本學習計劃將 Web 開發概念分解成每日任務，從 HTML、CSS 和 JavaScript 開始，涵蓋現代 Web 框架、Web 安全概念和全棧部署。因此，如果你想要全面瞭解 Web 開發，請閱讀本文，並點選附加的超連結檢視每個主題的詳細概述。

100 Days of Web Development

什麼是 Web 開發？

Web 開發是建立和維護網際網路上網站的過程。它包括三個部分：首先是前端開發，專注於開發使用者介面；然後是後端開發，涉及建立伺服器端邏輯；最後是資料庫管理，用於儲存和檢索使用者資料。

Web Development = Front-End + Back-End + DataBase

目錄

基礎階段 (第 1-25 天): HTML & CSS 基礎

HTML 和 CSS 是 Web 開發的關鍵部分。要學習 Web 開發，首先需要學習 HTML 標記語言，它用於為網頁新增結構。

第 1 周：HTML 基礎

在第一週，你需要學習基本的 HTML 概念，如何顯示文字、標題、超連結等。以下是按天細分的學習內容。

第 2 周：CSS 基礎

在第二週，開始學習基本的 CSS 概念，例如常用的屬性和選擇器。

第 3 周：響應式設計

在第三週，開始學習響應式 Web 設計的概念，包括媒體查詢、容器查詢、響應式單位和響應式視口。

第 4 周：高階 CSS

在第四周，學習高階 CSS 技術和最佳實踐，以建立專業且可擴充套件的設計。

互動階段 (第 26-50 天): JavaScript 基礎

本階段介紹 JavaScript，這是一種使網頁具有互動性的程式語言。你將從基礎知識開始，逐步學習高階概念和專案。

第 5 周：JavaScript 基礎

學習 JavaScript 的基本概念及其工作原理。

第6周：高階JavaScript

第6周重點學習JavaScript的高階特性，例如ES6特性、事件處理、儲存API和錯誤處理。以下是每天的細分。

  • 第33天：學習JavaScript中的事件處理，以響應使用者的操作，例如點選、懸停和按鍵。
  • 第34天：理解本地儲存和會話儲存，用於在瀏覽器中儲存資料。學習如何在JavaScript中編寫儲存指令碼，並嘗試將其應用到HTML頁面。
  • 第35天：探索現代ES6+特性，例如箭頭函式和解構賦值。
  • 第36天：學習使用Promise和async/await處理非同步任務。
  • 第37天：學習使用Fetch API並瞭解AJAX如何與伺服器通訊。
  • 第38天：使用`try`、`catch`和`finally`瞭解JavaScript中的錯誤處理。
  • 第39天：建立一個天氣應用程式專案，使用'openWeatherMap API'獲取天氣詳情並在瀏覽器中顯示。
    • 天氣應用專案

第7周：現代JavaScript

深入學習高階概念和現代JavaScript實踐。

  • 第40天：學習什麼是JavaScript模組以及如何匯入/匯出它們。
  • 第41天：理解面向物件程式設計(OOP)的概念以及如何在JavaScript中使用類。
  • 第42天：學習使用Map、Set和WeakMap儲存資料集合。
  • 第43天：學習正則表示式，用於文字中的模式匹配和驗證。
  • 第44天：學習如何在JavaScript中操作日期和時間。
  • 第45天：學習如何使用JSON，包括解析和序列化資料。
  • 第46天：構建一個任務管理應用程式來練習現代JavaScript概念。
    • 任務管理應用

第8周：開發者工具

學習現代JavaScript開發的必要工具和實踐。

  • 第47天：學習如何使用Chrome DevTools除錯JavaScript。
  • 第48天：瞭解npm包管理，以及如何在專案中安裝和使用包。
  • 第49天：學習Webpack及其在捆綁JavaScript檔案中的作用。
  • 第50天：透過新增JavaScript互動功能，完成你的投資組合網站的第二個版本。
    • 投資組合網站v2.0

框架階段 (第51-75天)：現代Web開發

本階段重點學習現代框架和後端基礎知識，以建立全棧應用程式。

第9周：React基礎

React是一個流行的用於構建使用者介面的JavaScript庫。雖然你可以使用純HTML和CSS構建UI，但對於高階特性和功能，React是必須的。所以學習React很重要。

  • 第51天：設定React應用程式並學習JSX，這是一種在JavaScript中編寫類似HTML程式碼的語法。
  • 第52天：理解元件、props以及如何在它們之間傳遞資料。
  • 第53天：學習React中的狀態和狀態管理，然後學習什麼是Hook以及React中不同型別的Hook。
  • 第54天：`useState`和`useEffect` Hook是React中常用的用於狀態管理和API呼叫的Hook。因此，將一整天的時間都用來學習`useEffect`和`useState` Hook。
  • 第55天：學習如何在React中新增和處理事件。涵蓋箭頭方法和繫結方法，以將引數傳遞給事件處理程式。
  • 第56天：學習如何在React中構建應用程式表單並管理表單資料、驗證和其他功能。
  • 第57天：建立一個專案：React中的待辦事項應用程式，以練習這些概念。
    • React待辦事項應用專案

第10周：高階React

開始學習React的高階功能，例如上下文API、自定義Hook、使用Redux進行狀態管理等。以下是每天的細分。

  • 第58天：開始學習React中的上下文API。瞭解如何在不使用props的情況下將資訊從父元件傳遞到其所有子元件。
  • 第59天：學習如何在React中建立自定義Hook。瞭解使用自定義Hook在多個元件之間重用邏輯。
  • 第60天：學習使用React Router在你的應用程式中實現導航和路由。
  • 第61天：學習如何使用useEffect Hook整合API，以從外部來源獲取資料並即時更新渲染的內容。
  • 第62天：學習使用React的Redux庫進行高階狀態管理原則。瞭解如何使用Redux API在複雜元件中進行狀態管理。
  • 第63天：將這一天用於學習與測試React應用程式相關的所有概念。學習什麼是JEST，如何使用@testing-library庫等。
  • 第64天：建立一個專案：使用React的電子商務產品頁面。
    • 電子商務產品頁面

第11周：後端基礎

現在是時候開始學習後端開發並構建RESTful API來與前端框架進行通訊了。

  • 第65天：對於後端開發，開始學習Node.js的基礎知識，使用Node.js建立一個JavaScript執行時，嘗試設定NodeJS環境並使用Node.js後端建立你的第一個應用程式。
  • 第66天：在學習Node.js之後，開始學習Express.js Web應用程式框架。學習開發Express.js環境，然後建立一個簡單的Hello World應用程式，然後學習如何在Express.js中管理REST API。
  • 第67天：學習更多關於RESTful API設計的基本原則、REST API的型別、方法以及如何在JavaScript環境中使用REST API。
  • 第68天：開始學習MongoDB，這是一個NoSQL資料庫，用於儲存和管理使用者資料。學習如何建立資料庫、建立集合、更新資料等。還要學習如何將MongoDB整合到JavaScript環境中。
  • 第69天：學習如何使用MongoDB和Express執行CRUD（建立、讀取、更新、刪除）操作。
  • 第70天：使用JSON Web Tokens (JWT)實現使用者身份驗證。
    • JWT身份驗證
  • 第71天：建立一個專案：為一個簡單的應用程式構建一個RESTful API。
    • RESTful API專案

專案階段 (第76-100天)：全棧開發

本階段將你的前端、後端和部署技能結合起來，建立具有高階功能的完整全棧應用程式。

第12周：全棧整合

學習如何將前端與後端整合，並處理全棧開發中的常見挑戰。以下是每天的細分。

第13周：高階功能

使用即時更新、搜尋、安全和其他高階功能來增強應用程式。

  • 第79天：學習如何使用WebSocket API實現即時更新。如果你正在構建即時應用程式（如聊天應用程式、視訊通話應用程式等），這些非常有用。
  • 第80天：學習如何在你的網頁中新增搜尋功能來過濾內容。一些搜尋功能可以使用JavaScript在前端實現。但有時資料可能儲存在後端，需要從伺服器獲取並顯示給使用者。因此，學習實現最佳化的搜尋演算法。
  • 第81天：學習如何在你的網頁中實現分頁。分頁是建立大型網頁的多個片段並將它們逐一顯示給終端使用者。
  • 第82天：學習如何使用影像精靈和其他方法最佳化影像，以加快載入時間並提高效能。
  • 第83天：學習SEO基礎知識，以提高搜尋引擎可見性。這將有助於您的網頁在谷歌搜尋結果中獲得更高的排名。
  • 第84天：學習應用程式安全最佳實踐，以保護您的應用程式。
  • 第85天：建立一個專案：具有即時訊息功能的聊天應用程式。
    • 聊天應用程式專案

第14周：部署和DevOps

將您的應用程式部署到網路，並學習DevOps基礎知識以改進軟體交付。

  • 第86天：學習如何使用Git控制不同版本的網頁，以及如何使用GitHub管理多個儲存庫。學習使用GitHub Copilot簡化Web開發流程並在GitHub上管理程式碼。
  • 第87天：瞭解持續整合和持續交付 (CI/CD) 的基礎知識。
  • 第88天：學習Docker基礎知識，以容器化您的應用程式。
  • 第89天：學習將應用程式部署到Heroku或Vercel等雲平臺。
  • 第90天：學習如何為您的應用程式設定域名和配置DNS。
  • 第91天：瞭解什麼是SSL證書，為什麼使用它，以及如何在您的專案中安裝它。
  • 第92天：建立一個專案：部署包含所有這些元件的全棧應用程式。

第15周：最終專案

本週致力於構建和部署完整的Web應用程式。以下是按天細分的計劃。

  • 第93天：規劃專案，定義需求並設定開發環境。
  • 第94-95天：開發後端、API、資料庫整合和身份驗證。
  • 第96-97天：構建具有各種螢幕尺寸使用者介面的前端。
  • 第98天：將前端與後端連線，並測試應用程式是否存在任何潛在問題。
  • 第99天：將應用程式部署到Heroku或Vercel等即時伺服器。
  • 第100天：新增最終潤色，編寫文件並展示專案。

實踐專案建議

  • 部落格平臺：建立一個部落格平臺，使用者可以在其中撰寫、編輯和釋出文章。新增使用者身份驗證、評論和標籤等功能。
    • 前端：使用React.js，它可以為部落格頁面構建動態元件。
    • 後端：使用Django，一個基於Python的後端，易於使用。
    • 資料庫：使用PostgreSQL，它儲存諸如文章之類的結構化資料。

    示例：Tutorialspoint文章部分，這是一個使用者可以撰寫、閱讀、釋出和評論文章的平臺。


  • 預訂系統：為約會或活動註冊等服務建立一個預訂應用程式。新增可用性檢查和確認通知等功能。
    • 前端：使用Angular，它可以處理動態表單。
    • 後端：使用Node.js，以管理多個請求。
    • 資料庫：使用MongoDB，它儲存靈活的資料。

    示例：谷歌航班預訂系統，印度鐵路公司火車預訂系統


  • 個人作品集：建立一個個人作品集網站，以展示您的技能、專案和經驗。
    • 前端：使用HTML和Bootstrap CSS，快速響應式設計。
    • 後端：不需要。
    • 資料庫：不需要

    示例：作品集網站，這是一個使用HTML和CSS設計的簡單作品集網站，展示工作經驗。


  • 電子商務網站：構建一個線上商店，具有產品列表、購物車和結賬等功能。使用支付閘道器API處理支付。
    • 前端：使用Vue.js，它具有反應式產品列表。
    • 後端：使用Express.js，可以高效地處理API。
    • 資料庫：使用MySQL，用於關係資料管理。

    示例：Flipkart，亞馬遜


  • 社交媒體克隆：建立一個簡化版本的社交媒體平臺，使用者可以在其中建立個人資料、釋出更新並透過點贊和評論與其他人互動。
    • 前端：使用React Js和React Native，同時構建Web和移動應用程式。
    • 後端：使用Django
    • 資料庫：使用Firebase。

    示例：Instagram，Facebook


  • 任務管理應用程式：開發一個應用程式來管理任務、設定截止日期和跟蹤進度。新增優先順序和提醒等功能，以提高可用性。
    • 前端：使用React.js
    • 後端：使用Flask
    • 資料庫：使用SQLite

    示例：Google Tasks，谷歌開發的任務管理應用程式，包含在Google Workspace中。


  • 天氣應用程式：構建一個天氣應用程式，顯示位置輸入的即時天氣資料。使用OpenWeatherMap或任何其他API收集即時天氣資料。
    • 前端：使用原生JavaScript。
    • 後端：使用Node.js，易於處理API請求。
    • 資料庫：不需要。

    示例：AccuWeather，谷歌天氣


  • 即時聊天應用程式：開發一個支援使用WebSocket進行即時訊息傳遞的聊天應用程式。新增使用者身份驗證和群聊功能等。
    • 前端：使用React.js，易於構建即時聊天UI。
    • 後端：使用Socket.IO，基於WebSocket的訊息傳遞。
    • 資料庫：使用MongoDB或Firebase，易於儲存聊天訊息。

    示例：WhatsApp，Telegram，Google Chat


  • 招聘網站：構建一個招聘入口網站，僱主可以在其中釋出職位空缺，使用者可以在其中搜索和申請職位。包含篩選和簡歷上傳功能，方便使用。
    • 前端：使用Vue.js
    • 後端：使用Django。
    • 資料庫：使用PostgreSQL。

    示例：Tutorialspoint招聘門戶


每日練習指南

  • 每天至少花2個小時學習當天的主題
  • 每天構建一些小東西
  • 記錄您的學習過程
  • 每天將程式碼提交到GitHub
  • 定期複習前幾天的概念

更新於：2024年11月21日

瀏覽量：12

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.