想学习前端，有哪些平台提供了免费的高质量教程？

下面分【权威文档/文字教程、交互式练习、国内视频、国外视频项目向、框架&官方资源、补充读物】，全部以免费高质量为主，附带适合人群和特点。 一、权威文档 & 文字教程（长期备查，必收藏） 1. MDN Web Docs（Mozilla） - 地址：developer.mozilla.org/zh-CN/docs/Learn_web_development- 特点：Web 标准权威，有完整中文学习路线、练习、自测；从零基础入门到进阶，HTML/CSS/JS、Web API 全覆盖，前端工程师常备参考；官方学习课程完全免费。- 适合：全阶段，遇到概念不清就回来查。2. javascript.info（现代 JavaScript 教程）- 特点：现代 JS 非常经典的免费教程，从基础到闭包、原型、异步、DOM，附带习题，内容持续更新，有中文版本；偏精读、吃透 JS 原理。- 适合：想把 JavaScript 学扎实的人。3. web.dev（Google）- 特点：谷歌出品，侧重现代 Web 最佳实践、性能、可访问性、PWA、现代布局，免费文章+实操案例。- 适合：进阶、工程化、页面优化。4. W3Schools / W3Cschool（编程狮）- 特点：示例简短、可在线运行，适合快速查阅小例子、速查语法；不适合当成唯一主线，但上手很方便。5. The Odin Project- 特点：完全免费、项目驱动的全栈路线，前端部分从 HTML/CSS/JS 到 React，引导你自己动手做项目，社区强，适合自律自学。6. 阮一峰的网络日志（ES6 入门教程）- 经典免费中文 ES6+ 读物，国内很多人学 ES6 的首选。 二、交互式在线课程（边学边敲，反馈即时） 1. freeCodeCamp（有中文站） - 地址：freecodecamp.org/chinese- 特点：非营利，全部课程、项目、证书免费；浏览器内直接写代码自动判题，路线完整：响应式网页、JS、前端库、项目实战，社区活跃 。- 适合：零基础，想要一条完整学习主线。2. Scrimba 免费板块- 特点：交互式录屏，播放时可以直接暂停、修改代码运行；免费部分包含 HTML/CSS、JS、React 课程，和 MDN 有合作课程。3. Codecademy 免费版 - 特点：交互式练习，即时反馈，适合入门；进阶内容多在付费 Pro。 三、国内视频平台（B站 + 机构公开课，中文友好） 1. 哔哩哔哩 B 站- 黑马程序员（pink 老师等）：HTML/CSS、JS、Vue、TS 整套免费课，面向零基础，配套案例、项目多，国内自学非常主流 。- 尚硅谷：JS 高级、Vue3、React、工程化、项目实战视频质量高，免费放出大量授课视频 。- 还有很多优质独立 UP、技术分享、源码解析、面试专题；缺点是需要自己甄别版本是否过时。2. 机构官网公开教程：黑马、尚硅谷等官网也放出配套免费路线图、课件、视频入口 。 四、国外优质免费课程平台 - Full Stack Open（赫尔辛基大学）：免费、现代前端（React、TS、Node），工程化导向，适合进阶。- YouTube：freeCodeCamp 官方频道、Traversy Media 等大量免费长视频实战课。 五、框架 & 生态官方文档（学框架第一站） Vue、React、TypeScript、Vite、Tailwind、Element Plus、Vant 等官方文档本身就是最好的免费教程，一般自带快速上手、示例、Playground；优先看官方文档，而不是二手教程。 六、补充资源 - 掘金、思否：大量免费前端文章、实战、踩坑、源码解析，适合碎片化补知识点。- 腾讯 AlloyTeam、凹凸实验室、奇舞团等大厂前端团队博客，适合进阶看工程实践。 简单搭配建议（自学路线组合） - 零基础主线：B 站黑马 / freeCodeCamp 学主线 + MDN 随时查 + javascript.info 啃 JS- 进阶：官方框架文档 + web.dev + The Odin Project / Full Stack Open 做项目- 避坑提醒：别只看视频不动手；视频适合理解，MDN / 官方文档才是权威标准。

本作品采用《CC 协议》，转载必须注明作者和本文链接