# 从 0 做出第一个网页页面

> 先做一个能介绍产品、收集邮箱、展示截图的静态页面，再谈复杂功能。

- 阶段：零基础入门
- 难度：零基础
- 预计时间：2-4 小时
- 完成本节后产出：完成一个包含标题、说明、截图、表单入口和联系方式的产品介绍页。

## 思维导图

- 学习目标
  - 先做一个能介绍产品、收集邮箱、展示截图的静态页面，再谈复杂功能。
  - 完成一个包含标题、说明、截图、表单入口和联系方式的产品介绍页。
  - 适合阶段：零基础入门
- 执行步骤
  - 先写清楚页面要回答的四个问题：这是什么、给谁用、解决什么问题、下一步做什么。
  - 准备页面素材：产品名、一句话定位、三条价值点、一张截图或占位图、一个 CTA。
  - 让 AI 帮你起草静态页面结构，再逐段检查文字是否像真人写的。
  - 补上移动端样式，确保手机上标题、按钮和图片不会挤在一起。
- 交付物
  - 完成：产品名
  - 完成：一句话定位
  - 完成：价值点
  - 完成：截图
  - 完成：CTA
- 常见坑
  - 首页写得像公司官网而不是验证页
  - 没有明确下一步动作
  - 只在自己电脑上看不部署
  - 文字全是空泛形容词

## 操作提醒

- 不要只阅读，至少完成一个可检查的产出。
- 把每一步的结果截图、链接或文字记录放进自己的知识库。
- 如果要让 AI 协助执行，先把本文件作为上下文给它。
- 做完后回到教程页面，对照“做到什么程度算完成”逐项检查。