B 站视频版：点击传送

是不是梦想了好久，成为叱诧风云，挥手成页面的前端大神？那你来对地方了，这篇文章整理了成为前端大神的必备技能。先从初级前端工程师所需的技能开始，然后一路升级到高级工程师该掌握的技能，层层相扣，让大家在工作中能游刃有余。最后附上我自己是如何从一个后端工程师转成了前端工程师^^。看完这篇文章，照着这个方向走，一定能成为别人羡慕已久的大神！

俗话说知己知彼百战不殆，要成为一名前端大神，首先知道它是做什么的。单纯从工作角度看，无非就是写写前端样式，连接下后台 api，解析解析数据，然后显示给用户，核心逻辑是这样没错，只是这中间掺杂着无数个边边角角的问题，比如框架选择、性能优化、兼容性调整、工程化等等。不过呢，这些并不需要一次性掌握，随着一次一次完成工作任务，解决 bug，这些自然而然就学会了~

在正式开始之前，咱们先把心态放平，就像玩游戏，游戏满级也不是一天两天的事，满级之后也才是一个新的开始。。。无尽的追求完美~。时间上，掌握前端工程师的基本技能大概需要 4 个月到 1 年的时间（看自己的意志力和上进心），之后就是在工作实践中不断的提升自己，时刻关注业界新闻，保持在科技的最前沿。工作是一个长期的事情，咱们静下心来慢慢学。

#完整技能大图

先来看 github 上一大神制作的路线图：



https://roadmap.sh/frontend

#核心技能

 

好了，相信你已经开始下定决心要成为前端大神了，那咱们第一步就是把前端的核心装备拿下，它们分别是 html, css 和 JavaScript。前端的初衷是开发网页来让其他人看的，可以向全世界分享信息，直到最近几年才诞生了利用这些核心知识去开发移动 APP、小程序等多终端前端应用的工具，学好核心是前端工程师必备的素养。下边就是核心技能的简介：

#HTML

HTML 是用来编写网页代码结构的，它有一系列的标签用于显示不同的页面元素，比如用 <a/> 显示一个超链接，<img/> 显示一张图片，就跟写一个 word 文档一样，只是单纯用 html 只能写内容，不能进行排版和美化样式，如果让网页变得漂亮，需要 CSS。

学习 HTML ：指南与教程

书籍：Web 开发经典丛书：HTML & CSS 设计与构建网站

#CSS

CSS 是用来美化 HTML 编写的页面的，通过一些语法选择特定的 html 标签，然后用一些属性来给它们添加样式，比如文字颜色，背景，位置，边距，定位等等，还可以添加动画效果让页面显示的栩栩如生~。重点要掌握 CSS 的盒子模型、常用的布局方式，比如 flex、grid 等。

CSS - 设计 web

书籍：CSS 权威指南（第四版）（上下册）

#JavaScript

在写完 html、css 之后，咱们就可以写漂亮的页面了，那么接下来就是需要学习 JavaScript，让网页能和人进行互动，比如点击按钮弹出个对话框，处理用户输入的表单信息，添加一些复杂的动画，使用 ajax 加载远程数据等等。它可以直接操作 HTML 元素，给网页开发提供了无限可能~这里咱们一定要把 JavaScript 基础语法掌握扎实，可以观看我 B 站上的 JavaScript 视频：

JavaScript 基础教程 | 2020 年最新

JavaScript — 用户端动态脚本

书籍：JavaScript 权威指南（第 6 版）

书籍：Eloquent JavaScript 3rd edition (包括 HTTP)

#网络基础

现在咱们可以做成型的网站了，那咱们该如何让全世界的人看到咱们的杰作呢？那这里网络基础就派上用场了，不需要精通，只需要掌握几个基本概念就好了。

#域名

访问网站咱们都知道需要使用 url (网址)，比如 www.baidu.com，这个 baidu.com 就是域名，域名可以从域名提供商购买，比如阿里云。在购买域名之后要通过 DNS 解析服务把它对应到一台服务器的 IP 地址上。

什么是域名？

阿里云

#服务器

服务器就是一台安装了服务器程序的电脑。用户用域名访问一个网站时，会有 DNS 解析服务把域名解析成 IP，再通过 IP 找到相应的服务器，服务器程序就把网站内容传递给用户的浏览器。咱们的网站就部署在服务器上，它也是从阿里云之类的提供商购买。

阿里云

#Linux

服务器的操作系统一般是 linux，它可以没有用户界面，可以节省很多 CPU 和内存资源，这样就要求咱们掌握一些常用命令，比如创建文件，切换目录，复制和移动文件，显示文件列表等。另外访问服务器常用的工具是 SSH 和 FTP，咱们需要通过这几个工具来从自己的电脑连接到远程的服务器，然后安装服务器程序和上传网站程序。

书籍：鸟哥的 Linux 私房菜 基础学习篇(第 4 版)

#服务器程序

常用的服务器程序有 apache、nginx，它们都是基于 HTTP 协议的，有了服务器程序，网站文件比如 html 页面才能发送到用户的浏览器上。

Nginx 中文文档

apache 中文文档

#HTTP 协议

协议好比如说医生开药方，写的龙飞凤舞，但是药房药师居然都看得懂~这个可以说他们都有固定套路来理解对方~那么在计算机领域，协议就是电脑之间用来交换数据的规则。HTTP 协议是用来在网络上交换和传输数据的，比如说咱们的网站 html、css 和 js 就是通过这个 http 协议来发送到浏览器的。

HTTP 概述

#进阶技能

 

上边核心技能都掌握了的话，你就已经超过一半的前端工程师了，接下来就是成长为更高级一些的前端工程师，这里的目的是除了理解一些高级的概念之外，还要提高开发效率，也就是用到所谓的框架。

#响应式布局

现在手机和平板差不多要比电脑都流行了，所以一个网站要适应不同尺寸的屏幕，有这种特性的网站就叫做响应式网站。实现响应式主要就是通过 css 的 media query 针对不同的屏幕宽度，编写不同的 CSS 样式。

响应式 Web 设计

#兼容性调整

网站需要在不同的操作系统和浏览器下都要保持一致。对于 CSS，可以使用 css hack 来对不同的浏览器加载不同的样式。 对于 JavaScript，则可以使用 Babel 等转化工具，把新的 JS 语法转换成旧的，或者使用 polyfill 加上浏览器不支持的语法。

跨浏览器测试介绍

#UI 框架

UI 框架提供了页面的基本 UI 样式和布局系统，比如按钮、对话框、轮播图，省了自己去开发，常用的有 Boostrap, Semantic UI， Tailwind CSS。

Bootstrap

Semantic UI

Tailwind CSS

#SEO

SEO 全称是 Search Engine Optimization，搜索引擎优化。咱们常见的百度、谷歌这些搜索引擎会定期爬取线上的网站内容，然后进行收录，网站内容质量优秀、结构良好、访问量大的还会排名比较靠前。为了给自己的网站增加曝光量，这就需要针对搜索引擎给咱们的网站添加一些内容，比如关键字。

如何带着 SEO 的思维将 MDN 的 Web 文档写的更符合搜索引擎展现

SEO 基础知识教程

#Node.js、npm / yarn

因为 Node.js 的出现，JavaScript 的开发可以脱离浏览器了，这样就产生了好多借助 Node.js 来写前端代码的方式，然后用相应的打包工具去打包成浏览器可用的代码。这样的好处是，咱们可以充分利用 node.js 的包管理工具来方便开发，比如使用 npm 或者 yarn 管理项目的依赖。

Node.js

npm

yarn

书籍：Node.js 实战 第 2 版

#CSS 预编译

咱们在写 CSS 的时候可能一段代码要重复好多次，写一连串的选择器，重复的属性组合等等。这时 CSS 预编译工具就派上用场了，比如 SASS、LESS，它们支持 CSS 选择器嵌套、定义变量、Mixins、函数、继承等等。

SASS

LESS

#自动化工具

自动化工具有 grunt、gulp 等，可以监控文件变动，或者做一些自动化操作，比如编译 SASS 或 LESS 的代码为 CSS 等。

gulp

grunt

#React, Vue, Angular

这里就不得不提当下十分热门的前端开发框架了，React、Vue、Angular 三大件。它们都提供组件化开发的方式，这就让前端开发模式发生了巨大的变化，以往以页面为核心现在转为了以组件为核心，有了这些组件可以方便的在不页面进行复用。另外基于状态的数据管理，也让改变组件状态变得十分简单。这三个框架可以都学，但是工作中基本上只会用到一个，深入一个就可以了。至于它们的 UI 框架也可以根据工作的需要去学习比如 ant design、element UI 等。

React

Vue

Angular

Ant Design

Element UI

#模块化 CSS

因为 React 等组件化工程的出现，CSS 分散在不同的组件中，很容易因为命名冲突而导致样式被覆盖，模块化的 CSS 开发方式通过使用 css modules， 或者 styled-components (css-in-js 方式) 工具能很好的避免这些问题，它们也提供了其它类似 SASS/LESS 的功能。

CSS Modules

styled-components

#工程化工具

所谓工程化的工具，也就是打包工具，前端项目的各种 JS、SASS 源代码可能分散的不同的地方，利用打包工具，比如 webpack、parcel，可以把它们打包成一个单一的 js 和 css 文件，它们支持按需打包，用到的代码才会打包到最终产品上，没用到的则不会。另外图片等静态资源也可以指定规则进行打包。

webpack

parcel

#测试工具

没有人想要不健壮的代码，在改动一个地方之后引起全局崩塌~，咱们写好的组件需要进行详尽的测试才能确保不出问题，另外也方便咱们工程师节省时间，因为只要添加的新功能保证测试结果还是正常，那么就不需要再人工去测试了。常用的 UI 测试工具有 jest, enzyme 等等。

Jest

Enzyme

Puppeteer

#高级技能

 

在把编写网页的技能掌握熟练以后，就要从多端开始拓展自己的技能了，另外还要深入已经掌握的技能。

#TypeScript

TypeScript 是微软编写的一款带类型的 JavaScript 语言，它的代码可以编译成普通的 JavaScript，但是编写的时候支持强类型，并且支持完全面向对象的形式。它的好处在于带有了类型之后，代码更容易维护，适合大型项目的开发。

TypeScript

#移动开发

移动开发包括移动的页面 H5 开发、小程序和移动 APP 开发，好在这些有统一的开发平台，使用 React 或者 Vue 就可以进行一次开发，多平台使用。React 生态的有开发移动 APP 的 React Native，开发多端平台的 taro。 Vue 有多端开发的 uni-app。

React Native

Taro

Uni-App

#桌面开发

桌面应用到现在还是有用武之地的，比如音乐软件，聊天软件，写作软件等等，这些也可以用前端技术开发，具体的工具有 eletron、proton native 等等。

Electron

Proton Native

#静态网站生成工具

静态网站因为是纯 html、css 和 JavaScript 网站，所以拥有最快的速度、对 SEO 搜索引擎优化友好，最适合用于数据不常变动的展示、博客类的网站的搭建，常用的工具有 hexo, gatsby, docusaurus 等。

Hexo

Gatsby

Docusaurus

#SSR（服务端渲染）

如果使用 React、Vue 等前端框架开发网站，那么最终的页面源代码是没有 html 的，因为它们是用 JavaScript 去动态生成 html 代码，这样对 SEO 很不利，不过有了 serer side rendering，服务端渲染技术，就可以解决这个问题，它是把 JavaScript 生成好 HTML 之后，再把页面发送给浏览器。常用的有 react 系的 next.js，vue 系的 nuxt.js。

Next.js

Nuxt.js

#GraphQL

GraphQL 是一种查询语言，跟普通的 restful 结构不一样，它是按照类型来组织数据的，不同的类型之间也会有对应关系，就像数据一样，前端开发者根据自己的需要编写 graphql 语句来按需查询想要的数据，它的这种模式非常适合 React 这种项目结构的开发。

GraphQL

Apollo

Relay

#性能优化

性能优化的概念比较广泛，而且根据应用的用户量、用户类别而不同。总体来说就是提高页面首次加载的时间、动画执行的效率、事件响应的效率。这些可以通过优化代码结构、文件大小、DNS 缓存、lazy loading 等来实现。

Web 性能

书籍：Web 性能权威指南

#安全

安全也是一个宽泛的概念，要了解 CORS（跨域资源共享）, XSS（跨站脚本攻击）, CSRF（跨站请求伪造） 等常见安全问题，也要了解 HTTPS 等安全协议，要尽量以周全的形式考虑，不要相信任何用户的输入，严格检查需要接收用户输入的地方。

Web 安全

书籍：Web 安全测试

#工作与团队技能

工作与团队技能是在工作中所必备的，无论是初级还是高级前端工程师，这些只要在工作遇到了，就都需要掌握。

#Git

Git 是一个分布式的代码协作工具，几乎所有的公司都在用。Github 是 git 的一个远程仓库，咱们可以把代码发布到 github 上，既可以作为公开的向全世界展示自己的代码、进行合作，也可以作为私有的只限自己或者公司内部使用。

Git

Github

书籍：精通 Git 第 2 版

#Docker

Docker 是一种新的虚拟化技术，介于虚拟机和操作系统之间，它所用的资源少，并且能自动化管理镜像的运行环境和集群。因为前后端开发的分离的方式，大型的前端应用也会部署到 Docker 上。

Docker

#CI

CI，持续集成，是一个自动化的部署过程，开发人员只需要改动代码，提交到 git 仓库，CI 系统会抓取代码进行打包部署并发布，节省了人工运维的时间。

Jenkins

#ESLint 和 Prettier

代码合作经常会有风格和规范不统一的情况。ESLint 除了可以检查语法错误外，还可以定义开发规范，比如缩进字符的数量、命名方式等，而 prettier 则可以根据一些规范自动格式化代码。

EsLint

#最新技术

#WebAssembly

Web Assembly 是浏览器新支持的编程语言，用于辅助 JavaScript。确切的说，它不是一个编程语言，咱们可以用它的编译器编译其它语言，用来编写更强大的功能，它目前支持 c++和 rust

Web Assembly

#Web Components

Web Components 是类似 React、Vue 开发的方式，但是是 JS 原生支持的方式，不再需要依赖额外的库。它的核心概念有 Custom elements（自定义元素），Shadow DOM（影子 DOM），HTML templates（HTML 模板）。

Web Components

#最佳实践

在前端开发过程中有一些最佳实践需要了解，比如 JavaScript 的设计模式、组件设计原则、代码结构等。

JavaScript 设计模式

#持续进步

在掌握了上边所有技能之后~咱们等级就算满级了，现在就是真正的开始了，要不断精进自己的技能。前端技术的发展相比其它技术要快的多，咱们要时常关注一些前端新闻还有业界大佬的博客或微博，自己主动去搜索一些新的前端库或者设计模式，然后应用到工作中去，这样才不至于落后。另外，因为好多技术都是外国人写的，所以要想得到第一手且最准确的消息，一定要把英语学好，一些包和工具的官方文档就算是靠着翻译也要把它们看懂，相信我，过不了几天，你会发现需要查的词越来越少，阅读速度也越来越快。

#个人经历

我在上学的时候学的是 Java 开发，那时候是前后端整体开发，前端主要就是 HTML，CSS 和 jQuery。我在找到的第一份 Java 开发的工作时就被迫见识到了前后端半分离的开发方式，那时候是 2010 年，前端库用的是 ExtJS，后端 Java web 开发框架用的是 struts2，来提供 JSON 数据，当时也是摸索了一阵子才彻底弄明白这个开发过程。后来在做自由职业的时候，又用 PHP 做过几个全栈的网站，前端那时候接触了 Bootstrap 框架，然后又摸索跨浏览器兼容性调整，知道了哪些 CSS 属性只有在哪个浏览器下才能生效。那个时候是 2012 年左右，html5 和 css3 已经开始流行了，然后我就把几个新出来的、觉得好玩的标签写了写，比如<video /> 和 <audio />。再后来就又在业余时间接触了 Node.js，当时也不懂它是个什么玩意，所以就没咋去了解。

直到 2016 年，去美国读研，室友同学学了 web 开发，然后我才体验到了前端已经发生了天翻地覆的变化，于是趁着暑假，把 Node.js 这个东西搞明白了，无非就是个运行环境。。。然后看了下网上的意见，觉得 vue.js 在国内用的多，所以就看 vue 的官方文档开始学习，看完基础之后，就做了一个实战项目，模仿了一下网易云音乐的 UI，当时 CSS flexbox 布局已经定型了，我就用它来对页面上的元素进行布局。后来发现 web 端不好选取本地的音乐进行播放，而又当时室友正在学 eletron，就正好一想可以用它练习一下，就把它做成了桌面版的，用了 howler.js 添加了音乐播放、快进、快退功能。再后来又异想天开，把配色改了改，改的也不太好看，接着开学了就作罢了。

回国之后，因为我在美国主修的还是云计算和企业软件开发，所以想找找后端开发的工作，但是后端所用到的库也都发生了变化，不过还好有学分布式系统，有丰富的理论，我觉得面试肯定没问题，，实际情况是到处碰灰，面试的看我没相关工作经验，框架也没用过，都表现出特别不懈一顾的厌恶情绪，好嘛，我也不是没志气的人，话不投机半句多，走人~后来一想在学校的时候对前端还是有兴趣的，一番搜索调查后，我又把目光描向了 React，看了几天官方文档之后就去面试。。。我这里十分感谢招我进去的两位经理大佬了，给了我机会去学习，去成长。这是 2018 年 7 月，我转型成了前端工程师。公司只有我一个前端 web 端，入职当天下午就开始给我分配任务，开发一个影响力榜单申报系统，超多表单，超多验证规则，要 4 周也就是一个月的时间内完成，压力也是蛮大的，当时头儿让我用 dva.js 来开发，当时听也没听过，就去它的官方网站看了看，基本是基于 model 形式的去管理状态，不过后来发现这种状态管理起来也还真是费劲，经过一番折腾，外加周末也加加班，这个项目算是按时搞定了，期间有无数的 bug 和需求变动，经过这些我对 React 组件化开发的方式有了彻底的认识。

后来第二个项目是做一个中台项目，因为有技术大佬实现了 GraphQL 接口，我趁机体验了一把 React 与 GraphQL 的结合，那真是相当的爽，再也不用手动管理 API 请求和请求的状态了。我在谷歌上搜索了一下 React 连接 GraphQL 的库，一个是 Relay，一个是 apollo，对比了一下两者的官网文档上的教程，觉得 Apollo 比较好用，就按着文档学起来，再结合着 GraphQL 的官方文档看看它的结构定义，然后把这些慢慢的用到了项目里。另外，当时关注 React 新闻发现 React Alpha 版出了 hooks，我想这个系统既然也是内部用，就用了这个版本，参考 React Hooks 官方文档，写了点例子，又发现不少问题谷歌 StackOverlow 等等一通查，终于把它搞明白了，之后在项目里发现真是解放了。。。再也不用定义 class 了（除了异常捕捉组件），逻辑和表现也可以分离了，效率大大的提高。

2019 年做了鹰眼投研这个老板的项目，相当大的一个项目，大概有 40-50 个页面，100 多个组件，由我主领，技术总监和一个合作同事参与共同开发的，耗时大概 3 个月，期间我搜罗、接触了形形色色的前端库，项目的样式是基于一个 css-in-js 库，styled-components 开发的，它可以把组件连同样式一起组件化，我还用 Apollo Server 写了 GraphQL 的 server 方便接口调用，又用了 ECharts 配置大量的图表，有柱状图、线图、热力图、中国地图...，还用 websocket 实现了聊天的客户端，唯一没有用到的就是 redux，这个玩意对于这种多页的大型应用来说，并不实用，一是模板代码太多，二是没有太多需要保存全局状态的地方。而对于这种大型项目，使用 React Hooks 构建可复用的组件和逻辑非常适合，在这个项目里好多页面都用到了筛选表格，我把筛选的逻辑写到了 hooks 里边，然后定义了几种通用的筛选样式，让每个有不同筛选条件的页面只需要按需组合就好，分页也是一样的道理，所有带分页的组件都是使用分页 hooks 实现的，还有其它一些 hooks，比如请求后端数据等。这个项目中用到了几乎这个路线中所有提到的技术，从中学到了不少的东西。

这些就是我个人的一些成长经历，我自己擅长的可能就是对一个网站进行组件化分析和拆解这样，争取做到一行代码实现一个页面这种效果。

#总结

这篇文章尽可能详细的列举了前端工程师该掌握的技能，但是根据工作要求的不同，一些细节的框架可能没有提到，不过相信咱们在经过这么久的学习、打怪升级之后，那些个小框架都不在话下。有了良好的基础，以后咱们在工作中都能节节高升~走向人生巅峰！

版权声明：本文为博主原创文章，未经博主允许不得转载。转载请注明出处：https://blog.csdn.net/weixin_44222492/article/details/95676818 。
前端综合体系
链接按ctrl打开可使用新窗口打开

若链接无法打开，则可以通过右键选择在新标签页中打开
1. 知识技能类


前端技能汇总


2. 学习路线类


前端学习路线1 —（阿里云大学）


前端学习路线2 —（黑马程序员）


前端学习路线3 —（尚硅谷） —课程大纲


前端学习路线4 —（尚学堂） —课程大纲


前端学习路线5 —（千峰）—（学习路线图）


前端学习路线6 —（极客学院）


前端学习路线7 —（谷粒学院）


前端学习路线8 —（珠峰培训）


3. 系列教程
3.1 黑马程序员系列

Step 01 初级阶段



No. 1. 开发工具介绍及HTML+CSS入门


No. 2. HTML+CSS+BootsStrap基础教程 +项目实战


（1）前端基础零基础入门教程html+css

（3）HTML5介绍

（4）bootstrap基础

（5）HTML+CSS项目实战之梅兰商城==

（6）HTML+CSS项目实战之黑马程序员移动web开发


No. 3. HTML5+CSS3教程


（1）最全面的Html5+css3教程

（2）HTML5+CSS3教程

（2）HTML5+CSS3+京东项目实战




HTML5+CSS3+京东项目实战
课程地址




黑马程序员官网视频下载
https://yun.itheima.com/course/267.html


从零开始玩转前端与移动开发（第一阶段HTML5）
https://www.bilibili.com/video/av15241731


从零开始玩转前端与移动开发（第二阶段CSS3）
https://www.bilibili.com/video/av15269197


从零开始玩转前端与移动开发（第三阶段京东项目实战）
https://www.bilibili.com/video/av15349705




No. 4. Javascript教程


（1）JavaScript从零基础入门到精通

（2）Javascript基础加强

（3）JavaScript核心 DOM BOM操作

（3）JavaScript DOM+BOM（知识精讲+贪吃蛇等项目案例）

（4）Javascript高级系列教程




Javascript高级系列教程
课程地址




JS高级系列视频教程1
https://www.bilibili.com/video/av8029730


JS高级系列视频教程2
https://www.bilibili.com/video/av8030536


JS高级系列视频教程3
https://www.bilibili.com/video/av8030827


JS高级系列视频教程4
https://www.bilibili.com/video/av8045992


JS高级系列视频教程5
https://www.bilibili.com/video/av8046034



Step 02 中级课程



No. 5. Jquery教程


（1）从Javascript DOM到Jquery

WEB APIs由浅入深掌握WEB特效开发—（黑马官网视频下载）
WEB APIs由浅入深掌握WEB特效开发

（2）JQuery基础教程

（3）JQuery进阶实用教程

jquery进阶实用教程 —（黑马官网下载） 
jquery进阶实用教程

（4）jQuery网页开发案例精讲+bootstrap

jQuery网页开发案例精讲—（黑马官网视频下载）
jQuery网页开发案例精讲

（5）利用jQuery+Ajax+HighCharts打造项目图表


No. 6. 移动WEB开发


（1）移动web基础教程

（2）移动web进阶教程

（3）Web前端移动开发项目实战之乐淘移动商城项目


No. 7.版本控制工具


（1）玩转Github开发

（2）Git零基础入门到实战详解

（2）SVN视频教程


No. 8.后台管理技术


（1）Nodejs教程精讲

（2）NodeJS精讲课

（3）4天精通NodeJS教程

（4）MongoDB基础入门到高级进阶

（4）2018全新php教程PHP零基础通关宝典

（5）PHP后台开发教程

（6）php进阶教程之数据库编程


No. 9. 前后端交互


（1）Ajax从零入门到精通




Ajax从零入门到精通
课程地址




黑马程序员官网视频下载
https://yun.itheima.com/course/283.html


Ajax从零入门到精通（part1）
https://www.bilibili.com/video/av15657082


Ajax从零入门到精通（part 2 完结
https://www.bilibili.com/video/av15866060


（3）2018版Ajax教程精讲

Step 03 高级课程



No. 10. ReactJs精品教程


No. 11. Vue


（1）2018年Vue.js深入浅出教程

（2）2小时玩转Vue单元测试

（3）0基础5天成为微信小程序运营大咖

0基础5天成为微信小程序运营大咖 —（黑马官方视频下载）
0基础5天成为微信小程序运营大咖

（4）一天教你打造企业级微信小程序
一天教你打造企业级微信小程序 —（黑马官方视频下载）
28节课快速玩转微信小程序

3.2 尚硅谷
2020Web前端学习路线

Step 01 前端核心基础



No. 1. HTML +CSS核心知识


（1）HTML & CSS 核心基础教程

（2）css2.1

（3）IDEA视频教程


No. 2. JavaScript基础


（1）JavaScript从入门到精通

（2）JavaScript DOM编程视频教程

Step02. 前端高级阶段



No. 3. HTML5+CSS3


（1）HTML5核心技术

（2）HTML5实战

（3）HTML5视频_CSS3

（4）前端_Less


No. 4. JQuery


（1）JQuery视频教程

（2）锋利的jQuery—配套书籍《锋利的JQuery》

（3）BootStrap

（4）移动端类JQuery库Zepto


No. 5. 版本控制工具


（1）尚硅谷_Git&GitHub视频

（2）Git教程(12h带你深入掌握git)

（3）工程师第1步，2小时玩转SVN

（3）SVN高级视频教程

Step03. 后台技术阶段



No. 6. 服务器端


（1）NodeJS核心技术视频


No. 7. 数据库


（1）MongoDB夯实基础视频

（2）MySQL核心技术

（3）MySQL高级视频

（4）ORACLE、SQL、PLSQL 视频教程

Step04. 前后端交互阶段



No. 8. Ajax


（1）Ajax视频教程

Step05. JavaScript高级阶段



No. 9. JavaScript高级


（1）JavaScript高级视频教程


No. 10. 模块化


（1）JS模块化说明视频


No. 11. ECMAScript


（1）ECMAScript视频


No. 12. 构建工具


（1）自动化构建工具Grunt

（2）自动化构建工具Gulp

（3）自动化构建工具webpack

Step06. 前端新型Web框架阶段



No. 13. AngularJS


（1）AngularJS视频


No. 14. React


（1）React视频


No. 15. Vue


（1）Vue核心技术

官网视频下载



Mo. 16. Nginx上手


（1）Nginx教程(nginx快速上手)

Step07. 跨平台开发阶段



No. 17. 微信小程序及公众号


（1）微信小程序项目实战

（2）mpVue视频教程

官网视频下载

（2）微信公众号视频

Step08. 跨平台开发阶段


No. 18. 自定义Promise

（1）尚硅谷Promise教程
No. 19. 自定义Axios

（2）axios核心技术


Step09. 项目实例

（1）硅谷外卖

官网资料下载
在线视频播放

（2）谷粒音乐

（3）硅谷直聘

官网资料下载
在线视频播放

（4）微信小程序

（5）微信公众号

（6）谷粒后台
3.3 尚学堂系列
1. 网页开发和设计教程全解
2. 前端全套课程
3. 全套IDEA视频教程
4. UI设计
5. 数据库开发全套精讲视频课程
6. PHP基础与Ajax网络请求
7. 微信小程序快速开发
3.4 千峰教育系列
前端900集
Web前端 930集（学完可就业/2019版）

前端基础阶段



No. 1. HTML+CSS核心知识


（1） Web前端小白入门必看预习视频

（2）2019千锋Web前端入门教程+学习资料

（3） 2019Web前端从入门到精通（HTML+CSS全套）

（4）2019Web前端全套视频教程

（5）Html和CSS基础教程

（6） 页面布局经典案例视频


No. 2. JavaScript基础


（1）2020版JavaScript基础入门教程全集

（2）JavaScript基础教程

（3）JavaScript全套视频~全套资料

（4）JavaScript从入门到精通（小白必看！）

（4）JavaScript经典案例视频

Step02. 前端高级阶段



No. 3. HTML5+CSS3


（1）html5第一阶段教程：课程体系解读

（2）h5教程第二阶段：微案例讲解


No. 4. JQuery


（1）jQuery全套实战教程

（2）数据可视化

（3）（JavaScript+jQuery+项目）全套合集2020


No. 5. 版本控制工具


（1）一天学会SVN视频教程

（2）一天学会Git视频教程

（3）2020年Git全集

Step03. 后台技术阶段



No. 6. 服务器端


（1）2020版Node.JS入门到大神

（2）2019最新nodeJS从入门到大神

（3）node.js从入门到精通

（4）（Node.JS+Node项目）全套合集，精华版

（5） 2019GraphQL入门到精通


No. 7. PHP


（1）PHP从入门到精通（小白必看）

（2）史上最经典最易入门的php基础视频教程

（3）PHP语法与数据库全套视频

（4）PHP高级实战教程全集

Step04. 前后端交互阶段



No. 8. 接口


（1）2019接口测试技术精讲

Step05. JavaScript高级阶段



No. 8. Typescript


（1）2020千锋TypeScript全套视频


No. 9. 模块化


（1）模块化requireJS


No. 10. 构建工具


（1）2019最新Webpack4.0教程

Step06. 前端新型Web框架阶段

Web前端框架课程视频


No. 11. AngularJS


（1）Angular4从入门到实战


No. 12. React


（1）React框架从入门到实战

（2）2020版React入门到大神

（2）最全的react视频

（3）2019React教程+实战全集

（4）2019React服务器端渲染-NextJS实战

（5）2020版React项目-React管理后台视频

（6）（React+React管理后台项目）全套合集


No. 13. Vue


（1）最全的vue.js视频

（2）2019最新Vue从入门到大神

（3）2020千锋Vue全套教程全开源

（3）2019VUE服务器端渲染-NUXT实战视频

（4）（Vue+Vue喵喵电影项目）全套合集

Nginx

（1）Nginx全套视频

Step07. 跨平台开发阶段



No. 14. 微信小程序开发


（1）零基础快速入门开发小程序

（2）小程序框架Mpvue入门教程（全开源）

（3）微信小程序零基础教程-微信小程序开发学习

（4）（微信小程序开发+小程序开发项目）全套合集


No. 15. 微信公众号开发


（1）详解微信公众号视频教程


No. 16. 移动端开发


（1）PC及移动端页面布局_1阶段课程体系

（2）PC及移动端页面布局_2知识点讲解

（3）PC及移动端页面布局_3HTML5微案例讲解

（4）页面布局与设备适配教程

（5）Touch从基础应用到实战

（6）2019最新Flutter全套视频~全套资料

（7）2019移动端测试技术

我的前端路线
1. 我的前端路线图

2. 前端课程体系大纲
3. 我的前端学习路线

Step 01 整体学习web前端

视频资源：

【尚学堂】前端全套课程
【千峰教育】web前端 900集

前端学习梳理
前言
最近学习了一部分前端内容，今天重新梳理一下。
主要借鉴的书有《前端技术架构与工程》、《大前端入门指南》、《vue.js从入门到项目实战》、《springboot+vue全栈开发实战》；
《前端技术架构与工程》从架构师的角度讲解了前端技术的前因后果以及工程化思想；值得反复阅读。里面讲技术架构和工程服务体系时归纳知识十分到位。
《大前端入门指南》蜻蜓点水地讲了前端的基础（HTML+CSS+JavaScript）和常用框架（RN、微信小程序、Flutter）。可以作为字典书，便捷地找到前端的常用知识点。
《vue.js从入门到项目实战》虽然很大部分和官网差不多，但是这本书的学习建议和最后的四个项目实战还是挺有用的，可以帮助vue的入门，同时也可以作为vue的字典书。
《springboot+vue全栈开发实战》借鉴其前后端分离开发网站的过程。本来是想用node后端和前端联系起来，但是我毕业设计是用Java做的后端。暂时还是以Java后端作为主体，联系前端。
主要借鉴的文章有：
Java开源项目之「自学编程之路」：学习指南+面试指南+资源分享+技术文章 里面有超多有价值的技术文章，值得反复阅读。
你们要的前端学习路线，我搞来了！ 里面将的东西很清晰，我打算参考他的内容规划我的前端技术栈。我之前的技术栈感觉太宽泛了，只是简单分类，各部分联系有断层的感觉，突出不了主体。但是这篇文章的思路值得借鉴。
A Recap of Frontend Development in 2019 里面讲述了前端的发展趋势，有借鉴意义。毕竟总不能学好框架后，这框架就过时了。
文章目录
前端学习梳理
前言
梳理思路
学习目的
学习路线
1三大件
HTML5
CSS3
JavaScript
2浏览器&计算机基础
浏览器
计算机基础
3库工具
4前端框架
5前端工程化
6性能优化
学习途径
题外话
前端的优势有哪些
前端如何做好前端
前端如何学习
前端有什么趋势
总结

梳理思路
分三部分：学习目的、学习路线、学习途径。
学习目的是学以致用。明白学到内容在哪里可以用到，能产生多大效益。
学习路线里参考了你们要的前端学习路线，我搞来了！ ，把重要的版块罗列出来，之前我弄的前端学习路线不够明确，几个版块之间联系不合理。
在新的版块里，把前端知识做六部分进行学习。分别是三大件、库工具、前端框架、浏览器&计算机基础、工程化、性能优化。其中三大件和浏览器&计算机基础是基础，虽然开发常用框架，但是框架基于基础推演的；库工具和前端框架是应用，开发所常用的；工程化和性能优化是提高效率和提高性能的重要能力，是高手所需要精通的。
学习路径根据参考你们要的前端学习路线，我搞来了！ 写出的学习路线，然后根据知识点找看官网、博客和书籍（如《大前端入门指南》的前三章、《vue.js从入门到项目实战》的前六章）。
学习目的
学习要学以致用，学习前端要明白学到内容在哪里可以用，能产生多大效益，不能只管学，不管用，知其然不知其所以然。
前端脱胎于做网站，做网站的流程有：策划、设计、开发、测试、部署、发布；对应需要的人员有架构师、产品经理、设计师、前端开发工程师、后端开发工程师、测试人员、运维人员；学习前端虽然不用面面俱到，但是为了前后衔接工作顺利，对各方面的工作有一个初步了解是有必要的。
学习是为了做一件事、做好一件事。
前端在其中要做好的事是：技术上做到高性能、安全，工程上做到规范、效率。
要做好这些事，就需要先做出来，然后做好、做快。
做出来：HTML、CSS、JavaScript；
做好：jQuery（操作DOM）、前端框架vue（虚拟DOM）、性能优化；
做快：工程化
学习路线
1三大件
HTML5

HTML语义化
常用标签
div
本地储存

CSS3

选择器
属性
样式
盒模型
布局：定位、浮动、溢出、弹性盒子
响应式布局

JavaScript

类型转换
闭包
this
作用域链
原型链以及继承
设计模式

2浏览器&计算机基础
浏览器

浏览器的大致架构
浏览器的兼容性
浏览器中JavaScript的执行机制
页面渲染原理
浏览器安全问题
浏览器为什么会跨域

计算机基础

HTTP与HTTPS
三次握手和四次挥手
CDN的作用与原理

3库工具

jQuery：降低开发者操作DOM的复杂度

4前端框架

响应式
virtual DOM
前端路由
diff算法
渲染

5前端工程化

模块化：JavaScript、CSS、资源
组件化：模板HTML+样式CSS+逻辑JS
规范化：编码规范、接口规范
babel：下一代JavaScript语言的编译器
ESLint：JavaScript代码检查工具
mock.js：通过随机数据，模拟各种场景，使前端工程师独立于后端进行开发。
webpack、Nginx、git

6性能优化

前端性能衡量指标、性能监控
网站优化方案
vue的性能优化方案
网络层面的优化方案
页面渲染层面的优化方案
白屏的优化方案

学习途径
三大件：通过参考菜鸟教程和《大前端入门指南》的前三章；
浏览器&计算机基础：通过参考《前端技术架构与工程》第六章；
库工具：不主要了解；
前端框架：参考《前端技术架构与工程》的第二章
工程化：参考《JavaScript设计模式》、《前端技术架构与工程》的第三、四章；
性能优化：参考《前端技术架构与工程》第二、六章；
感觉性能优化和浏览器&计算机基础这两部分有些内容重合了，不过要写还是一块写。
题外话
前端的优势有哪些
首先是WebApp，网站的功能更加强大，慢慢开始与桌面应用争锋；
然后就是跨平台，一套代码，多端运行。
前端如何做好前端
提高可复用性：用框架（vue）、用工具（npm、vue CLI、vue Router、VueX）、用组件（Swiper）、用库（Font Awesome）；便于开发；
提高规范性：统一接口（命名、目录结构）、代码风格；便于维护和升级；
性能优化：网站优化、vue优化、网络层面优化、页面渲染层面优化、白屏优化；
前端如何学习
我觉得学习前端不能只放在前端这个小范围，应该把学习范围扩大到从业务到网站开发这么一个范围来，这样才能明白自己做什么，怎么去做好。
学习前端要同时了解策划、设计、前后端开发、测试、部署、工程化；
策划部分要了解软件工程的需求分析、设计、开发、测试、交付；
设计部分要了解概要设计、详细设计；
测试部分要了解单元测试、集成测试、黑盒、白盒、测试案例；
部署要了解Linux、Docker；工程化要明白git、架构；
整个过程以业务为核心。
了解完这些，把精力放到开发部分，特别是后端开发，前端为后端服务。要明白数据库、服务器、前端之间的关系；
了解完上述的才算对前端有了一个初步的定位。之后就是专精前端，做好前端。
做好前端，首先需要把握住前端的两头，一头是基础（HTML+CSS+JavaScript）、一头是应用（vue+elementUI）；用基础理解应用，用应用实践基础；
然后是把握工程化，能够规范地进行开发；
最后是把握性能优化，使做出的前端性能优异。
前端有什么趋势

2019年流行前端框架和库的npm下载：react、jQuery、angular、vue；
WebAssembly 成为了继 HTML、CSS 和 JavaScript 之后的第四大Web语言
TypeScript 的使用激增：许多开发人员为之倾倒
可访问性和国际化变得越来越重要
Flutter 突飞猛进地发展，作为构建跨平台移动应用的另一个绝佳选择向 React Native 发起了挑战
静态网站的使用仍在持续，开发人员开始采用 JAMStack
PWA的增长和采用有所增加
CSS-in-JS的发展势不可挡
VS Code是文本编辑器市场上的主宰

总结
后期再完善吧，今天先到这，明天把握住两头，了解工程化和性能优化。
内容不一定对，请辩证认知。
更新地址：GitHub
更多内容请关注：CSDN、GitHub

前言
最近总是会看到后很多人会问，我现在想学习Web前端开发，该如何下手，学习路线是怎样的？今天这篇文章，我来说说我自己对前端学习的理解，并结合一些面试中会常问到的问题来谈谈，如何才能在前端坑中，爬的游刃有余？

Web前端
基础
首先前端的基础，相信大家闭着眼睛都能知道HTML+CSS+Javascript，但是它们的轻重缓急该如何去选择呢？我个人认为在学习优先级上HTML > CSS > Javsscript，之所以这么排并不是因为Javascript最不重要，而是因为HTML和CSS的学习上可以不用花太多时间，而且我觉得Javascript是前端一切学习的基础。
在这里我还是要推荐下我自己建的web前端开发学习群：617327703，群里都是学web前端开发的，如果你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。
HTML与CSS可以在一起学习，因为HTML的标签只有配合CSS样式才能达成优美的页面效果，没有CSS的页面只能是很多年前的门户网站的样子。随着HTML5和CSS3的普及，以及浏览器对它们的支持，越来多的产品都选择用HTML5开发，HTML5甚至可以直接作为一个前端开发方向。
我觉得学习了HTML后，面对这样的问题，应该不会被难到。
cookie，localStorage，sessionStorage的区别
HTML5新特性canvas标签
浏览器缓存机制，各有什么优缺点？
如何看待HTML5的一些新特性？
我觉得学习了CSS之后，面对这样的问题，也应该不会被难到。
元素水平垂直居中的实现
浏览器的几种盒模型
行内元素与块级元素
元素相对定位与绝对定位
伪元素:before与::before差别以及用途
我觉得学习了Javascript后，面对这样的问题，应该不会被难到。
常见的闭包问题，比如for循环内部执行输出函数
this关键字输出问题
常用的事件类型
ajax建立过程，常用的状态码
Javascript内存回收机制
框架
说到框架学习，如果说JS框架的话，相信很多人一定会脱口而出jQuery，这是很多当初进入前端开发领域一定会学习的内容，我也不例外。但是现在我却并不会推荐把很多的时间放在学习jQuery上，因为如果你深入学习之后会发现，对于jQuery的使用已经变少了。下面我们细细来说。
针对HTML布局上，当然Bootstrap是不能少的，我们不用把每个类都研究的很透彻，但是对于常用的class一定要熟练使用。
针对字体图标库上，推荐使用font-awaresome，还有某宝图标库iconfont，都包含了非常实用的图标。
其实重点想说的是对于前端MVVM框架的学习，相信很多人都知道就是AngularJS，Vue，React。

前端框架
那么针对这些新兴的框架，我们该如何学习呢？
首先有一点，ES6是一定要去学习的，在Vue2.X，AngularJS2，React中都对ES6提供了原生的支持，以后很多新的特性肯定也会使用ES6的语法去编写。
AngularJS
AngularJS在由AngularJS1升级到AngularJS2以后，完全是一个新的东西，原来在AngularJS1中的controller，service，filter等内容在AngularJS2中都变成一个个的module，component。
所以如果还没学过AngularJS部分内容的同学可以直接选择学习AngularJS2。但是需要注意的是AngularJS2是以Typescript语言编写的，所以对Typescript的学习就必不可少了。
Vue
个人认为Vue学习是相对来说成本比较低的框架，目前官方文档已经很详细，关于Vue全家桶的内容像Vue-resource，Vue-router，Vuex等越来越完善，而且在Github上开源是项目也有很多，可以很容易掌握。感兴趣的可以关注下我自己用Vue开发的一个简书网站。
React
React采用了Virtual DOM这一个很独特的概念，提高了页面渲染的效率。但是也是由于Virtual DOM的存在，在编程方式上，React和Vue,AngularJS稍有不同，如果习惯了Vue开发，可能还不太习惯React的开发。
在针对框架层面，在学习之后，应该能回答下面这些问题。
AngularJS和Vue的双向数据绑定的实现
Vuex工作机制
React的Virtual DOM基本实现，如何自己实现一个Virtual DOM算法
模块化&组件化
前端开发已经从原来的整体化开发发展到现在的模块化开发，甚至是组件化开发，开发过程愈发精细，讲求的是代码的可复用性。
以前一个页面从上到下一次编写的过程，现在已经发展为先将页面进行拆分成模块甚至是组件，不同的人关注不同的模块，组件，提高开发效率。
在模块化开发中，不得不提到CommonJS，AMD和CMD规范，并且有不同的实现，比如RequireJS。对于模块化编程的规范已经有很多的文章有讲到，可以认真去学习下。
构建工具
前端开发是离不开构建工具的，自己写的代码如何打包压缩，ES6的代码如何编译成JS，Sass，less代码如何编译成原生CSS，这些都是构建工具去完成的。
有了构建工具，可以极大的提高我们的开发速度，这里不得不提到的就是gulp+webpack。

Gulp
gulp是一种任务驱动型的构建工具，通过管道处理数据流，提高了数据处理速度，而且其提供的一系列插件也很方便使用。

Webpack
而webpack的作用就是把所有浏览器端需要发布的静态资源做相应的准备，比如资源的解析、合并和打包，它提供了强大的加载器和插件机制，例如vue-loader提供了对vue的支持，babel-loader提供了对ES6的支持。
其他的构架工具还有工程化构建的Yeoman，Slush，FIS等。
在学习了常用的构建工具后，应该可以回答出下面的问题。
Gulp和Webpack的不同
Webpack打包速度比较慢，可能原因是什么？有没有什么解决办法？
全栈
前端开发到最后就是要走全栈开发的道路了，全栈开发以NodeJS作为服务端语言，基于NodeJS实现的服务端框架有Express，KOA，目前也发展的越来越成熟。
既然讲到全栈开发，肯定会通过服务端语言操纵数据库，因此对于数据库的知识也肯定要掌握的。
总结
今天这篇文章主要通过自己对于前端学习的一些看法，可能有些片面，希望能给你带来帮助。