起步与路线
第一次接触网页开发，先从这里选一条完整路线走下去。
-
教程
MDN 学习 Web 开发
Mozilla 维护的系统课程，从网页如何工作讲到框架，每节配练习。
-
互动
freeCodeCamp 中文
在浏览器里边写边过关的免费课程，适合需要即时反馈的初学者。
-
教程
The Odin Project
开源的全栈学习路线，强调自己搭环境、自己做项目。
-
教程
Full Stack Open
赫尔辛基大学的全栈课程，围绕 React、Node 和测试展开。
-
视频
CS50 Web
哈佛的 Web 编程公开课，包含完整讲座视频和项目作业。
-
路线图
Frontend Roadmap
前端技能的可视化路线图，用来判断接下来该学什么。
-
教程
web.dev Learn
Chrome 团队编写的专题课程合集，覆盖 HTML、CSS、性能等方向。
国内访问可能不稳定 -
速查
菜鸟教程
中文的语法速查站，示例可以在线运行，适合临时查用法。
HTML 与 CSS
网页的结构与样式，以及布局、响应式和兼容性查询。
-
文档
MDN HTML 参考
HTML 元素与属性的权威参考，遇到不确定的标签先查这里。
-
文档
MDN CSS 参考
CSS 属性、选择器和布局模块的完整参考与示例。
-
教程
Learn HTML
讲语义化、表单和可访问性，不只是罗列标签。
国内访问可能不稳定 -
教程
Learn CSS
从盒模型到 Grid、Flexbox 的结构化课程。
国内访问可能不稳定 -
互动
Flexbox Froggy
用写 CSS 帮青蛙回到荷叶的小游戏，几十分钟学会 Flexbox。
-
互动
Grid Garden
同类型的小游戏，用 CSS Grid 给菜园浇水。
-
文档
A Complete Guide to Flexbox
CSS-Tricks 的经典图解，每个属性都配有示意图。
-
书
Every Layout
用少量 CSS 构建可复用布局的思路，部分内容需要付费。
-
工具
Can I use
查询某个网页特性在各版本浏览器中的支持情况。
JavaScript 与 TypeScript
从语言基础到类型系统，让页面动起来。
-
教程
现代 JavaScript 教程
从基础讲到浏览器 API，讲解细致，也是最适合通读的中文教程之一。
-
文档
MDN JavaScript 指南
按主题组织的语言指南，可与语法参考配合查阅。
-
书
ES6 入门教程
阮一峰编写的开源书，系统讲解 ES6 及之后的语言特性。
-
书
Eloquent JavaScript
可免费在线阅读的经典书，章节内就能运行和修改代码。
-
书
You Don't Know JS
深入作用域、闭包和对象机制的开源系列书。
国内访问可能不稳定 -
清单
33 JS Concepts
33 个核心概念的优质文章索引，适合查漏补缺。
国内访问可能不稳定 -
文档
TypeScript 手册
官方手册，从日常类型讲到泛型和类型操作。
-
互动
Type Challenges
分难度的 TypeScript 类型体操题库，用来练类型系统。
国内访问可能不稳定 -
视频
JavaScript30
30 天 30 个不依赖框架的小项目，配完整视频讲解。
框架与工程化
组件框架、构建工具、版本控制和测试。
-
文档
React 官方教程
新版 React 文档，从组件和状态开始，边读边改示例。
-
文档
Vue 官方指南
Vue 官方中文指南，提供选项式和组合式两种写法对照。
-
互动
Svelte 交互教程
官方交互式教程，左边读讲解、右边改代码。
-
教程
Next.js Learn
用一个完整的项目讲路由、数据获取和部署。
-
文档
Vite 指南
现代前端构建工具的官方文档，也是了解工程化的好入口。
-
文档
Tailwind CSS 文档
原子化 CSS 框架的官方文档，写样式时常备查阅。
-
文档
Node.js Learn
官方学习路径，讲异步模型、模块和文件操作。
-
书
Pro Git 中文版
Git 官网提供的免费书，版本控制从入门到内部原理。
-
互动
Learn Git Branching
可视化闯关练习，一步步看清分支和合并在做什么。
-
文档
Playwright 文档
浏览器端到端测试工具的官方文档，可用来给页面写自动化验收。
浏览器、网络与性能
弄清页面如何被加载和渲染，再谈变快。
-
文档
MDN HTTP 指南
请求、响应、缓存、CORS 等 HTTP 主题的完整说明。
-
文档
浏览器的工作方式
讲解浏览器从解析到渲染的完整流程。
国内访问可能不稳定 -
教程
Learn Performance
从资源加载到图片和字体，系统讲解页面性能优化。
国内访问可能不稳定 -
文档
Chrome DevTools 文档
调试、网络分析和性能面板的官方用法。
国内访问可能不稳定 -
书
High Performance Browser Networking
可免费在线阅读，深入 TCP、TLS、HTTP/2 和 WebSocket。
-
报告
Web Almanac
HTTP Archive 的年度报告，用真实数据展示全球网页现状。
-
工具
PageSpeed Insights
输入网址即可获得性能评分和具体优化建议。
国内访问可能不稳定
安全与无障碍
让网站对所有人可用，也不给攻击者留口子。
-
文档
OWASP Top 10
最常见的十类 Web 安全风险，安全入门的标准清单。
-
互动
Web Security Academy
PortSwigger 的免费在线靶场，每种漏洞都有讲解和实验。
-
文档
MDN Web 安全
面向开发者的前端安全基础，涵盖 HTTPS、CSP、XSS 等。
-
教程
Learn Accessibility
结构化讲解无障碍设计，配代码示例和测试方法。
国内访问可能不稳定 -
清单
The A11Y Project
社区维护的无障碍文章和检查清单，上线前可以逐项对照。
-
文档
WCAG 标准概览
W3C 对网页内容无障碍指南的官方介绍。
设计与动手练习
看懂设计原则，再用真实题目把手练熟。
-
清单
Laws of UX
用图文讲解常见的交互设计定律，快速建立设计直觉。
-
文档
Material Design 3
Google 的设计系统，可以参考组件、颜色和动效规范。
-
教程
Fonts Knowledge
Google Fonts 的字体排印知识库，学会选字和排版。
国内访问可能不稳定 -
互动
Frontend Mentor
提供真实设计稿让你动手还原，很多题目免费。
-
工具
CodePen
在线写 HTML、CSS 和 JS 并实时预览，也可以看别人的作品。
-
互动
Exercism JavaScript
按概念分级的编程练习，部分题目可获得导师反馈。
-
互动
30 天 JavaScript 挑战
力扣的学习计划，每天一道题，巩固闭包、异步和数组操作。
没有找到符合条件的资料。