亲手拆开
一个网站
看懂它的骨架、外衣、大脑和住址
从一次点击，到页面呈现。我们把复杂的互联网，拆解成你能看懂的零件，动手搭建属于你自己的网页。
☝ 动手实验边学边做，立即见效▦ 可视化拆解复杂原理，一目了然♢ 项目驱动从零到一，构建作品
外衣CSS 样式与布局骨架HTML 结构与内容大脑JavaScript 行为组件React 可复用模块后端Backend 服务数据Database 数据库住址Domain 域名
www.your-site.com ⌁
互联网的核心技术
点击卡片，了解每个技术在网站中的角色
一次点击的旅程：请求 → 响应
当你在浏览器输入网址并按下回车后，发生了什么？
后续交互：AJAX / API 再次通信
200 OKEverything is
working.
working.
前端框架 / 架构对比
选择合适的工具，事半功倍
▸ 网页全流程原理最清楚▸ 学习成本低▸ 完全掌控 DOM
▸ 组件化开发▸ 丰富的生态系统▸ 更具应用体验
▸ 服务端渲染 / 静态生成▸ 路由、优化、API 一体化▸ 更好的 SEO 与性能
▸ 有不同特色与生态▸ 选择最合适的方案▸ 不要跟风
动手实践：从想法到上线
选择一个项目，跟着教程一步步完成你的作品
个人展示页
HTML · CSS待办清单
JavaScript天气应用
API · JS图片分享站
React博客系统
Next.js · MDX电商网站
全栈项目学习路线：从 0 到 1 的成长地图
基础入门
HTML、CSS、JavaScript 基础交互进阶
DOM、事件、异步与 API组件思维
React 核心概念与组件开发工程化
Next.js、构建、部署与规范后端与数据库
Node.js、数据库、认证与权限上线与迭代
域名、DNS、部署、监控与性能当前进度： 0%
破除常见误区
×我必须先学会所有知识才能做项目错误：边学边做才是最快的方法。○
×框架越新越好，越复杂越强大错误：边学边做才是最快的方法。○
×前端不用学后端错误：边学边做才是最快的方法。○
×编程很难，需要超强记忆错误：边学边做才是最快的方法。○
小测验：你准备好了吗？
当你在浏览器输入一个网址并按下回车，第一步发生了什么？
1/5
