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

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

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

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

1. HTML基礎：創(chuàng)建基本功能性網(wǎng)頁

關于網(wǎng)站核心架構的一切。

如何：

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

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

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

例如：

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

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

2. CSS基礎：為網(wǎng)頁添加樣式

這就是你如何從這個：

圖片

變成這個：

圖片

為骨架注入生命。

如何：

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

3. JavaScript基礎

如何為你的網(wǎng)頁添加交互性并使事情發(fā)生：

基礎

如果你是編碼新手：

如何：

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

為客戶端開發(fā)

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

如何：

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

4. 使用開發(fā)工具提高生活質量

如何：

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

5. 提高網(wǎng)站性能

如何：

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

6. JavaScript框架：更快地開發(fā)

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

如何：

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

7. 版本控制：跟蹤變更

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

如何：

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

Git和GitHub

如何：

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

8. 在數(shù)據(jù)庫中管理數(shù)據(jù)

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

如何：

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

9. 為服務器端開發(fā)

如何：

• 響應請求：URL、使用頭部和主體
• 管理日志：創(chuàng)建、檢查
• 創(chuàng)建RESTful API：HTTP動詞、狀態(tài)碼
• 從其他API獲取數(shù)據(jù)
• 向數(shù)據(jù)庫發(fā)送請求：創(chuàng)建、讀取、更新、刪除

10. 通用但關鍵的技能

如何：

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

最后的想法

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