零基础入门
域名?服务器?API?用大白话讲清楚。从零开始,不看术语也能懂。
内容概览
看懂网站是怎么运作的
前端、后端、数据库——用比喻讲清楚
一张图看懂,你打开网页的0.3秒发生了什么
从输入网址到页面显示,0.3秒里电脑偷偷干了什么?用第一性原理加大白话讲清楚,零基础也能看懂。
前端是门面,后端是仓库,3个比喻讲清楚
用餐厅、银行、微信三个生活比喻,从第一性原理拆解前端和后端的本质,零基础也能秒懂它们各自负责什么,怎么配合工作。
域名、服务器、代码,三兄弟分别干吗的
从第一性原理搞懂做网站必备的三样东西,代码、服务器、域名,它们各自干什么、怎么协作、要花多少钱。
什么是部署?就是把电脑里的文件搬到云上
从第一性原理搞懂部署的本质——为什么你电脑上的网页别人看不到,代码怎么从本地搬到全世界都能访问的地方,以及现在部署到底有多简单。
为什么你的网页别人访问不了?本地 vs 公网
从第一性原理搞懂为什么你电脑上的网页别人打不开,本地地址和公网地址到底有什么本质区别,以及怎么让全世界都能访问你的网站。
HTTPS 是什么?为什么你的网站需要那把小锁
用明信片和保险箱的比喻,解释 HTTPS 为什么是网站必选项——不只是安全,还关系到能不能被发现。
AI 编程工具选型指南
ChatGPT、Cursor、Windsurf…哪个适合你?
我到底该用 ChatGPT 还是 Cursor?5个问题帮你决策
ChatGPT 和 Cursor 到底选哪个?5 个问题帮你一步步决策,不再纠结。附两套工具组合推荐。
2026年 AI 编程工具全景图,从第一性原理看懂25款工具
从第一性原理拆解2026年25款主流AI编程工具,按IDE、插件、终端Agent、零代码四大类梳理,附选型建议与决策图。
零代码派 vs 写代码派,两类人该用不同的 AI
零代码派和写代码派用的是完全不同的 AI 工具。搞清楚自己属于哪一派,别选错方向白费力气。
Cursor 从下载到写出第一个网页(全程截图)
从下载安装 Cursor 到用 AI 生成你的第一个网页,每一步都有截图,照着做就行。
Bolt.new,不装任何软件,浏览器里让 AI 做网站
不装软件、不配环境、不碰代码,5 分钟在浏览器里让 AI 帮你做出一个能访问的网站。
Lovable / v0 / Tempo 横向对比:哪个最适合做 UI?
三款最火的 AI UI 工具横评,从第一性原理拆解 Lovable、v0、Tempo 各自的本质、擅长领域和组合方案。
AI 工具组合推荐:免费方案 / 最强方案 / 最高性价比方案
三套 AI 编程工具组合方案:零成本免费版、最强付费版、最高性价比版。按预算和需求对号入座。
当你的工具突然收费了——迁移指南与替代品
AI 编程工具突然收费了怎么办?从第一性原理搞懂工具为什么收费,再到一份完整的迁移指南和替代品对照表。
工具选错了的5个信号:什么时候该换工具
用了半天还是不顺手?五个信号帮你判断该不该换 AI 编程工具,以及换了之后怎么不踩坑。
术语翻译官
API、Git、JSON…用大白话翻译程序员行话
API 是什么?就是餐厅里的服务员
用餐厅服务员比喻讲透 API,从点单到上菜,零基础也能搞懂互联网最重要的概念之一。
Git/GitHub 是什么?就是 Word 的「修订模式」
用 Word 修订模式比喻讲透 Git 和 GitHub,从版本管理到团队协作,零基础也能搞懂程序员为什么离不开它们。
前端框架是什么?React/Vue/Svelte 人话版
从第一性原理讲透前端框架的本质,用装修房子的比喻搞懂组件化和数据驱动,React/Vue/Svelte 三大框架一张图对比清楚。
NPM 是什么?就是手机应用商店(但给代码用的)
用手机应用商店比喻讲透 NPM 是什么、package.json 有什么用,以及为什么每个 AI 编程项目都离不开它。
数据库是什么?比你想象的简单
用文件柜比喻讲透数据库是什么、表和行的关系,以及增删改查四种基本操作,零基础也能搞懂。
什么是响应式设计?就是网页能自动适配手机
用日常比喻讲透响应式设计是什么、断点怎么工作的,以及为什么 AI 生成的网页能自动适配手机和电脑。
CDN 是什么?为什么你的网站需要它
从数据传输的物理限制出发,讲透 CDN 是什么、它是怎么加速网站的、以及为什么你部署网站时几乎一定会用到它。
DNS 是什么?互联网的电话本
用电话本比喻讲透 DNS 是什么、域名和 IP 地址的关系、DNS 查询的完整过程,以及你部署网站时 DNS 到底做了什么。
Markdown 是什么?比 Word 简单 100 倍的写作方式
从第一性原理讲透 Markdown 是什么,为什么几个符号就能替代 Word 的全部排版功能,以及为什么 AI 和程序员都离不开它。
环境变量 / .env / API Key——这些「钥匙」到底是什么
用钥匙的比喻讲透 API Key、环境变量和 .env 文件是什么,以及为什么你的密钥绝对不能写死在代码里。
开源 / MIT / GPL:代码的「使用许可证」人话版
从第一性原理讲透开源许可证是什么,MIT、GPL、Apache 三者有什么区别,以及你用 AI 编程时怎么判断别人的代码能不能拿来用。
什么是 SSR / SSG / CSR?三种渲染方式一句话说清楚
从第一性原理讲透 SSR、SSG、CSR 三种网页渲染方式的本质,以及你用 AI 做网站时该选哪种。
Docker / 容器是什么?搬家公司的打包箱
用搬家公司的比喻讲透 Docker 和容器到底是什么,镜像、容器、仓库三个概念一次搞清楚,以及 AI 编程中什么时候会用到 Docker。
CI/CD 是什么?代码自动上线的流水线
从第一性原理讲透 CI/CD 是什么,CI 和 CD 各自解决什么问题,以及你用 AI 编程时怎么实现推送代码就自动上线。
Webhook 是什么?就是发生了一件事,通知你一声
用快递通知的比喻讲透 Webhook 是什么,它和轮询的区别,以及你用 AI 编程时在哪里会碰到 Webhook。
环境搭建手把手
安装 Node.js、VS Code,跑通第一个程序
安装 Node.js——复制粘贴就行(Mac / Win 双版)
用最简单的方式在 Mac 和 Windows 上安装 Node.js,包含 nvm 版本管理器配置,复制粘贴命令就行。
VS Code 安装 + 必装插件 + 中文设置一步到位
从第一性原理讲清楚代码编辑器到底是什么、为什么不能用法记事本,到下载安装、中文界面配置、8 款必装插件推荐,一篇搞定 VS Code 开发环境搭建,Mac 和 Windows 双平台适用。
终端 / 命令行是什么?打开它的勇气在哪里
用最直白的方式讲清楚终端是什么、为什么用 AI 编程必须学会它,以及 5 条命令让你克服对黑色窗口的恐惧。
Git 安装 + 第一次提交——5条命令记住就行
从第一性原理讲清 Git 是什么、三个区域怎么工作,用 5 条命令完成从安装到第一次提交的全过程,Mac 和 Windows 双平台适用。
GitHub 注册 + 创建第一个仓库
从注册 GitHub 账号到创建第一个远程仓库,再把本地代码推上去,全程步骤详解,Mac 和 Windows 通用。
环境搭好了,怎么验证?跑通你的第一个 Hello World
把前面装好的 Node.js、VS Code、终端、Git 串起来,跑通一个完整的 Hello World 项目,验证开发环境没问题。
常见环境报错 Top10 及解决方案
环境搭建过程中最常见的 10 个报错,每个附带原因解释和解决方案。遇到问题翻这篇查就行。