我推荐的前端学习路线图
网上有几个浏览量很高的前端学习路线图文章:
https://objtube.github.io/front-end-roadmap/#/ (opens in a new tab)
https://web.qianguyihao.com/ (opens in a new tab)
这些路线图访问量很高，被广泛收藏，但是这些文章推荐的学习内容太多了，一年也学不完，十分劝退。
以下是我总结的最短路径的前端学习路线：
前端学习有很多种路径，但是大体上可以分成 3 个阶段：
- 前端基础：Javascript + HTML + CSS。 这三者合称 web 三件套，是现代网页开发的基础。 这部分内容是无论你选择什么技术栈，都必须要学的。 HTML 和 CSS 只需要用 1-2 天时间快速学习，因为后面会有其他办法可以替代手写纯原生的 HTML 和 CSS 的工作。
JS 免费教程推荐： https://www.learn-js.org/ (opens in a new tab)
JS 付费教程推荐： https://learnjavascript.online/ (opens in a new tab)
HTML 和 CSS 随便搜个教程快速看下就可以了，都一样。 快速看完原生的 CSS 了解原理之后，可以学习下 Tailwindcss： https://tailwindcss.com/ (opens in a new tab)
Tailwindcss 是一种原子化的的 CSS 框架，让写 CSS 这个前端开发中最痛苦的事情变得非常简单。
- 学习一个前端框架：React / Vue / Angular / Svelte 四选其一。 其中前 3 个是三大主流 Web 开发框架，第 4 个是近几年新兴框架。
三大主流框架中，React 是世界范围内以及国内几家大厂中使用最多的框架，占据了 Web 开发框架 90%以上的市场份额。React 上手难度大于 Vue，但是生态最繁荣，而且 React 贴近原生 JS 的语法写起来最舒服。
React 免费教程推荐 react 的官方文档： https://react.dev/learn (opens in a new tab)
React 付费教程推荐： https://react-tutorial.app/ (opens in a new tab)
这个付费教程提供一个交互式的学习环境，每一章节的内容都分为：“教学文档+题目+动手写代码+答案检查”四个部分，教程的进度设置得非常合理，使得 React 陡峭的学习曲线大大平缓，我个人是靠这个教程学会了 React。
学习 React 一般要同时学 NextJS，因为 React 严格来说不是一个框架，而是一个 Library，需要选择一个基于 React 的框架才能用来开发网站： https://nextjs.org/ (opens in a new tab)
学完 React 之后学 NextJS 会很容易，1-2 天就可以看完了。
Vue 是国内（除了几家大厂外）使用最多的框架，是国人开发者开发的。 Svelte 近几年最火的新框架，非常简单易学，但是现阶段生态比较小，会得人也少。HuggingFace 就是基于 Svelte 和 Tailwindcss 开发的。 关于 Vue 和 Svelte 的最好的教程都是他们的官方文档。 Angular 我了解较少，暂不推荐。
- 学习前段工程化。 本来这个阶段是需要学习很多杂七杂八的东西的，例如打包构建工具、网站部署等等，但是现在有一个最省心的选项：vercel.com，它可以帮忙解决掉所有的杂活，让你的代码一键上传后直接变成一个对外发布的网站。 关于 vercel，最好的学习资源是他们的官方文档： https://vercel.com/docs (opens in a new tab)