Frontend Academy

Name: Frontend Academy
Availability: InStock

HTMLFrontendWebBeginner

通过前端开发学院开发视觉效果惊人的响应式网站。

🤖 AI 驱动📚 41 门课程👥 10万+ 学习者⭐ 4.9 分

课程概览

构建现代前端的全套技能

前端开发是将代码转化为用户在浏览器中看到和交互的一切内容的学科——HTML 结构、CSS 表现、JavaScript 行为，以及在生产规模下将它们结合在一起的框架和工具。本课程涵盖完整堆栈：从网页传递的工作原理到编写类型安全的 React 和 Vue 应用、优化性能，再到通过 CI/CD 管道部署。

你将学到什么

你将从 HTML、CSS 和 JavaScript 基础开始，然后掌握 TypeScript、DOM 和浏览器 API、响应式设计，以及包括异步编程和模块在内的 ES6+ 模式。接下来你将进入 React（hooks、高级模式、Next.js SSR）和 Vue 3（Composition API、Nuxt 3 SSR）、状态管理、前端测试、CSS 架构，以及使用 WebSockets 的实时接口。课程以 web 性能优化、前端安全、设计系统，以及前端 CI/CD 和 DevOps 收尾。

学习路径

四十一门课程跨越 A1 至 C2 级别。A1 和 A2 课程建立基础——网络工作原理、语义化标记、CSS 动画、Git 和 TypeScript 入门。B1 和 B2 课程构建专业能力：CSS 布局精通、JavaScript 模块和构建工具、React 和 Vue 3 基础、API 集成、Progressive Web Apps，以及使用 Next.js 和 Nuxt 3 的服务器端渲染。C1 课程处理高级主题：前端高级 TypeScript、React 高级模式、Vue 高级模式、前端架构、设计系统和组件库、前端安全，以及前端 CI/CD 和 DevOps。课程在 C2 级别以 高级前端工程结束，它将一切整合成生产级实践。

工作原理

每门课程分为短小的实践课程，你在内置代码编辑器中完成，并获得实时反馈。当你遇到困难时，AI 导师随时可用，每个概念都通过反映真实浏览器和框架行为的练习来强化，而不是人为设计的示例。

开始学习 →

工具

探索课程工具

用 AI 工具和功能为你的学习加速

你的学习方式

🎯

互动课程

实时反馈的动手编程练习

🤖

AI 导师

遇到困难时立即获得 AI 帮助

💻

内置编辑器

直接在浏览器中编写并运行代码

🏆

证书

完成课程后获得证书

课程

41 门课程

Frontend Academy 学习路径中的所有课程。

欢迎学习前端开发

A13 节课

了解前端开发人员的实际工作内容、这一职业为何是需求最旺盛且最具创造力的技术职业之一，以及 HTML、CSS 和 JavaScript 如何协同工作。

Web 的工作原理

A14 节课PRO

理解 Web 的基础：浏览器如何请求页面、DNS 的作用、HTTP 的工作方式，以及输入 URL 后会发生什么。学完后，您将确切了解在第一个像素出现之前，浏览器完成了哪些工作。

前端 HTML 基础

A14 节课PRO

学习每个网页的构建模块。使用语义化元素编写有效的 HTML5 文档，使用标题和列表组织内容，嵌入图像和链接，并构建无障碍表单。

前端 CSS 基础

A14 节课PRO

自信地为 HTML 设置样式。学习层叠和优先级的工作原理，应用颜色和排版，掌握盒模型，并使用显示属性和定位控制布局。

JavaScript 基础

A14 节课PRO

编写您的第一个 JavaScript 程序。学习声明变量、处理原始数据类型、定义函数，以及使用条件语句和循环控制程序流程。

开发者工具与工作流

A14 节课PRO

像专业前端开发者一样工作。掌握 Chrome DevTools 进行检查和调试，使用实用扩展配置 VSCode，并设置 Prettier 和 ESLint 等代码质量工具。

Chrome DevTools：Elements、Console、Network
VSCode：扩展、Emmet 与快捷键
Prettier 与 ESLint 设置
还有 1 门课程

TypeScript 入门

A24 节课PRO

为 JavaScript 添加类型，在错误进入浏览器前将其捕获。学习 TypeScript 的类型系统，为变量和函数添加类型注解，定义接口，并使用 tsconfig 将 TypeScript 编译为 JavaScript。

DOM 与浏览器 API

A24 节课PRO

使用 JavaScript 让 HTML 变得可交互。选择元素、监听事件、读取和修改内容，并使用文档对象模型动态创建或删除元素。

响应式设计基础

A24 节课PRO

构建适用于任意屏幕尺寸的布局。学习视口元标签，使用 Flexbox 和 Grid 创建流式布局，并采用移动优先的方法编写媒体查询。

HTML 表单与语义化标记

A24 节课PRO

深入掌握 HTML。使用 ARIA 属性构建完全无障碍的表单，运用完整的 HTML5 输入类型，利用原生验证，并编写能向所有客户端传达结构的标记。

JavaScript：数组、对象与 ES6+

A24 节课PRO

使用现代语法和强大的内置方法提升 JavaScript 技能。通过 map、filter 和 reduce 操作数组，解构对象，使用展开语法处理数据，运用模板字面量，并通过 ES 模块编写模块化代码。

Git 与协作工作流

A24 节课PRO

作为前端开发者有效使用 Git。学习保存工作的核心命令，理解用于开发功能的分支，将代码推送到 GitHub，并通过拉取请求进行协作。

CSS 变量、过渡与动画

A24 节课PRO

用 CSS 动效让界面焕发生机。使用自定义属性维护设计令牌，为状态变化添加平滑过渡，构建关键帧动画，并尊重用户对动效的偏好。

CSS 布局精通

B14 节课PRO

超越基础，真正掌握 CSS 布局。深入探索 Flexbox 的对齐与换行，运用 CSS Grid 模板区域和自动适配，组合使用这两种技术，并通过 CSS 自定义属性实现一致的主题样式。

JavaScript 模块与构建工具

B14 节课PRO

理解现代 JavaScript 工具链。使用 ES 模块语法，通过 npm 管理软件包，使用 Vite 快速启动开发服务器，并学习让生产环境软件包保持小巧的打包概念。

TypeScript 类型与接口深入

B14 节课PRO

深入学习 TypeScript 的类型系统。编写可复用的泛型函数，使用工具类型转换接口，构建映射类型和条件类型，并在运行时安全地收窄类型。

React 基础

B14 节课PRO

构建您的第一个 React 应用。理解 JSX 语法，从函数组件组合用户界面，通过属性传递数据，并使用 useState 钩子管理本地状态，创建交互式界面。

React：useEffect 与数据获取

B14 节课PRO

让 React 组件与外部系统保持同步。学习 useEffect 的工作方式，在组件挂载时从 API 获取数据，显示加载和错误状态，并使用 AbortController 正确清理副作用。

Vue 3 基础

B14 节课PRO

使用单文件组件构建您的第一个 Vue 3 应用。学习选项式 API、核心指令，以及如何通过属性和 emits 在父子组件之间通信。

前端无障碍

B14 节课PRO

构建所有人都能使用的界面。理解 WCAG 一致性等级，以语义化 HTML 为无障碍基础，正确应用 ARIA 角色和属性，并确保完整的键盘可操作性。

JavaScript：异步编程

B24 节课PRO

从基础开始掌握异步 JavaScript。理解事件循环，从回调模式过渡到 Promise，并编写具有恰当错误处理的简洁 async/await 代码。

事件循环：调用栈、队列与微任务
回调与回调地狱
Promise：then、catch、finally 与 Promise.all
还有 1 门课程

React：高级钩子

B24 节课PRO

掌握完整的 React 钩子 API。使用 useContext 在不逐层传递属性的情况下共享数据，使用 useReducer 管理复杂状态，通过 useMemo 和 useCallback 优化性能，并将逻辑提取为自定义钩子。

Vue 3：组合式 API 与响应式

B24 节课PRO

借助组合式 API 释放 Vue 3 的全部能力。使用 ref 和 reactive 管理响应式状态，使用 computed 和 watch 处理派生值与副作用，并构建可复用的组合式函数。

状态管理

B24 节课PRO

有效管理整个应用的状态。学习用于 React 的 Redux Toolkit、作为轻量替代方案的 Zustand、用于 Vue 的 Pinia，以及帮助您判断何时确实需要全局状态的原则。

前端测试

B24 节课PRO

为前端代码编写自动化测试。配置 Jest，使用 Testing Library 测试 React 组件，测试 Vue 组件，并模拟模块和 API 调用，让测试保持快速且相互隔离。

Jest 设置与基础测试
@testing-library/react：render 与 userEvent
@testing-library/vue：挂载组件
还有 1 门课程

CSS 架构

B24 节课PRO

编写可扩展的 CSS。学习 BEM 命名约定以创建可预测的选择器，使用 CSS Modules 限定样式作用域，在 JavaScript 中通过 styled-components 和 Emotion 直接添加 CSS，并采用 Tailwind 进行工具优先开发。

API 集成与 REST

B24 节课PRO

将前端连接到后端 API。使用原生 Fetch API 实现所有 HTTP 方法，添加 Axios 以使用拦截器和基础 URL，妥善处理 HTTP 错误，并使用 SWR 或 React Query 缓存服务器数据。

服务器端渲染：Next.js

B24 节课PRO

使用 Next.js 构建生产级 React 应用。理解页面路由器和现代应用路由器，区分服务器组件与客户端组件，选择合适的渲染策略，并添加无服务器 API 路由。

服务器端渲染：Nuxt 3

B24 节课PRO

使用 Nuxt 3 构建全栈 Vue 应用。利用基于文件的路由和自动导入减少样板代码，使用组合式函数获取服务器数据，通过模块扩展功能，并部署为静态网站或 SSR 应用。

渐进式 Web 应用

B24 节课PRO

将网站变成类似应用的体验。编写 Web 应用清单以支持安装，注册服务工作线程以提供离线支持，实现缓存策略，并添加推送通知。

WebSockets 与实时前端

B24 节课PRO

构建实时用户界面。使用原生 WebSocket API，集成 Socket.io 客户端库，接收服务器发送的单向数据流事件，并应用乐观更新等实时数据界面模式。

现代前端工具链

B24 节课PRO

掌握快速发展的 JavaScript 工具链。使用插件扩展 Vite，并将其用于 SSR，理解 esbuild 如何实现高速构建，使用 pnpm 管理工作区，并通过 Turbo 的缓存流水线加速单体仓库构建。

网页性能优化

C14 节课PRO

让网站运行更快，并衡量优化效果。理解核心网页指标，运行 Lighthouse 审计，针对网页优化图片，并通过代码拆分和延迟加载减小 JavaScript 载荷。

面向前端的高级 TypeScript

C14 节课PRO

将 TypeScript 的能力发挥到极致。使用模板字面量类型构建类型，为 React 组件和钩子添加精确的泛型，启用严格模式以消除不安全的 any 用法，并探索装饰器。

React 高级模式

C14 节课PRO

像库作者一样编写 React 代码。构建由 Context 支持的复合组件，应用渲染属性和高阶组件共享横切关注点，使用 Portal 在组件树之外渲染，并通过错误边界从崩溃中恢复。

Vue 高级模式

C14 节课PRO

掌握专业应用中使用的 Vue 3 高级模式。通过 provide/inject 在组件树中共享逻辑，使用 Suspense 异步加载组件，编写自定义指令，并通过插件扩展应用。

前端架构

C14 节课PRO

设计能够扩展到大型团队的前端应用。将原子设计应用于组件层级，使用 Turborepo 单体仓库管理多个软件包，实现微前端模块联邦，并按功能组织文件。

设计系统与组件库

C14 节课PRO

构建并维护共享组件库。在 Storybook 中记录组件，使用 Style Dictionary 定义设计令牌，将软件包发布到 npm，并将系统集成到使用它的应用中。

前端安全

C14 节课PRO

保护用户免受网页安全威胁。通过输出编码和内容安全策略防止 XSS，使用 SameSite Cookie 和令牌防范 CSRF，配置 CSP 标头，并在浏览器中安全实现 OAuth。

前端持续集成、持续交付与 DevOps

C14 节课PRO

自动化交付前端应用。编写 GitHub Actions 工作流，在每次推送时执行代码检查、测试和构建，自动部署到 Vercel、Netlify 和 Cloudflare Pages，在持续集成环境中管理环境变量，并运行 Lighthouse 检查。

高级前端工程

C24 节课PRO

达到高级工程师水平。使用前端专属框架应对系统设计面试，营造健康的代码审查文化，通过指导和文档培养初级工程师，并持续跟进不断发展的网页标准。

常见问题

常见问题解答

Frontend Academy 课程免费吗？

免费。你可以免费开始 Frontend Academy 课程并完成它的所有互动课程。可选的 PRO 订阅解锁高级 AI 工具和可分享的证书。

学习 HTML 需要有先前的经验吗？

不需要。课程从基础开始，逐步进阶到更高难度的主题，所以即使你没有任何 HTML 基础也可以开始。

我在 CoddyKit 上怎样学习 HTML？

学以致用。简洁的互动课程将清晰的讲解与实时动手编程练习结合，24/7 AI 导师在你遇到困难时提供个性化帮助。

完成 Frontend Academy 后能获得证书吗？

可以。PRO 学员可以参加考试，获得 Frontend Academy 课程的可分享的完成证书，其中包含可验证的代码。

我能在手机上学习 HTML 吗？

可以。CoddyKit 支持网页版和原生 iOS、Android 应用，你可以在任何设备上学习 HTML，进度会自动同步。

立即开始 Frontend Academy

加入数千名学习者，通过 AI 驱动的课程掌握编程。

免费开始 →浏览所有课程