一句话总结
零基础做网站，先花约两周跟一段 28.5 分钟的免费视频学 HTML/CSS（第一遍只看、第二遍跟着做），再用 MDN 学 JavaScript 做一个倒计时闹钟，独立做出几个小网站之后才考虑 jQuery 或 Vue。
适合谁： 完全没有编程基础、想自己动手做出海网站的人。
核心要点
- 起点是一段约 28.5 分钟的免费视频（Bilibili BV1Wr4y1R7Bd），覆盖 HTML 结构、常用标签、CSS、语义标签、盒模型、Position、Class、Flexbox、表单、固定导航栏和响应式设计。
- 两遍学习法：第一遍只看建立整体认识，第二遍跟着做，卡住就查搜索引擎或问 ChatGPT。
- 用约两周入门，再做至少三个 HTML、CSS、JavaScript 网站巩固，不要一开始就学框架。
- JavaScript 先做”按钮点击获取输入框值并显示”，再扩展为在线倒计时闹钟（时间选择、每秒更新、结束播放音乐）。
- 能否变现取决于产品和需求，不由是否用新框架决定——来源用仍在用 PHP+jQuery 的网站案例说明这点。
推荐起点
来源推荐一段约 28.5 分钟的免费视频教程（Bilibili BV1Wr4y1R7Bd），从 HTML 文件结构、常用标签和 CSS 样式开始，逐步覆盖 HTML5 语义标签、盒模型、Position、Class、Flexbox、表单、固定导航栏和响应式设计。
Windows 用户可以使用 VSCode，也可以用系统记事本加浏览器完成练习。
两遍学习法
- 第一遍只看，建立整体认识。
- 第二遍跟着做，遇到问题查搜索引擎或询问 ChatGPT。
来源建议用约两周完成入门，再通过至少三个 HTML、CSS、JavaScript 网站巩固，而不是一开始就陷入框架学习曲线。
JavaScript 的练习目标
JavaScript 后续可参考 MDN 中文文档。完成快速入门后，先做一个“按钮点击获取输入框值并显示”的小功能，再扩展为在线倒计时闹钟：包含时间选择、每秒更新和倒计时结束播放音乐。
什么时候学框架
先能独立完成几个小网站，再考虑 jQuery 或 Vue。来源用仍采用 PHP+jQuery 的网站案例说明：能否变现取决于产品和需求，不由是否使用新框架单独决定。
行动清单
- 装好 VSCode（或直接用记事本 + 浏览器），打开 Bilibili 视频 BV1Wr4y1R7Bd 完整看一遍，不动手。
- 第二遍跟着视频逐段敲代码，卡住就搜索或问 ChatGPT。
- 两周内做完入门，然后独立做至少三个只用 HTML、CSS、JavaScript 的小网站。
- 打开 MDN 中文文档学 JavaScript 快速入门，做出”按钮点击获取输入框值并显示”。
- 把它扩展成在线倒计时闹钟：能选时间、每秒更新、倒计时结束播放音乐。
- 以上都能独立完成后，再决定要不要学 jQuery 或 Vue。
常见误区
- 一上来就学框架：先陷入框架学习曲线，反而做不出网站。
- 以为用新框架才能变现：能否变现取决于产品和需求，PHP+jQuery 的网站照样在赚钱。
See Also
- 网站布局与样式调整 — 下一步：用 GPT-4 生成网页后怎么手动调 Logo、导航、按钮和页脚。
- AI辅助网页生成与搜索意图架构 — 会一点 HTML/CSS 后，怎么让 GPT-4 帮你生成语义化页面。
资料来源与更新记录
来源： 哥飞，养网站防老第0步 最后更新： 2026-08-22 原始资料： 养网站防老第0步前端入门推荐