Learn Frontend Web Development

學習前端 Web 開發，體驗 Web 開發人員的實際工作方式：從第一課開始，HTML、CSS 和 JavaScript 就在同一頁上協同工作。修改一行 JavaScript 程式碼，即可在手機上即時查看頁面更新，HTML、CSS 和 JS 面板並排顯示，下方還有即時預覽。

這是一門完整的初學者的前端課程，從基礎開始，逐步深入：從第一個標籤到 TypeScript、React、Vue、測試、效能最佳化和前端架構。

內容亮點

• 41門課程和163個短課，涵蓋從入門級 (A1) 到高級 (C2) 的各個級別

• 帶有HTML、CSS和JavaScript面板的即時程式碼編輯器，並提供即時預覽

• 基於HTML、React、Vue、Angular、Node或TypeScript範本的新項目

• 20個循序漸進的指導項目：食譜頁面、聯絡表單、卡片網格、導覽列、資料表等等

• 15個基於真實前端bug的調試任務：375px解析度下佈局錯亂、導致LCP崩潰的圖片、無法通過Tab鍵切換的表單、組件內存洩漏、本地測試通過但CI測試失敗的測試

• 最終考試和結業證書

• 該應用程式支援22種語言

一條路徑，從入門到精通

• Web工作原理、HTML基礎、表單和語意化標記

• CSS基礎、變數、轉場與動畫、使用Flexbox和Grid佈局

• 響應式設計適用於各種螢幕尺寸

• JavaScript 基礎：陣列與物件、ES6+、DOM 和瀏覽器 API、非同步編程

• 開發者工具、Git 和團隊工作流程、模組和建置工具

• TypeScript：從第一個類型到進階模式

• React 基礎：useEffect 與資料擷取、進階 Hook 和模式

• Vue 3 基礎：組合式 API 與進階 Vue 模式

• 狀態管理、REST API 整合、WebSocket 和即時 UI

• 使用 Next.js 和 Nuxt 3 進行伺服器端渲染、漸進式 Web 應用 (PWA)

• 可訪問性、測試、效能和安全性

• CSS 架構、設計系統、CI/CD 與現代工具

鞏固學習成果

• 測驗和複習課程，幫助您鞏固所學知識

• 包含 83 個語法和模式條目的速查表

• 50 道帶答案的面試題，對前端開發人員或 Web 開發人員面試大有幫助

• 包含可開啟和編輯的簡短範例程式碼庫

• 儲存您自己的程式碼、筆記和喜歡的課程

程式設計挑戰：邀請好友提交程式碼，或與隨機對手對戰

• 世界程式設計挑戰賽：每日三輪全球挑戰，使用 JavaScript、Python 及其他語言進行解答

• 連勝、經驗值、排行榜與每日提醒

AI 導師

• 遇到 bug 或概念上的難題？向 AI 導師諮詢錯誤、課程或您自己的代碼

• AI 遊樂場：描述頁面內容，觀看程式碼自動生成

• 免費用戶每日可回答 3 個 AI 問題；專業版讓您享受無限可能

適用人群

• 想要成為 Web 開發人員的零基礎學員

• 希望在 Web 開發課程之外進行額外練習的學生

• 希望將設計付諸實踐的設計師

• 掌握一些 HTML 和 CSS，並希望進一步學習 JavaScript、TypeScript 和框架的開發人員

• 準備從事前端工作的職業轉型者

使用方法

1. 從免費的第一門課程開始：前端開發入門

2. 開啟程式碼編輯器，更改一個窗格，即可看到預覽效果

3. 逐步學習：JavaScript、響應式佈局、TypeScript，然後是 React 和 Vue

4. 建立引導式項目，並在偵錯任務中修復實際錯誤

5. 通過最終考試，獲得證書

免費版和專業版

第一門課程、第一個引導式專案、兩個調試任務和程式碼編輯器均為免費，每天提供 3 道 AI 導師問答題。免費版會顯示廣告。專業版解鎖所有課程、所有項目和任務、證書考試和無限的 AI 問答題，並移除廣告。

立即開始，幾分鐘內即可建立您的第一個頁面。