系统课程930 小时

前端开发

先理解浏览器如何把结构、样式和事件变成页面,再进入响应式和可访问交付。

适合谁
想从页面结构开始学习前端,而不是先背框架 API 的读者
学完以后
能做出结构清楚、交互可解释、不同屏幕可用的页面切片。
课程目录

从基础到实战

建议按顺序学习。每一节都建立在前面的概念之上。

基础

理解 HTML、CSS、JavaScript 和浏览器的分工。

能指出一个页面的结构、样式和交互分别由谁负责。

  1. 1
    HTML、CSS、JavaScript 各管什么:做出第一张可交互任务卡

    从浏览器加载页面开始,讲清 HTML 语义结构、CSS 选择器与盒模型、JavaScript 变量与 DOM 事件,并组合成可运行任务清单。

    46 分钟阅读
  2. 2
    JavaScript 入门不迷路:值、作用域、对象与异步

    从浏览器执行一行脚本开始,建立变量、函数、数组、对象、闭包、Promise 与 async/await 的最小心智模型。

    39 分钟阅读
  3. 3
    浏览器交互的底层:DOM、事件、渲染和 Fetch

    从点击一颗按钮开始,理解事件捕获与冒泡、DOM 更新、渲染帧、网络请求和取消,建立前端排障路线。

    38 分钟阅读
进阶

先掌握异步请求,再用类型说明数据形状,最后把组件状态、事件和请求组合起来。

能解释一次点击如何发出请求、更新状态并处理失败,并指出每个状态由谁拥有。

  1. 4
    按钮点了三次发出三次请求:JavaScript 异步、取消和并发控制

    从 Promise 与 async/await 讲到 fetch 错误处理、AbortController、竞态条件、超时和并发上限,配套可直接改造的浏览器代码。

    42 分钟阅读
  2. 5
    TypeScript 类型入门:让数据形状在运行前说清楚

    从 JavaScript 的对象类型开始,学习接口、联合类型、泛型、类型收窄和 unknown,建立可维护的前端数据合同。

    35 分钟阅读
  3. 6
    React 入门真正要懂的事:组件、状态、事件和数据流

    先弄懂页面为什么会重新显示,再用一个可编辑清单理解组件、props、state、事件、key 和 Effect。

    49 分钟阅读
深入

理解响应式布局、类型边界、性能和可访问性约束。

能用检查清单说明页面在窄屏、键盘和慢网络下如何工作。

  1. 7
    知识库阅读器响应式实战:三栏、字体、划线与移动端

    从 1440px 三栏阅读器压缩到 320px 手机,处理内容宽度、字体清晰度、目录抽屉、荧光笔工具栏、表格、代码、焦点和性能。

    36 分钟阅读
  2. 8
    现代前端完整路线:亲手做出可收费的知识库阅读器

    以登录、目录、Markdown阅读、搜索、划线、笔记和进度为项目主线,掌握HTML/CSS、TypeScript、React、Next.js、状态、测试、性能与发布。

    40 分钟阅读
实战

完成一个知识库阅读器切片并复盘真实交互。

交付可访问、可响应、可恢复状态的阅读器页面。

  1. 9
    贯穿式实战:从零做一款能登录、阅读、划线和检索的知识库

    把前端、API、数据库、认证、笔记、高亮、搜索、测试、容器和部署串成一个可复核的毕业项目。

    62 分钟阅读