ℹ️ Information从 PPT 到 Landing Page:把幻灯片改成网页的转化思路
P2 的 PPT 内容怎么"翻"成 landing page?PPT 一页 = 网页一个 section(Hero / 卖点 / 数据 / 案例 / CTA)。讲清楚信息密度 / 滚动节奏 / 交互元素的差异——同一份内容、两种形态。学员做自己 P2 选过的话题(楼盘 / Saa... 登录后查看完整内容
ℹ️ Information什么是“一个好的互联网产品”?
在动手之前先想清楚:你要做一个什么样的产品?好的互联网产品解决一个具体问题,目标用户清晰,操作流程简单。这节课看几个真实案例——它们为什么好用、解决了什么痛点、你能从中学到什么。想清楚这些,后面用 AI 写代码才知道要写什么。
ℹ️ InformationHTML介绍
HTML 是网页的"骨架"——标题、段落、图片、按钮都靠 HTML 标签。这节是 5 分钟概念课,不深挖语法。📚 配套自学资源很多:MDN HTML 入门 / freeCodeCamp HTML 教程 / B 站搜"HTML 入门"。
ℹ️ InformationCSS介绍
CSS 是网页的"皮肤"——决定颜色、字体、布局。这节是 5 分钟概念课,不深挖语法。📚 配套自学资源:MDN CSS / W3C Schools CSS / CSS-Tricks / B 站 CSS 入门。
ℹ️ Information网页文件结构入门(HTML/CSS/JS)
HTML / CSS / JS 三件套怎么协作——HTML 出结构、CSS 出样式、JS 出交互。让你"读懂"AI 写的代码文件结构。📚 配套自学:MDN 入门 / freeCodeCamp 完整路径。
ℹ️ Information常见前端页面组件介绍
网页上的按钮、卡片、导航栏、轮播图、表单、弹窗、下拉菜单——这些都是前端组件。这节课介绍 15 个最常用的组件,每个展示长什么样、什么场景用、怎么告诉 AI 生成。以后你说「帮我加一个带图片和标题的卡片列表」,AI 就知道你要什么了。
ℹ️ Information工具安装:Cursor + Claude Code
Cursor 是目前最好用的 AI 编程工具——打开它,用中文告诉它你要什么,它帮你写代码。这节课从下载 Cursor 开始,一步步完成安装、登录、创建第一个项目。如果你从来没用过代码编辑器,不用怕,按步骤操作就行。课后你的电脑上就有一个能写代码的环境了。
📄 InteractiveLabLab: Cursor 入门 — Vibe Coding 的代名词
认识目前最流行的 AI IDE——Cursor。掌握 Composer 多文件编辑、@ 引用上下文、Tab 补全,以及如何用 .cursorrules 让 AI 记住你的项目规矩。
ℹ️ Information自学:安装 Cursor 与环境准备
阅读「安装 Cursor 与环境准备」章节。自主节奏完成,巩固本节课的知识点。
ℹ️ Information什么是 Claude Code(命令行版 AI 编程)
Claude Code 是 Anthropic 官方的命令行 AI 编程工具——能让 AI 在你电脑上直接读文件 / 写代码 / 跑命令。讲清楚 Claude Code 和 Cursor 的分工。
📄 QuestQuest 实战:装好 Cursor 用一句话生成你第一个网页
🎯 这节课解决什么问题L05-L08 讲了 Cursor 是什么、怎么装。但很多零基础学员看完视频还是不敢自己装——怕装错、怕电脑出问题、怕 AI 听不懂自己说什么。这节 Quest 由小花老师主动引导你在自己电脑上从零装好 Cursor,然后用一句中文需求让 AI 生成你人生... 登录后查看完整内容
📚 Lesson 12让 AI 帮我写第一个功能
PRD 准备好了,终于开始写代码。打开 Cursor,把 PRD 里的第一个功能描述复制进去,告诉 AI 用什么框架(Next.js / React),它就开始写了。这节课手把手带你完成第一个功能——可能是一个导航栏、一个 Hero Section、或一个联系表单。重点不是代码本... 登录后查看完整内容
📚 Lesson 13用 AI 把你的 PPT 内容搭成完整 Landing Page
不是一个页面一个页面写,而是用 AI 一次搭一个完整的多页面官网:首页(Hero + 功能介绍 + 客户评价 + CTA)、关于我们、服务列表、联系我们。这节课讲怎么给 AI 一个完整的网站结构描述,让它一次性生成所有页面的框架,你再逐页调整细节。比一页一页写快 5 倍。
📄 QuestQuest 实战:用 Cursor 搭一个真实可用的官网首页
🎯 这节课解决什么问题L51-L55 讲了 AI 怎么搭建网页、有哪些常见组件。但从「看老师在 Cursor 里搭」到「我自己也能搭出一个能用的官网」之间还有距离。这节 Quest 由小花老师带你在 Cursor 里搭出一个真实的官网首页——有导航栏、Hero 大图、产品介绍、... 登录后查看完整内容
ℹ️ Information报错时正确的 Debug 方法
AI 写的代码跑不通很正常——专业程序员写的代码也天天报错。关键是你怎么把报错信息给 AI。三步法:1)复制完整报错信息(不是截图,是文字);2)告诉 AI 你在做什么操作时报的错;3)让 AI 解释报错原因再给修复方案。90% 的报错 AI 能一次修好。这节课列出新手最常见的 ... 登录后查看完整内容
📚 Lesson 16Debug不再可怕
上节课讲了 Debug 的方法论,这节课实战。讲师故意制造 5 个真实 bug(CSS 样式错位、JS 报 undefined、API 连不上、页面空白、部署失败),现场用 Cursor + AI 一个一个修。你看完整的 Debug 流程:看报错 → 定位问题文件 → 复制给 A... 登录后查看完整内容
📚 Lesson 17Git基础:保存进度不掉线
Git 是代码的存档系统。每做完一步就 git commit(存个档),搞砸了就 git checkout(读档回退)。这节课只教 5 个命令:git init(初始化)、git add(选择文件)、git commit(存档)、git push(推到 GitHub)、git l... 登录后查看完整内容
ℹ️ Information如何创建并管理你的第一个GitHub仓库
写代码最怕的不是写错,是改着改着回不去了。GitHub 帮你保存每一次修改,随时可以退回之前的版本。这节课从注册 GitHub 账号开始,创建你的第一个仓库(Repository),学会把代码推上去(push)和拉下来(pull)。以后每做完一个功能就 push 一次,代码永远不... 登录后查看完整内容
ℹ️ Information什么是部署上线?
代码写完了,但只在你自己电脑上能看到。部署就是把代码放到互联网上,让所有人通过网址访问。这节课讲部署的三个核心概念:服务器(代码放哪)、域名(网址是什么)、DNS(域名怎么指向服务器)。下节课实操部署,这节先理解原理。
📚 Lesson 20产品上线啦,域名管理
Vercel 是最简单的部署平台——连接 GitHub 仓库,点一个按钮,网站就上线了。这节课手把手操作:注册 Vercel → 连接 GitHub → 部署 → 拿到一个 .vercel.app 网址 → 绑定自己的域名(可选)。5 分钟你的网站就在互联网上了。每次 push ... 登录后查看完整内容
📄 QuestQuest 实战:把你的网站真的部署到 Vercel 上线
🎯 这节课解决什么问题L67-L70 讲了部署是什么、Vercel/Cloudflare 是什么。但「我电脑上的网站」和「我朋友能用手机打开看的网站」之间差着一个真实的部署。这节 Quest 由小花老师带你把 Q03 做的官网首页(或者其他项目)真的推到 GitHub、部署到 ... 登录后查看完整内容