网站由什么组成
“Vibe coding”课程第 3 课，共 26 课。免费，有动画和小测验。
前端：你看到的部分
前端就是加载到浏览器里的一切，也就是你看到、点到的东西。它由三种语言组成。HTML：结构，也就是标题、按钮、图片。CSS：外观，也就是颜色、字体、排版。JavaScript（JS）：行为，也就是点按钮后会发生什么。简单说：HTML 是骨架，CSS 是衣服，JS 是动作。
后端：检查和密钥
后端，也叫服务器：这段代码不在你的浏览器里运行，而是在云端的电脑上，也就是数据中心（放满服务器的大楼）里。访客看不到这段代码。所以重要的事都在这里做：登录时核对密码、计算订单总额、用秘密密钥调用付费服务。前端提出请求，后端检查并回复。
数据库：项目的记忆
数据库就是存数据的地方，像一张超大的表格。用户、订单、游戏最高分、你在打卡工具里的连续天数。关掉标签页，前端就全忘了，但数据库会记住。通常由后端和它打交道：后端决定谁能读、谁能改什么。图里右边的圆柱体就是数据库，这是画数据库的传统方式。
托管、域名和 DNS
托管（hosting）是一台全天候把你的网站发给每个访问者的电脑。域名是像 mysite.com 这样给人看的名字，这样谁都不用记服务器的数字地址。把两者连起来的是 DNS，互联网的电话簿：浏览器问“mysite.com 住在哪？”，然后拿到托管服务器的地址。自己的域名要向注册商购买并续费，通常一年一次。
网站还是应用
静态网站只有前端：每个人看到的页面都一样。落地页、作品集、计算器：都不需要服务器和数据库。应用则是前端加后端加数据库。举例：习惯打卡工具。“已完成”按钮和统计页面：前端。用密码登录：后端。保存下来的连续打卡天数：数据库。静态网站做起来和托管起来都更简单。
为什么要知道这些
知道了这些部分，就清楚该用什么服务、该让 AI 做什么。代码存在 GitHub 上。Cloudflare、Vercel 这类托管服务负责发布网站。Supabase 这类服务提供数据库。后面几级会细讲。很多服务有免费套餐，具体限制看官网。还要一开始就告诉 AI：“这是静态网站”或“需要登录和数据库”。
自测一下
- 用户的密码应该在哪里核对？
正确答案: 在后端，也就是服务器上. 前端代码任何访客都能看到。检查和秘密都应放在没人看得到的服务器上。 - DNS 是做什么的？
正确答案: 根据域名找到托管服务器的地址. DNS 就像电话簿：浏览器凭 mysite.com 这个名字，查到网站放在哪台电脑上。 - 一个三页的作品集，需要什么？
正确答案: 只要前端和托管. 每个人看到的都一样，也不保存任何数据：这是静态网站。这里不需要服务器和数据库。