目录
0 国外开源项目roadmap
国外开源项目罗列了开发学习的roadmap：GitHub - kamranahmedse/developer-roadmap: Interactive roadmaps, guides and other educational content to help developers grow in their careers.
注册账号-->选择前端开发，即可看到学习界面：
1. 初识前端
前端是对用户直接交互的网站视觉和交互元素的开发。常说的前端三驾马车：
-
- HTML：提供网页结构
- CSS：提供网页样式和布局
- JavaScript：提供网页动态行为和交互性
作为前端开发人员的职责：负责创建网站的用户界面，以确保其美观且易于使用，并重点关注设计原则和用户体验。与设计师、后端开发人员和项目经理密切合作，以确保最终产品满足客户的需求并为最终用户提供最佳的体验。
2. 学习路线
初学者（0基础）：选择“Beginner Version”
想要提升个人前端开发能力：选择“Detailed Version”
3. 国内up整理的开源项目
GitHub - ObjTube/front-end-roadmap: Tell you how to learn front end development ~
由于国外开源项目集合了尽可能多的技术栈知识，有时候看起来可能会眼花缭乱，这里可以直接使用国内up主整理的开源项目进行分阶段学习
4. 代码编辑器
市面上比较好用的有WebStorm、Atom、Sublime、VS Code（推荐）
5. 前端详细学习路线（2020）
这里将学习路线分为了更详细的五个阶段，该五个阶段与项目中的阶段并不一一对应。
5.1. 阶段一：三驾马车
5.1.1. HTML+CSS
可以在菜鸟教程上很快学会HTML、CSS的使用
- HTML：掌握一些常用标签的使用方法即可
- CSS：比HTML稍微复杂一些，知识点更零碎一些；
除了需要掌握基本属性外，还要掌握如何灵活布局节点，这需要用到float定位和模型flex等
💡基础要扎实
不能因为自己CSS写的多烂或者界面有多难看，而拿起bootstrap或者类似的CSS框架直接使用。CSS没有真正学会，UI库的使用也还一知半解，这样会导致基础不扎实。
要坚持
目录
，可以随便找个网站去模拟，比如淘宝的首页可以帮助很快提升CSS的熟练度。
5.1.2. JavaScript（JS）
js是前端开发最常使用到的编程语言
- 基本语法
- 数据类型；
- 操作符；
- 变量；
- 函数声明；
- DOM编程；
- 如何使用Ajax发送网络请求；
- ……
- 推荐书籍
- 前者包含了大部分我们需要掌握的基础知识，可以反复阅读；
- 后者以写一个网页作为案例，教我们DOM编程，书里面的每一行代码我们都要自己敲一遍，写完后将有很大收获（等我敲完再来说到底多大收获哈哈）
这里关于JS中的DOM要单独出书，是因为JS中的大部分操作都与页面元素的操作的有关，那修改页面元素其实就是对DOM的各种增删改查，所以DOM编程对学好JS来说是十分重要的。
在这个阶段我们会接触到像JQuery、React、Vue这些能帮助我们更简单地去操作DOM的JS库，切记还是不要太着急去使用这些便捷手段，先掌握好基础更重要！！！
5.1.3. GitHub
当学习进行到这里，我们可以尝试创建一个自己的静态博客网站，并上传到GitHub上，同时初步了解到版本控制工具git的使用方法，git这个工具在我们之后的工作中基本每天都会用到。
到目前这个阶段为止，都是以“打好基础”为宗旨，不要着急去学抽象封装好的库和框架。
| 不要学 | 要狠狠学 |
| jQuery、Vue、React | DOM编程 |
| Bootstrap | CSS |
| TypeScript | JS基础、JS基本语法 |
💡不要跳步，多看多写，反复使用我们学会的东西
5.2. 阶段二：Node.JS+打包工具
到现在，写代码的效率还比较低，比如写了一个html，然后手动在html中引入了本地的css和js文件，每次代码更新都要手动刷新页面，这个时候我们可以尝试去提升我们的开发环境。
首先，我们要在本地安装nodejs：
brew install node成功安装node后，包管理工具npm也同时安装好了；
了解npm常用命令、package.json里面常用的几个属性值是干什么用的；
学会如何安装全局module包和本地module包；
npm install react
npm install webpack -g
在这个阶段我们很容易跑偏。
🈲 装好node后，打开node文档，各种教程文档视频一通乱学。🈲
很多人在刚接触前端的时候，学到node了，觉得可以写后端了，express、koa、mongodb、redis、mysql一通乱学，这个时候不建议这样，因为后面我们一般不经常用，长时间不使用又会忘掉，同时短时间内学不会又会有很大的挫败感，会导致我们在学习的时候失去动力，得不偿失。
💡对初学者来说，把Node.JS当作我们学习前端的工具使用，一开始没必要深入的去学习，了解如何起服务、如何用nodejs提供的fs包读取本地文件就差不多了；
💡如果能力足够强，可以去学习，会对整个后端以及数据库的运维流程有个比较完整的了解；
💡这里视频更推荐我们去了解打包工具Webpack
打开webpack的官网指南，按照官方的教程去学习，在学习过程中，如果会对其中的一些语法感到很陌生，可以配合阮一峰老师的es6教程一起学习，重点去看下module语法这一章节；webpack官网的指南看到"开发"这一章节就可以了，后面的章节比较复杂，也不一定用得到，后续需要的时候再回过头来看即可。
这时候，根据我们学到的webpack知识，我们可以尝试着升级一下我们的开发环境，最终的效果就是我们写的网页可以在localhost:8080被访问，js、css资源加载正常，并且当我们修改js或者css代码时，网页会动态刷新；
接着，我们可以在webpack中引入Sass或者Less预处理器，通过学习Sass和Less提升我们编写CSS的效率
5.3. 阶段三：库和框架（开始快乐喽）
在前两个阶段，我们会体会到DOM编程是多么痛苦的一件事情，为了实现一个效果往往需要写大量的DOM操作，为了提升开发效率，还得配置webpack，所以库和框架的出现就是为了解决这些问题。
库和框架把这些繁琐的逻辑进行抽象封装，提供简单易用的API给开发者，有的还会提供脚手架工具来帮助们，可以说框架就像一个初学者的贴身保姆，什么都帮你做好了，但是会导致基础不扎实的情况，所以前面两个阶段才会反复强盗一定要关注眼前，打好基础。当我们有了一定的基础能力之后，可以选择一个框架开始深入学习，比如vue、react、angular，这三者都是提供工具包帮助我们创建项目的工程，我们无需自己配置webpack，省去很多麻烦。
对于新手，更推荐去学习vue，一是比较容易入手，二是官方文档写的比较详细，中文文档翻译质量很高；
至于react，建议看英文文档；
在这个阶段，我们可能会在短时间内学会很多东西，严格来说react和vue并不是一个框架，它们更偏向于是一个操作视图UI的lib库，需要配合路由状态管理工具库等一起使用才称得上一个框架。
比如react有react-dom、react-router、redux；vue有vue-router、vuex。
除此以外，我们可能还会引入一些其他的库，比如组件库，像Ant Design、ElementUI等等。
所以在一个项目开发中，我们可能需要额外去学习很多的库，这个阶段的建议是一定要多读官方文档！！！！
💡平时在开发中遇到的大部分问题，通过阅读文档都能够解决掉；
多读！多想！多练！是掌握一个框架最快的方式；或者使用搜索引擎
5.4. 阶段三点五：查漏补缺
回到路线的开头，回顾我们学过的知识，查漏补缺，比如网络相关的知识、互联网是如何运作的、http、https、dns的工作原理、浏览器是如何渲染页面的、什么是重绘和重排、html如何做SEO搜索优化、JS的ES6语法、Promise的使用、set map的使用。这个阶段，推荐我们总结出自己的知识库、比如写博客、和别人做分享
5.5. 阶段四：提升知识的深度和广度（重在思考）
依然是回顾现有的技术栈，很多技术栈都有相应的替代品，它们之间的差异是什么，在什么情况下我们应该选择哪一个，又为什么是这个而不是其他的。比如在使用css预处理器时为什么选择使用sass，而不是使用less，postcss和另外两个又有什么区别呢？然后你通过阅读这三个技术各自的文档，了解他们之间的区别差异后，就能比较清晰的知道，在什么样的场景下，或者遇到什么样的问题时，需要使用哪一个技术，没必要说去掌握每个技术的语法和如何使用。
比如我们知道了postcss是一个可以通过编写js插件来转译样式的工具，假设需要实现一个把css里的px都转化rem的功能，sass和less是不能帮你实现的，那你就会想到是不是可以写一个postcss插件来实现这个功能呢。那这时就可以去深入了解postcss，通过阅读他的api文档来编码实现这个功能。css的新方案有了解吗？什么是styled Component?CSS module解决了css的什么问题？
比如webpack，rollup也是个打包工具，什么时候你会用rollup，而不用webpack呢？webpack在打包时会生成很多冗余的代码。而rollup则不会，所以rollup更适合打包一些lib包。那比较火热的snowpack和vite又是做什么的呢？和他们又有什么区别。
react、vue、angular之间又有什么区别，是选择函数式编程的redux做状态管理呢，还是用响应式编程的mobx？
当然，也还有更多前端技术等我们去探索，为了统一团队的编码和代码格式化风格，去学习使用ESLint和Prettier。为了更好的编程体验以及更少的代码错误，类型校验typescript和flow出现了。为了代码质量更可控，你学习使用js测试框架来写测试用例帮助你测试代码。为了可以使app加载更快并且支持离线，你开始学习什么是PWA，为了解决SPA的首屏渲染时长问题，你选择使用服务端渲染，比如react的nextjs，vue的nuxtjs。在移动端优先的时代，为了提供更好的用户体验，大公司都争先恐后的开始使用React native提供了基本和原生无差别的页面。接着微信小程序的推出，为了享受微信带来的流量红利，小程序开发变得火热，为了在多个平台都能运行自己项目，就引发了开发多套代码的问题，接着各种多端开发解决方案涌现，比如Taro, uni-app等，做的最好应该是基于React的Taro，可以将一套代码编译出可以在各种小程序、快应用、H5、React-Native上运行的代码。
关于typescript：前端圈内对ts的态度褒贬不一，有人说学习ts增加了学习成本，丢失了js弱类型的好处，有人用后说真香。但视频中还是极力推荐使用ts，不论是新项目的开发和老项目的重构上，ts带来的收益价值完全是大于学习成本的。
上述这一大堆技术，并不是让我们都去学，都去掌握。处于这个阶段一般情况来说，应该可能开始工作或者工作几年了，你可以根据自己所做的业务的场景去选择相应的技术，并深入的去学习。总结来说就是不要给自己的技术能力设限。去尽可能多的拓宽自己的视野，但也不能把所有技术的了解都只停留在表面，跟自己业务相关的技术需要深入去学习，不相关的你要尽可能的去拓宽。
5.6. 阶段五：熟练度（思维永远是最最最牛的）
并不是说我们按照这上面的路线学习了，我们就是前端大神，或者就能拿到高级前端或者资深前端这样的Title。路线上的技能是我们的硬实力，只要努力去学，基本都能学会，一般差距表现在我们对技能的熟练度上。
抽象思维：一是对代码的抽象，二是对业务的抽象。代码的抽象就是对自己写的代码有深入的思考，将常写的代码抽象封装成工具库，将复杂的代码逻辑抽象简单化，然后提供给团队使用。业务的抽象指的是寻找业务场景中的共性，或者一些机器可替代的工作，然后将其抽象成工具。这么说可能不太容易理解，举个例子：
公司经常需要在页面展示一些用户协议，用户协议还有很多变量，比如身份证，手机号。那之前的工作流程是这样的，产品给一个保存了协议文案的word文档，文档里标注了那些地方要动态注入用户的信息，然后前端把这个文档改成html，并添加各种变量，改完之后再和后端联调。可以看出，这个工作是多么的无趣，而隔一段时间就会新的用户协议要添加，每次添加都要花至少半个小时，这个需求排给谁，谁都不想做。那我们能开发个工具来解决这个问题吗，让前端可以不参与这项无聊的工作。那我们可以开发个可视化文档编辑界面，并在界面的旁边提前提供好需要使用到的变量。然后整个流程就是产品复制word文档上的内容，然后在编辑器上编辑，选择自己要注入的变量，最后点击提交上传即可。但整体的实现并没有说的这么简单，通过实现这个工具，提升了生产力。
视野：其实在第四个阶段讲解了技术相关的视野，你还需要去拓宽业务解决方案的视野，比如如何为你们公司搭建一个稳定高效的前端埋点收集系统？如何做一个自动化生成页面的系统？这些东西在业内都有成熟的解决方案，那他们是怎么做的？如何实现的？他们踩了哪些坑，他们的方案有什么缺陷？我能不能实现一个更好的？这都是需要去了解的。
影响力和人脉：影响力包括公司和业内的影响力，在公司有好的影响力，能有助你推动技术项目的实施和落地，公司也会更多的同事与你交流技术和方案，这样就进一步提升你的影响力。通过写博客，做开源项目来提升业内的影响力和人脉，这能带来更多的好处，方便找工作、与其他大牛交流互换经验。
尊重原创，以上内容主要源自B站视频，respect！
写在最后
由于实验室时间少，前端开发的方向可能能更快的帮助自己在秋招找工作，调研了一天，还是觉得这个up视频质量更高，就是年限久了点（2020），这个up主也不知为何，很久没更新了，想要以此路线学习的小伙伴（当然也包括我自己）也不知道适用与否，欢迎并且期待交流！所以决定通过将自己前端开发的学习日常都以博客的形式记录下来，还能和广大云coder能够随时交流，能指正更好~
扫一扫
4273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
