從你可能已經熟悉的前端基礎開始；然后進入關鍵技能，如使用瀏覽器開發工具和利用AI快速編碼。

包括99%的開發者忽視的寶貴通用技能。

注意這里的重點是實際行動而非僅僅是理論知識 — 因為這才是真正重要的。

如果遺漏了什么，請告訴我！??

1. HTML基礎：創建基本功能性網頁

關于網站核心架構的一切。

如何：

• 在編輯器中創建HTML頁面并在瀏覽器中打開
• 設置頁面標題和圖標
• 創建文本段落
• 創建標題
• 創建到其他頁面的鏈接
• 顯示圖片
• 顯示表格數據
• 顯示元素列表
• 用表單處理輸入
• 創建注釋和注釋掉代碼
• 用語義化HTML使你的頁面更有意義

有些人認為語義化HTML因為CSS而無用，但他們錯了。

對于可訪問性和向搜索引擎解釋你的頁面以在結果頁面上獲得高排名仍然至關重要。

例如：

<!-- 告訴搜索引擎 “AI singularity” 是一個時間 -->
<time datetime="2025-01-07">AI singularity</time> is coming sooner than you think!

沒有這個，你最終會像那些對所有東西都使用<div>的開發者一樣。

2. CSS基礎：為網頁添加樣式

這就是你如何從這個：

圖片

變成這個：

圖片

為骨架注入生命。

如何：

• 為頁面添加樣式
• 添加顏色：填充、漸變、透明度、前景vs背景色
• 自定義字體：字體系列、大小、樣式、粗細、網頁安全字體、Google Fonts
• 創建布局：邊距和內邊距、視覺堆疊、相對對齊
• 添加和自定義背景
• 用動畫和過渡添加華麗效果
• 為元素的特定狀態和部分添加樣式：偽選擇器和偽類
• 自定義形狀：輪廓和邊框、高度、寬度
• 重用樣式：CSS變量
• 讓你的頁面在所有屏幕尺寸上看起來都很棒：斷點、響應式圖片
• 用框架更快地添加樣式：Tailwind、Sass

3. JavaScript基礎

如何為你的網頁添加交互性并使事情發生：

基礎

如果你是編碼新手：

如何：

• 思考編程
• 向頁面添加JavaScript代碼
• 輸出打印：alert()、innerHTML、控制臺日志
• 管理數據 — 創建、使用、更新和打印變量：數據類型、作用域
• 創建注釋和注釋掉現有代碼
• 重用動作：創建和調用函數：語法、參數和參數、返回值、類型、作用域
• 創建對象來表示現實世界的實體：數據和變量、動作和方法、嵌套對象
• 選擇和操作頁面上的元素：getElementById、querySelector、使用方法和屬性等
• 處理輸入和事件：在網頁上等
• 操作文本字符串：多行、子字符串、大小寫、連接、插值、分割和連接、修剪和填充、搜索和替換、正則表達式
• 使用列表：初始化、添加、更新、刪除、迭代、轉換、搜索、過濾、排序、反轉
• 使用日期和時間：創建、更新、格式化和顯示
• 有條件地獲取數據或執行動作：if/else、switch、三元運算符、字典選擇
• 無限期有條件地執行動作：while、do while、for、break、continue
• 用TypeScript升級你的開發體驗：類型、泛型、接口、轉譯、配置等

為客戶端開發

你可能已經了解編碼基礎，但你能專門為瀏覽器編寫JS代碼嗎？

如何：

• 向服務器發送網絡請求：fetch() API、HTTP動詞、發送和獲取數據
• 處理UI狀態：空、加載中、錯誤、部分、理想
• 本地存儲數據：cookies、Local Storage、Session Storage等
• 組織和打包代碼：模塊和模塊打包器
• 處理表單輸入
• 如何使用NPM包更快地編碼

4. 使用開發工具提高生活質量

如何：

• 創建、檢查和過濾控制臺日志：信息、錯誤、警告
• 添加臨時腳本和動作
• 檢查、選擇和調試HTML元素
• 檢查和臨時修改樣式
• 監控網絡請求
• 在多種屏幕尺寸上測試你的頁面
• 安裝編輯器擴展以更快地開發
• 自定義編輯器主題、字體和設置以更享受開發
• 使用集成調試器
• 使用代碼片段更快地編碼：包括Emmet
• 使用鍵盤快捷鍵更快地開發
• 使用AI更快地開發

5. 提高網站性能

如何：

• 測量性能
• 提高感知性能
• 改善核心Web指標：LCP、CLS、INP
• 優化一般資源傳輸：緩存
• 優化圖片：壓縮、WebP
• 懶加載圖片和視頻
• 優化CSS
• 優化網頁字體：壓縮、交換等

6. JavaScript框架：更快地開發

無論是React、Angular還是Vue，它們都有相同的基本概念：

如何：

• 創建和重用組件
• 在組件中接受和顯示數據：數據綁定、條件渲染等
• 管理組件中的狀態
• 顯示和更新列表數據
• 處理來自組件的事件
• 處理副作用和外部數據變化及狀態變化
• 管理應用級狀態 — 獨立于組件
• 處理表單輸入
• 為組件添加樣式
• 處理SPA導航和前端路由

7. 版本控制：跟蹤變更

版本控制使得跟蹤整個代碼庫的變更和進行實驗變得容易。

如何：

• 創建本地倉庫來存儲代碼和資產
• 暫存和提交文件及變更：最佳實踐等
• 使用.gitignore忽略文件
• 檢出之前的提交
• 創建新分支：從最新或之前的提交
• 合并分支：解決合并沖突等

Git和GitHub

如何：

• 創建你自己的GitHub倉庫：README.md、許可證等
• 使用遠程倉庫：創建、推送、拉取、刪除
• 從GitHub克隆倉庫
• 復刻GitHub倉庫
• 向GitHub倉庫發起拉取請求

8. 在數據庫中管理數據

即使你專注于前端，了解這些也會完善你對數據處理和操作的理解。

如何：

• 為數據設計架構
• 實現架構：表、鍵、數據類型、外鍵、集合（NoSQL）
• 向數據庫添加數據
• 讀取數據：連接、過濾、排序、搜索、聚合
• 更新數據
• 刪除數據

9. 為服務器端開發

如何：

• 響應請求：URL、使用頭部和主體
• 管理日志：創建、檢查
• 創建RESTful API：HTTP動詞、狀態碼
• 從其他API獲取數據
• 向數據庫發送請求：創建、讀取、更新、刪除

10. 通用但關鍵的技能

如何：

• 按需快速學習
• 獨立于代碼解決問題
• 溝通：與設計師、客戶和其他開發者
• 調試和修復問題
• 按需搜索信息：并處理以滿足你的需求

最后的想法

一旦你學會了所有這些，你就能以極快的速度和高生活質量從頭到尾構建99%的網絡應用和網站。