🚀 90 分钟，从 0 到 1 写出你的第一个网页作品

HTML + CSS + JavaScript + Trae（AI 编码工具） · 零基础可学 · 课后带走完整作品

🚀 返回首页 🗺️ 完整学习路径 📘 全部基础课

90 分钟
从 1 行代码到一张完整网页名片

真 · 零基础设计：不用装任何软件，每一步都有一个独立的小实验室 —— 读完讲解就能直接在里面改代码、点运行、看效果。
每完成一步解锁一枚徽章 🏆，下课时你会带走一张带头像、介绍、会响应的点赞按钮的个人名片页 和 满满 8 枚成就徽章。

90min
一次课时长
8步
每步一个独立实验室
8枚
成就徽章可解锁
0
软件 · 编程基础

⚙️ 上课前 5 分钟准备

💻
一台电脑
Windows / Mac 均可，不需要高配置，能打开浏览器就行。
🌐
Chrome 浏览器
前 60 分钟完全不用装任何编辑器。每个步骤自带独立小实验室，直接在浏览器里改代码、点运行，所见即所得。
🤖
Trae 编辑器 · 必修
课前务必装好！到 trae.cn 下载对应系统版本 → 安装 → 打开登录。最后 30 分钟我们用它 AI 一键生成简历网页，装好才跟得上。

🧐 先别急着学！花 2 分钟搞懂：我们到底在做什么？

如果你是完完全全的零基础（甚至没用过"文件夹"以外的电脑操作），先别慌。我用一句大白话告诉你今天这 90 分钟到底在干嘛：

👉 "写网页"说白了就是：在自己电脑上新建一个文件（名字后缀是 .html）→ 在里面写一些规定格式的字（这就是"代码"）→ 用浏览器双击打开它，你就看到了一个网页。
就这三步，没有任何魔法。

📁
第 1 步 · 建文件夹
在桌面上右键 → 新建文件夹，起名叫 my-web。以后所有作业都放这里。
📄
第 2 步 · 建 .html 文件
进入文件夹，右键 → 新建文本文档 → 把名字整个改成 index.html（连后缀 .txt 也要删掉）。
✍️
第 3 步 · 写代码
右键这个文件 → 打开方式 → 选记事本（Mac 用"文本编辑"）。把我们下面教的代码原样抄进去，Ctrl+S 保存。
🌐
第 4 步 · 浏览器打开
回到文件夹，双击 index.html —— 它会自动用 Chrome 打开，你的第一个网页就出现了！🎉
🤔 那下面每一关里的"小实验室"又是啥？
为了让你不用来回切换记事本和浏览器、也不用担心"文件保存错了打不开"，我们在网页里内置了一个迷你版的记事本 + 浏览器（就是每关里左边写代码、右边看效果的那个框）。
你可以把它理解为"练习本"：左边改代码 → 点 ▶ 运行 → 右边立刻看到效果，和真的在电脑上建文件、双击打开，是完全一样的。先在练习本里练熟，最后一步我们会教你把代码搬到自己电脑上的 index.html 文件里，做出真正"能发给朋友看"的作品。
💡 一句话总结：网页 = 一个 .html 文件，代码 = 文件里按规矩写的字，浏览器 = 把这些字变成画面的"翻译官"。就这么简单，现在可以放心往下学了 👇

🧭 90 分钟课程流程 · 边学边闯关

每一步都是一个独立小实验室 —— 读讲解 → 完成右上角的小挑战 → 点运行 → 解锁徽章 → 进入下一关。

🏆 成就徽章 0 / 8 已解锁

① 一个网页 = HTML + CSS + JavaScript 三兄弟

别急，我们先聊聊：你每天刷的抖音、淘宝、B 站……这些五颜六色、能点能滑的页面，到底是怎么做出来的？

答案非常简单 —— 不管页面多花哨，背后永远只有三样东西在干活。我们给它们起了个外号，叫「三兄弟」。我打个比方你秒懂：

🦴 HTML · 大哥（骨架）好比盖房子先搭好钢筋水泥。他负责告诉浏览器：这里放一个标题、那里放一张图、下面放一个按钮……只管「有什么」，不管好不好看。
🎨 CSS · 二哥（化妆师）房子盖好后，总不能光秃秃吧？二哥负责刷墙、贴地板、装灯 —— 颜色、大小、位置、圆不圆、有没有阴影，全是他的事。没有他，网页就像一张只有黑字的 Word 文档。
⚡ JS · 三弟（遥控器）前面两位做的房子是死的 —— 漂亮但按了没反应。三弟让它活过来：你一点按钮，数字 +1；你一滑屏幕，图片切换。所有「能动的地方」都是他在背后指挥。

今天这 90 分钟，我们就按 大哥 → 二哥 → 三弟 的顺序，一步一步做出一张属于你自己的名片网页。放轻松，每一步都只改一两行 —— 真的，你能做到。

💡 那么「写代码」到底是啥？说白了就一句话：把文件里的某些字换成别的字，再让浏览器重新看一眼。就这么简单。下面这个小实验只做一件事 —— 把页面里的「小明」改成你自己的名字，然后点▶运行。你就会发现：诶？我竟然改动了一个网页！
🚀 ① 认识三兄弟 · 改第一行代码（4 min）
🔒 未解锁
🎯 小挑战：把 <h1> 里的"小明"改成你自己的名字，然后点下方 ▶ 运行。
📝 code.html（可直接编辑）
🖥️ 实时预览
改完点"▶ 运行"即可解锁徽章

② HTML 最核心的一个概念：「标签」

刚才你改了第一行代码，是不是看到一个尖括号 <h1>？它有个专门的名字，叫「标签」(Tag)。整个 HTML 世界，翻来覆去就这一个概念，搞懂它你就赢了一半。

打个比方：你去超市买苹果，店员会给你一个塑料袋，上面写着「苹果 · 3 斤」。标签也一样 —— 它就是一个包装袋，告诉浏览器「里面装的是啥东西」。长这样：

<h1> 你好，我是小明 </h1> ↑ ↑ ↑ 开始标签 里面的内容 结束标签（比开始多一个 / 斜杠）

看见没？包装袋永远是两片 —— 前面一片、后面一片，中间夹着真正的内容。结束标签多一个斜杠 /，这是它们俩唯一的区别，千万别忘！

不同的「袋子」有不同的意思。浏览器会根据袋子的名字，自动把里面的字显示成对应的样子：

  • <h1>…</h1> —— 大标题袋子。字会又大又粗。(h 就是 heading 的缩写，后面还有 h2~h6，数字越大字越小)
  • <p>…</p> —— 普通段落袋子（p 是 paragraph 段落 的缩写）。装的就是一段正常文字。
  • <!-- 这是注释 --> —— 写给自己看的小纸条。浏览器会假装看不见，不会显示在页面上。代码多了之后，用它标记「这里是干嘛的」特别有用。
⚠️ 一个新手 90% 都会犯的错：开标签和闭标签一定要成对！成对！成对！写了 <p> 就一定要有 </p>，不然浏览器会懵圈，整个页面都乱掉。

🎯 这一步要做：在已有的 <h1> 下面，照葫芦画瓢再写一对 <p>…</p>，里面装一句介绍你自己的话，比如「我是一个正在学编程的初学者 🚀」。写完点运行 —— 你会看到页面多出一行字。就这么简单！
📝 ② HTML · 第 1 步：让网页有内容（5 min）
🔒 未解锁
🎯 小挑战：在 <h1> 下面加一行 <p>一个正在学编程的初学者 🚀</p>，再运行。
📝 code.html
🖥️ 实时预览
预览里应出现加粗标题 + 灰色段落

③ 给标签加「说明书」：属性、自闭合、嵌套

你肯定会问：图片怎么放？按钮怎么加？要学的其实就 3 个新词，我一个个讲，听完你就会了。

📌 新词 1：属性 (attribute) —— 标签的「补充说明」

光一个 <img> 标签浏览器不知道放哪张图啊！所以我们要在开始标签里，悄悄塞一点补充信息，告诉它「图在哪、出问题时显示啥」。这些补充信息就叫属性。格式永远是这一个套路：

<img src="图片的网址" alt="图片的文字描述"> └─ 属性名 ─┘ └─── 值 ───┘ （属性名 = "值"，中间一个等号，值用引号包住）

你看 src（source 来源）告诉浏览器去哪取图；alt（alternative 替代）是图加载失败时显示的文字，对盲人读屏软件也很友好。一个标签可以有很多个属性，用空格隔开就行。

📌 新词 2：自闭合标签 —— 一片就够的包装袋

还记得上一步我说「标签要成对」吗？其实有少数几个特殊标签，它本身就没啥内容可装（比如一张图、一个换行符），所以它自己就结束了，不需要后面那片。直接写 <img ...> 就完事，不用写 </img>。常见的就这几个：<img>（图片）、<br>（换行）、<input>（输入框）。记住就行，不用死背。

📌 新词 3：嵌套 —— 袋子里还能装袋子

想象你妈妈收纳东西：大箱子里装小盒子，小盒子里装袜子。HTML 也一样，一个标签里可以装好几个别的标签，这就叫「嵌套」。

我们马上会用到一个「万能大箱子」标签：<div>。它本身没样式，就像一个透明的收纳盒，把头像、标题、按钮全都装进同一个 <div>，下一步 CSS 才能一次性给整个「名片」上妆。

📌 顺便认识两个特别重要的属性：class 和 id

  • class="card" —— 相当于给这个元素贴个标签纸，写着「我是一张卡片」。CSS 里可以说「凡是写着 card 的，都给我变成圆角白底」。同一个 class 可以贴在好多元素上。
  • id="likeBtn" —— 相当于身份证号，整个页面只能有一个。一会儿 JS 就是靠这个身份证号，一把抓到这个按钮，让它能被点击。
🎯 这一步要做：在大 <div class="card"> 箱子里，加两样东西：
① 一张图片 <img src="https://i.pravatar.cc/120" alt="头像">（记住它是自闭合的，不用写 </img>）
② 一个带身份证的按钮 <button id="likeBtn">❤️ 点个赞 <span id="count">0</span></button>
预览里会出现一个丑丑的头像和按钮 —— 别担心，丑是正常的！下一步让二哥（CSS）来化妆。
🖼️ ③ HTML · 第 2 步：加头像和点赞按钮（7 min）
🔒 未解锁
🎯 小挑战：加一张 <img src="https://i.pravatar.cc/120"> 和一个 <button id="likeBtn">。丑没关系，下一步 CSS 来化妆。
📝 code.html
🖥️ 实时预览
应看到：头像 + 标题 + 段落 + 按钮
☕ 短暂休息 2 分钟 · 下一段开始"上妆"（CSS）

④ 二哥 CSS 登场：怎么「点名」给元素化妆？

上一步做出来的页面是不是又小又丑、紧贴左上角？别嫌弃它，是我们故意的 —— 现在让二哥来帮它大变身。

先看一下 CSS 长什么样（其实就这一个公式，一辈子都在重复写它）：

选择器 { 属性1 : 值1 ; 属性2 : 值2 ; } 翻译成人话： 「给 XXX 涂上 红色 ；涂上 20 号字 ；……」

看懂它就靠记住两件事：

  • 大括号前面 —— 叫选择器，意思是「给谁加样式」。就像老师点名「张三，起立！」
  • 大括号里面 —— 叫声明，意思是「加什么样式」。每一条都是 属性: 值;，别漏了分号！

📌 怎么「点名」？三种点名方式，对应 HTML 里三种写法：

  • body { … } —— 按标签名点。写 body 就等于点了页面里所有的 <body>。简单粗暴。
  • .card { … } —— 按 class 点，前面加一个小点 .。对应 HTML 里 class="card"。记忆口诀：点 class、井 id。
  • #likeBtn { … } —— 按 id 点，前面加一个井号 #。对应 HTML 里 id="likeBtn"。id 是身份证，只能点到那一个。

📌 今天必学的一个神技：Flex 居中三件套

把内容放到页面正中间，是新手最常遇到的需求。以前要用各种歪招，现在 CSS 有个神器叫 Flex 弹性布局，3 行代码搞定：

display : flex ; /* ① 告诉这个盒子「我要用弹性布局」 */ align-items : center ; /* ② 里面的东西 → 上下居中 */ justify-content : center ; /* ③ 里面的东西 → 左右居中 */

这三行是「亲子组合」—— 写在父元素身上（比如 body），效果是把它里面的孩子（比如 .card）摆到正中央。记住这三行，以后任何居中都这么写，你就是前端高手。

📌 再认识两个新东西：

  • 100vh —— viewport height 的意思，就是「整个浏览器屏幕有多高」。写 min-height: 100vh 意思是「页面至少要有一整屏那么高」，这样背景才能铺满。
  • linear-gradient(135deg, #667eea, #764ba2) —— 线性渐变色。简单理解：从第一个颜色斜着渐变到第二个颜色，像夕阳一样好看。135deg 是角度（135°≈从左上到右下）。
🎯 这一步要做：在 <style> 里给 body 加 4 行：display:flex、align-items:center、justify-content:center、min-height:100vh，再配一个紫色渐变背景。点运行 —— 你会看到紫色海洋铺满屏幕，名片乖乖跑到正中央。这一刻真的挺爽的，试试看！
🎨 ④ CSS · 第 1 步：紫色渐变 + 页面居中（6 min）
🔒 未解锁
🎯 小挑战：给 body 加 display:flex + align-items:center + justify-content:center + 渐变背景。4 行代码搞定"居中大法"。
📝 code.html
🖥️ 实时预览
背景变紫 + 内容跑到正中央

⑤ CSS 世界的底层真相：一切都是「盒子」

现在告诉你一个前端界最重要的秘密：在浏览器眼里，每一个元素都是一个盒子。不管是一个字、一张图、一个按钮，通通都是矩形盒子。看懂这个，你就看穿了整个 CSS。

想象你收到一个网购的快递盒，从里到外有 4 层：

① content 内容盒子最里面真正的东西——一本书、一件衣服。在网页里就是文字或图片本身。
② padding 内边距东西和盒子壁之间塞的气泡纸。让内容不会紧贴边框，看着「不挤」。数字越大，内容离边框越远。
③ border 边框 + margin 外边距border 是盒子的硬壳；margin 是盒子和别的盒子之间的距离，像两个快递摆在桌上不能贴太紧。

📌 把一张卡片「变漂亮」，只需要这 4 个属性：

  • background: #fff —— 背景色。#fff 是白色的一种简写方式，叫「十六进制颜色」。你现在不用搞懂原理，只要记住：#fff=白、#000=黑、#f00=红。
  • padding: 32px 40px —— 内边距。写两个值时，第一个管上下，第二个管左右。所以这行意思是「上下留 32 像素气泡纸、左右留 40 像素」。
  • border-radius: 18px —— 圆角。数字越大越圆；写 50% 会变成完美的圆形！—— 头像变圆就靠它，一行秒变艺术照。
  • box-shadow: 0 20px 60px rgba(0,0,0,.25) —— 投影。四个值从左到右意思是「水平偏移 · 垂直偏移 · 模糊程度 · 阴影颜色」。加了它，卡片就像漂浮在页面上，立马有了质感。
💡 顺便讲一下颜色的第二种写法 rgba(0,0,0,.25)：
前三个数是红、绿、蓝的亮度（0~255），(0,0,0) 就是纯黑。关键是第四个数 .25 —— 透明度，范围是 0~1：
• 0 = 完全透明（看不见）
• 1 = 完全不透明（实心）
• .25 = 只有 25% 可见（很淡的一层黑），做阴影正好！

🎯 这一步要做：① 给 .card 加上面 4 个属性（白底、圆角、内边距、阴影）；② 给 .card img 加 width:96px; height:96px; border-radius:50%;。点运行 —— 头像「咔」一下变圆，卡片也浮了起来。就是这一刻，你第一次感受到「化妆」的威力。
💳 ⑤ CSS · 第 2 步：白色卡片 + 圆形头像（8 min）
🔒 未解锁
🎯 小挑战：给 .card 加背景/圆角/阴影；给 .card img 加 border-radius:50%。看头像"咔"一下变圆。
📝 code.html
🖥️ 实时预览
紫色背景上出现白色圆角名片

⑥ 让按钮「活」起来：鼠标一碰就变大

卡片已经挺好看了，但按钮还是方方的一块 —— 你把鼠标移上去，它毫无反应，像个没感情的工具人。这一步我们让它会对你的鼠标做出反应：鼠标碰到就轻轻放大一下。需要学 3 个新词：

📌 新词 1：:hover —— 「当鼠标悬停时」

「伪类」这名字很吓人，其实意思超简单：就是在选择器后面加一个「:什么什么」，表示某种特殊状态下才生效。最常用的就是 :hover（英文原意：悬停）。

#likeBtn { 颜色：粉色 } /* 平时长这样 */ #likeBtn:hover { 颜色：红色 } /* 鼠标碰上去的一瞬间变成这样 */

浏览器会自己切换，鼠标一离开又变回原样。超智能，超简单。

📌 新词 2：transform —— 变形金刚属性

想让元素放大、缩小、旋转、移动？不用改宽高、不用改位置，用一个 transform 属性就够了。常见三兄弟：

  • transform: scale(1.08) —— 放大到原来 1.08 倍（scale=缩放；小于 1 就缩小）。
  • transform: rotate(5deg) —— 旋转 5 度（正数顺时针，负数逆时针）。
  • transform: translateY(-3px) —— 向上飘 3 像素（Y 是垂直方向，负数=向上）。

它最大的优点是：不会挤到周围的其他元素，只是视觉上变形，旁边东西不动。

📌 新词 3：transition —— 让变化「丝滑」起来

如果只写上面两行，鼠标一碰按钮会「啪」地瞬间变大，像抽筋一样生硬。加一个 transition，就能让它用一小段时间慢慢变，这就是所谓「丝滑动画」。

transition : transform .2s ; └──要过渡的属性─┘ └─用多久─┘ 意思：这个元素的 transform 属性发生变化时，花 0.2 秒慢慢过渡。

⚠️ 超关键的细节：transition 要写在平常状态里（比如 #likeBtn），不是写在 :hover 里。因为它说的是「这个元素自带丝滑动画属性」，而不是「悬停时才丝滑」。

#likeBtn { transition : transform .2s ; } /* ← 丝滑属性写这里 */ #likeBtn:hover { transform : scale(1.08) ; } /* ← 目标值写这里 */
🎯 这一步要做：给 #likeBtn 加粉色渐变背景、圆角、cursor:pointer（让鼠标变成小手）和 transition:transform .2s；再写一个 #likeBtn:hover { transform:scale(1.08); }。运行后把鼠标移上去 ——按钮丝滑地长大一点，离开又缩回去。这就是真·网页的手感！
✨ ⑥ CSS · 第 3 步：粉色按钮 + 悬停放大（6 min）
🔒 未解锁
🎯 小挑战：给 #likeBtn 加渐变背景 + transition:transform .2s，再写 #likeBtn:hover{transform:scale(1.08)}。
📝 code.html
🖥️ 实时预览
鼠标移到按钮上会丝滑放大
☕ 休息 2 分钟 · 下一段让网页"活起来"（JavaScript）

⑦ 三弟 JavaScript 登场：让页面「能响应你」

试试点一下刚才那个粉色按钮 —— 除了视觉放大，啥也没发生。数字永远是 0。为啥？因为大哥 HTML 只管长啥样、二哥 CSS 只管美不美，「点了之后做什么」，必须三弟 JS 出马。

JS 听起来很玄，但 99% 的交互都是同一个套路三步走，我管它叫「JS 三板斧」。学会这三步，你能写出市面上一大半小功能。

🪓 第一板斧：找元素

想让按钮能被点击，首先得告诉 JS：「我说的是哪个按钮」。怎么找？就靠我们之前给按钮贴的身份证 id：

document.getElementById('likeBtn') ↑ ↑ ↑ 整个页面 去找一个按 id 叫……的元素 （document 就是「这个网页」的意思，所有操作的入口）

这行代码返回的就是那个按钮元素本身。后面我们想对它做啥都能做。

🪓 第二板斧：存变量

变量就是一个带名字的小盒子，用来装数据。比如我们要记「当前点了多少次」，就需要一个盒子装这个数字。JS 声明变量有两个关键词：

  • let count = 0 —— 可以改变的盒子（let 就是「让」的意思）。里面的数字之后能 +1、+2……
  • const btn = ... —— 装进去就不能换的盒子（const=constant 常量）。按钮元素找到后就不会换了，所以用 const。

🌟 小规则：能用 const 就用 const，改不了的值更安全；只有真的会变的（比如计数器）才用 let。

🪓 第三板斧：监听事件

这一步最关键。你要告诉浏览器：「喂，如果有人点了这个按钮，你就执行我下面这段代码。」 这个「如果……就……」叫事件监听：

btn.addEventListener( 'click' , () => { ↑ ↑ 监听什么事件 事件发生后要干的活（写在这里） } ); 这句话翻译成人话：「按钮啊，请添加一个事件监听器：事件类型是点击，发生时就跑我给的这段代码。」

里面那个 () => { ... } 有个霸气的名字叫箭头函数。别被名字吓到，它就是一小段「回头再执行」的代码—— 像你给朋友留了张纸条「等我到家记得给我打电话」，浏览器就是那个朋友，纸条里的内容要等到点击事件发生时才会执行。

📌 最后一个小工具：元素.textContent

想改元素里显示的文字？直接赋值就行：countEl.textContent = 5 —— 页面上那个 0 立刻变成 5。简单粗暴。

🎯 这一步要做（总共就 5 行 JS）：
① const btn = document.getElementById('likeBtn'); // 找到按钮
② const countEl = document.getElementById('count'); // 找到显示数字的 span
③ let count = 0; // 准备计数盒子
④~⑤ 加事件监听：点击时 count++，再 countEl.textContent = count

点运行，然后到右侧预览里真的去点那个按钮！ 数字每点一次 +1 —— 恭喜，你写出了人生第一个会响应的页面！🎉
⚡ ⑦ JS · 第 1 步：点一下，数字 +1（10 min）
🔒 未解锁
🎯 小挑战：三板斧 —— getElementById 找元素、let count=0、addEventListener('click',...)。写完点按钮看数字跳。
📝 code.html
🖥️ 实时预览（可点击！）
运行后到右侧预览里点按钮！

⑧ 最后一关：让交互有「真按钮」的手感

现在点按钮数字会 +1，但还是差点意思 —— 真实的 App 里，你按下按钮时，它会稍微缩一下再弹回来，像真的被按下去了一样。而且点到第 10 下，我们还想弹出一个庆祝弹窗。

这一步要学 3 个新东西，最后一公里，坚持一下！

📌 新东西 1：用 JS 直接改 CSS 样式

JS 可以直接修改任何一个元素的任意 CSS 属性，格式就一个公式：

元素.style.CSS属性名 = '新的值' ; 例子： btn.style.transform = 'scale(0.92)' ; ↑ ↑ 刚才找到的按钮 把 transform 设成缩小 92%（立刻缩小一点）

⚠️ 小坑：CSS 原本写 background-color（中间有横杠），在 JS 里要写成驼峰式 backgroundColor（去掉横杠、后面首字母大写）。transform 本身没横杠，所以不用改。

📌 新东西 2：setTimeout —— 「等一会儿再做」的定时器

按钮缩小后要过一会儿才弹回原样，这个「过一会儿」就靠 setTimeout：

setTimeout( () => { 要做的事 } , 120 ); └── 要执行的函数 ──┘ └─毫秒数─┘ 翻译：浏览器啊，请帮我设个闹钟，120 毫秒（= 0.12 秒）后响一次，响的时候跑我给你的这段代码。

（1 秒 = 1000 毫秒，120 毫秒就是眨一下眼的功夫，刚刚好有「按下去」的感觉。）

📌 新东西 3：if 条件判断 —— 让程序学会「看情况」

到目前为止，JS 是「按顺序一行一行执行」。但真实程序经常要判断——「如果怎样，就怎样」。这就是 if：

if ( count === 10 ) { └────┬────┘ 条件 alert('🎉 达成！') ; // 条件为「真」时才执行这里 } 读起来就是：「如果 count 严格等于 10，那么弹窗庆祝。」

⚠️ 注意这个三个等号 ===！它叫「严格等于」—— 值和类型都要一模一样才算真。很多新手会写成 =（一个等号，那是赋值不是判断）或者 ==（两个等号，会偷偷转类型，容易出 bug）。记住一个铁律：判断就用三个等号 ===，准没错。

最后的 alert('文字') 是浏览器自带的弹窗函数，最简陋但最直接的庆祝方式。

🧠 完成这一步，你就彻底毕业了！因为这节课你已经掌握了写任何前端交互的「5 块积木」：
① 变量（存数据）② DOM 操作（找元素、改内容）③ 事件监听（响应用户）④ 定时器（控制时间）⑤ 条件判断（做选择）

把这 5 块积木来回拼装，就能搭出淘宝、抖音、小红书。别怀疑，就是这么玩的。

🎯 这一步要做：在上一步的 5 行 JS 后面再加几行：
• btn.style.transform = 'scale(0.92)'; // 按下缩小
• setTimeout(() => btn.style.transform = '', 120); // 120ms 后还原
• if (count === 10) alert('🎉 恭喜你学会啦！'); // 第 10 次庆祝
连着点 10 下按钮，等那个弹窗跳出来的一刻 —— 这节课你就真的出师了 🎓
🎉 ⑧ JS · 第 2 步：抖动反馈 + 第 10 次庆祝（10 min）
🔒 未解锁
🎯 小挑战：加"按下抖一下"（改 style.transform + setTimeout）+ if (count === 10) 时 alert 庆祝。
📝 code.html
🖥️ 实时预览（连点 10 次！）
连点 10 次看庆祝弹窗 🎊

🚀 必修 · 用 Trae 做一个"简历生成器"（30 min）

01:00 – 01:30

前面你已经手敲出一张名片，现在换挡位 —— 打开 Trae 编辑器，体验"提需求 → AI 写代码 → 你审核"的真实开发流程，产出一个可以填表单 → 实时预览 → 一键导出 PDF 的简历网页。

🛠️ Step 0 · 安装 Trae（课前已完成可跳过）

① 下载访问 trae.cn，按系统选 Windows / Mac 版本。
② 安装双击安装包一路下一步；Mac 拖进 Applications 即可。
③ 登录首次打开用手机号/微信登录，选"国内版" 模型免配置。
💡 一句话原理：Trae = VS Code + 内置 AI 侧栏。你和 AI 聊天，它直接改你的文件，每一处改动都有 diff 让你点"接受 / 拒绝"。

📁 Step 1 · 新建项目文件夹

桌面右键 → 新建文件夹 my-resume → 打开 Trae → 左上角 File → Open Folder → 选中它。

然后在左侧文件树右键 → New File → 命名 resume.html（注意扩展名是 .html）。

🎯 本步目标：Trae 左侧文件树里能看到一个空的 resume.html，右侧编辑区是空白。

🤖 Step 2 · 第 1 次提问：让 AI 生成简历骨架

按 ⌘/Ctrl + U 打开右侧 AI 侧栏，把下面这段 原样粘贴 发送：

1
在 resume.html 里生成一个个人简历网页：包含姓名、一句话自我介绍、头像占位、联系方式（邮箱/电话/GitHub）、教育经历、工作经历、技能清单、项目经历 7 个模块。单文件，HTML + 内联 CSS，整体风格简洁偏商务，主色 #2563eb，左右两栏布局（左 1/3 头像+联系方式，右 2/3 经历）。填充 1 份示例数据（张同学，计算机在读）方便预览。

AI 会在侧栏里生成代码并请求写入 resume.html —— 点 Accept。然后在文件树里右键 resume.html → Open in Browser / Preview，你应该能看到一份完整简历页。

🎯 检查点：浏览器打开后能看到左右两栏、蓝色主调、张同学的示例简历。看不到？把浏览器里的报错截图发回侧栏让 AI 修。

✍️ Step 3 · 第 2 次提问：让简历"可编辑"

静态简历谁都会写，关键是让用户填表单 → 实时改简历。继续在 AI 侧栏追加：

2
给 resume.html 加一个编辑模式：页面左侧加一个可折叠的表单面板（默认展开），字段对应简历里所有文本（姓名、介绍、邮箱、电话、GitHub、学校、专业、技能列表、项目列表等）。用户在表单里每改一个字，右边简历立即更新（input 事件监听）。表单数据自动存 localStorage，刷新后不丢。右上角加一个"👁️ 预览模式"切换按钮，点一下隐藏表单只看简历。
🎯 检查点：左侧出现表单，改"姓名"右边立刻变；刷新浏览器数据还在；点"预览模式"表单消失只剩干净简历。

📄 Step 4 · 第 3 次提问：一键导出 PDF

简历的终极目标是发给 HR，所以必须能打印/存 PDF。继续追问：

3
在右上角"预览模式"按钮旁加一个📥 导出 PDF 按钮：点击后调用浏览器 window.print()，并加一段 @media print 样式 —— 打印时自动隐藏左侧表单和所有按钮，简历占满 A4 纸，字体稍小，颜色保留但去掉阴影。用户在打印对话框里选"另存为 PDF"即可下载。
🎯 检查点：点"导出 PDF" → 弹出打印预览 → 预览图里只有简历没有表单 → 保存为 PDF 文件 → 用系统打开是一份规整的 A4 简历。

🎨 Step 5 · 自由发挥：用 AI 继续加功能

到这里你已经有一个可用的简历生成器了。剩下的时间按兴趣选一个继续提需求：

  • 换主题："加一个主题切换下拉框：商务蓝 / 极客黑 / 清新绿 三种配色"
  • 导入 JSON："加一个导入 JSON 按钮，读取文件自动填充表单"
  • 多份简历："支持保存多份简历，左上角下拉切换"
  • AI 润色："加一个 ✨ 按钮，点击时把当前'自我介绍'用更专业的口吻改写（先用 prompt 占位，后续接真 API）"
💡 提示词心法：1) 说清楚改哪个文件；2) 描述用户看到什么而不是"怎么实现"；3) 给验收标准（什么叫做好了）；4) 不满意直接说"刚才那版 XX 不对，改成 YY"，AI 会在上一版基础上继续改。
🏆 终极收获：你现在手里有两份作品 —— 一张手敲的名片页（懂原理）和一个AI 协作的简历生成器（懂工作流）。这正是 2026 年程序员的真实状态：知道底层 + 会指挥 AI。
🎬 FINAL DEMO

学完这节课，你能做出 👇 这个

左侧任何字段都可以实时编辑 · 右侧即时生成简历 · 一键导出 PDF · 刷新不丢数据

🔗 全屏体验
🔒 localhost / resume-builder.html
👆
动手试：在左边姓名栏敲你自己名字，看右边侧栏头像首字母立刻变了吗？
➕
加内容：点"添加工作经历 / 项目 / 技能"，数量不限，排版自动对齐。
🖨
导出：点右上角"导出 PDF"，打印预览里只剩简历 —— 可以直接投简历。
💾
自动保存：刷新页面数据还在（localStorage），不怕关电脑丢内容。
👉 这不是视频也不是截图，就是你今天用 Trae 一步步做出来的成品本身。源码约 360 行，30 分钟可复现。

🎁 这 90 分钟你会带走什么

🧱
1 个完整网页
带头像、介绍、技能条、交互按钮、移动适配
📚
3 门语言入门
HTML 结构 · CSS 样式 · JS 交互 全都摸过
🤖
AI 工作流
学会用 Trae 提需求而不是手敲代码
🔑
自学的钥匙
以后任何前端教程你都能看懂

感觉还不过瘾？

这只是 2 个月强化营 第一周的一小节。完整学完你能独立开发
公众号、校园系统、AI 应用 —— 带着可演示的项目去实习面试。

🗺️ 查看完整学习路径 🏠 返回首页了解更多