学 Web开发

像真正的网页开发者一样学习前端 Web 开发：从第一课开始，在同一页面上一起使用 HTML、CSS 和 JavaScript。修改一行 JavaScript，观察手机上的页面更新；HTML、CSS 和 JS 编辑窗格并排显示，下方还有实时预览。

一套面向初学者的完整前端课程，学完基础后继续深入：从第一个标签开始，直到 TypeScript、React、Vue、测试、性能和前端架构。

课程内容

• 41 门课程和 163 节短课，从初学者（A1）到资深级别（C2）

• 支持 HTML、CSS 和 JavaScript 编辑窗格并提供即时预览的实时代码编辑器

• 使用 HTML、React、Vue、Angular、Node 或 TypeScript 模板创建新项目

• 20 个循序渐进的引导项目：食谱页面、联系表单、卡片网格、导航栏、数据表等

• 15 个基于真实前端错误设计的调试任务：在 375px 下崩坏的布局、让 LCP 大幅变慢的图片、无法通过 Tab 键操作的表单、组件中的内存泄漏、在本地通过但在 CI 中失败的测试

• 结业考试和完成证书

• 应用支持 22 种语言

一条从初学者到资深开发者的学习路径

• Web 的工作原理、HTML 基础、表单和语义化标记

• CSS 基础、变量、过渡和动画，以及使用 flexbox 和 grid 进行布局

• 适用于各种屏幕尺寸的响应式设计

• JavaScript 基础、数组和对象、ES6+、DOM 与浏览器 API、异步编程

• 开发者工具、Git、团队工作流、模块和构建工具

• 从第一个类型到高级模式的 TypeScript

• React 基础、useEffect 和数据获取，以及高级钩子和模式

• Vue 3 基础、Composition API 和高级 Vue 模式

• 状态管理、使用 REST 和 WebSockets 进行 API 集成，以及实时 UI

• 使用 Next.js 和 Nuxt 3 进行服务端渲染，渐进式 Web 应用（PWA）

• 无障碍、测试、性能和安全

• CSS 架构、设计系统、CI/CD 和现代工具链

真正有效的练习

• 测验和复习环节，巩固所学内容

• 包含 83 条语法和模式的速查表

• 50 道附答案的面试题，适合前端开发者或 Web 开发者面试前使用

• 可打开并编辑的短代码示例库

• 保存自己的代码、笔记和收藏的课程

• 编程挑战：使用代码邀请朋友，或与随机对手匹配

• World Coding Challenge：每天进行三轮全球挑战，使用 JavaScript、Python 和其他语言解题

• 连续学习记录、XP、排行榜和每日提醒

AI 导师

• 遇到错误或概念难题？向 AI 导师询问错误、课程内容或你自己的代码

• AI playground：描述一个页面，观看代码生成

• 免费用户每天可提问 AI 3 次；Pro 用户不限次数

免费版和 Pro

第一门课程、第一个引导项目、两个调试任务和代码编辑器均可免费使用，每天还可向 AI 导师提问 3 次。免费版会显示广告。Pro 可解锁所有课程、全部项目和任务、证书考试以及无限 AI 使用，并移除广告。

立即开始，几分钟内创建你的第一个页面。