前端开发工程师学习路线图（收藏版）

在网上看到很多类似“前端现在是不是饱和了，是不是不好找工作了呀？”这类问题，就这类问题也和小伙伴进行了探讨，大家一致认为——不是前端饱和了，而是现在前端的工作在不断独立，门槛越来越高，再也不是只会三大基础就可以胜任的年代了。

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的同学要注意，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候展现更大的优势。

缺人才，又薪资高，那么怎样才能成为一名前端工程师呢？

前端工程师需要掌握的技能学习前端需要学习哪些知识？ 学习前端从哪里开始学习？ 学完当前知识，下一步该学哪些前端知识比较好？

以上问题，帮你“一站式解决”！

前端开发学习路线~

Web前端工程师要求具备哪些技能？Web前端工程师必须得掌握HTML、CSS和JavaScrip，必须对这三门语言很精通，能够运用它们完成大多数任务。一位好的Web前端开发工程师在知识体系上不仅要有广度还要有深度，很多大公司即使出高薪也很难招聘到理想的前端开发工程师。

Web前端工程师要根据业务需求文档完成前端研发工作；与后端研发人员配合讨论交互方式页面集成工作；对页面性能的优化和维护持续提升用户体验；改进和优化开发流程、工具和框架，搭建基础设施，提高开发效率；研究Web前端技术的发展，富Web交互方式；前端组件封装、可视化组件设计开发编写说明文档

一、前端是一门怎样的编程语言

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。从广义上来所有用户终端产品与视觉和交互有关的部分，都属于前端工程师的专业领域。从狭义上讲，Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，处理视觉和交互问题。

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。

二、前端三大技能

前端开发中有三个最基本也是最必须的技能HTML&CSS&JavaScript。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前需要对这些概念弄清楚弄明白。

1、HTML

HTML指的是超文本标记语言这个也是我们网页最常用普通的语言，经历了多个版本的发展，已经发展到5.0版，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML指可扩展超文本标签语言。

XHTML于2000年的1月26日成为W3C标准，是更严格更纯净的HTML代码，XHTML的目标是取代HTML。XHTML与HTML4.01几乎是相同的，XHTML是作为一种XML应用被重新定义的HTML，是一个W3C标准。W3C将XHTML定义为最新的HTML版本。所有新的浏览器都支持XHTML。

2、CSS

CSS级联样式表简称“CSS”，通常又称为“风格样式表”，它是用来进行网页风格设计的。

如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

3、JavaScript

JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

三、前端应用领域

1、企业官方网站的开发与维护
这个应该是最简单的了，基本上是纯静态页面的展示，就算有交互模块，应该也是比较简单的那种。

2、门户类型网站的开发与维护

例如像搜狐一样的门户网站，相对来说也不难，这种网站一般分成很多个模块，每个模块的展现结构是非常类似的。如何做到可复用性强，对产品需求变更迭代时更加友好，那就很考验开发人员前端三大语言的设计模式了。

3、电商网站

例如京东和淘宝，里面不仅有对用户友好的展现方式，合乎逻辑的交互方式，还会涉及到网站、商品的色彩设计、排版设计、交互设计，虽然可能都由设计师来出方案，但是前端开发同学可以从中学到很多东西。

除了单纯的展现，你还需要考虑其他的东西。例如，不同端的字体展现，响应式布局，图片大小，静态资源缓存，CDN部署，Ajax动态数据交互。这些还都是偏纯展现的。还会有涉及到个人信息填写、支付款项、密码输入等等，会涉及到一系列的前端安全问题，这部分也是很锻炼人的。

4、后台管理系统

一般这个是给内部人员使用的，所以可以不用考虑太多的兼容性，直接要求统一使用谷歌浏览器或者火狐。

5、H5等移动端页面

H5的活动营销页、红包落地页、明星投票页等等一系列与营销活动相关的移动端页面。这些需要你的CSS功底非常扎实，常常要写一些动态效果、动画效果，越生动越吸引用户参与。

6、移动端视频播放页面

最近短视频崛起，大家所看到的App页面其实就是Web前端页面，这样做的原因是App过审麻烦且时间周期长，业务需要快速迭代和修复的情况下，前端责无旁贷。那么这时候考验的是你对视频的操作能力，对流式播放技术和能力的掌握。此外，视频挂件、贴纸、弹幕、互动、美颜、变老挑战等等，都是现在短视频必备的能力。

7、微信小程序

小程序

微信、支付宝、百度等大企业，先后推出了小程序，当然身为前端开发的我们，这是必须掌握的一门技巧。虽然不是新的语言，但代码组织方式、调试方式、底层原理，也是值得关注和学习。

四、前端市场现状

前端入门学习门槛比较低，所以很多人认为HTML、CSS、JavaScript是简单学习就可以掌握的东西，以为在网上看点乱七八糟的教程，随便看看书，用HTML、CSS做个网页布局就可以入门了。但这样的技术水平，其实是不够格的，在整个市场来看，就算数量再多，都不会影响前端开发的需求量。饱和的只是低端饱和，高端始终缺人。

在未来，专业的前端开发工程师才是企业真正争夺的香饽饽。而被淘汰的不是前端开发，而是技术落后、技术不精的开发者。

五、前端开发工程师工作职责和工作要求

如果用一句话来总结前端工程师的工作，那就是：“做页面”，其中包括电脑浏览器中显示的页面，手机浏览器中显示的页面，当然还包括手机 App 中显示的页面，以及小程序中显示的页面。

以淘宝为例，你可以在电脑的浏览器中访问淘宝网站，可以在手机的浏览器中访问淘宝网站，也可以在手机上下载并安装一个淘宝 App，当然，你还可以在微信中搜索并使用淘宝的小程序

一名前端工程师步入职场，主要的工作就是根据公司的产品需求，做各种各样的网页。通过这些页面可以：

1. 向用户展示信息，例如：展示商品信息等；\
2. 接受并处理用户交互，例如：点击某一个商品类别跳转查看详情页面等；
3. 接受用户输入并做后续处理，例如：查询商品、上传头像或修改订单等。

其中，界面呈现的是否美观、流畅，用户交互的体验是否友好，用户输入操作是否便捷都是由我们前端工程师来负责的

要想顺利地完成这些工作，一名合格的前端工程师至少需要具备以下能力：

1. 熟练掌握 HTML5、CSS3、JavaScript，实现 Web 前端界面的展现与交互；\
2. 熟练使用主流框架并对主流框架的底层实现原理有所了解，例如：React、Vue 等；
3. 有多端开发、兼容性及性能优化研发经验；\
4. 有团队协作研发经验，熟练使用版本控制工具；
5. 有前端工程化研发经验，熟练使用前端工程化工具；\
6. 有互联网公司的应用项目开发经验。

以上这些技能都会在黑马的基础班和就业班学习到，根据掌握的程度不同，大家在就业时大概可以找到8K~ 15K的薪资，并足以胜任现在企业对前端开发工程师的工作要求。

前端学习时间规划

基础阶段（1 ~ 3 个月）

课程目标：学习前端基础技能，掌握传统前端开发方式，具备接手传统老项目的能力。

课程内容列表：

1. HTML：学会搭建页面结构的能力；

2. CSS：学会美化页面的能力；

3. JavaScript：学会操作页面的能力；

4. jQuery：学习的第一个 JavaScript 库 jQuery，这是每一个老前端必备技能，能 够简化页面操作代码，提升开发速度；

5. Ajax：学会和后端工程师交互的方式，让页面内容活起来；

6. Node.js：了解什么是后端，以及后端接口是怎么开发的，避免进入职场后因对后

端一无所知而无法和公司后端团队交流。

项目实战阶段（4 ~ 6 个月）

课程目标：学习前端框架技能，掌握前后端分离的主流开发方式，具备入职中小厂快速做页面、做业务的能力。

课程内容列表：

1. Vue：学会用当下国内最流行的前端框架 vue.js 完成多种业务的能力，项目课程

包括： ²后台管理系统：几乎每一家企业都需要； ² 电商系统：前端技术覆盖度最全，如：天猫、淘宝、京东、拼多多； ² 移动端咨询系统：资讯获取几乎是每个人的刚需，如：头条、网易、腾讯新闻。

2. 小程序 + 多端：学会开发小程序的能力，并学会把移动端项目打包生成 Android、 iOS 应用的能力，一次开发到处应用。

电商系统：前端技术覆盖度最全，如：天猫、淘宝、京东、拼多多。

3. React：学会使用 react.js 框架开发项目的能力。

房屋租赁系统：基于地图定制的前端项目，如：贝壳、链家、安居客。

前端详细学习路线图

阶段一基础入门： 入门前端工程师的必备技能，能够完成PC端和移动端的静态页面，具备1:1还原设计图的能力。

阶段二技术进阶： 进阶成为合格的初级前端工程师，能够实现页面的交互效果，实现与后端的数据联通。

阶段三Vue开发： 成为中高级前端工程师的核心能力，能够实现企业级项目的功能需求，并具备内容管理系统、企业中台以及电商平台的项目经验。

阶段四React & 小程序开发： 成为中高级前端工程师的进阶技能，能够满足市面上90%+公司的招聘需求，并具备网页端和移动端项目研发经验。

阶段五面试就业： 能够完善简历，轻松应对企业面试场景与面试题目，成功获得心仪的offer。

第一阶段 基础入门

学前导读：为零基础学员量身定制，教你搭建PC端和移动端静态页面，让你从小白升级成网页“化妆师”，轻松掌握 HTML5 和 CSS3 相关知识。

1.Web前端零基础入门HTML5+CSS3+前端项目

课程中和课程尾配备两个实战项目，项目一类型是企业站，可以让同学们快速的将基础知识点进行反复练习；项目二类型是电商站，可以让同学们掌握更复杂的网页效果的开发流程和布局标准。本教程严格按照专业的开发流程：专业的测量工具，做到100%还原设计稿。

web前端开发入门教程，前端零基础html5+css3+前端项目视频教程

2.移动web开发实战

本课程采用2+5模式, 前两天承接HTML+CSS, 使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每天课程都有完整的案例或项目， 让学生学以致用。

web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）

第二阶段 技术进阶

学前导读：让网页“动”起来，带你学会前端工程师核心语言——JavaScript，实现网页数据交互与动画效果，并实现与后端数据的联通。

1.JavaScript深入浅出-0基础入门神器

学完本课程你将掌握JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。

JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门

2.JavaScript核心之Web APIs

学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。

JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作

3.数据交互&异步编程-前端进阶Ajax零基础入门

本课程案例丰富，知识点配套的案例丰富多样，满足学生学习的兴趣 ；深入原理，会深入讲解如何封装自己的模板引擎和 Ajax 函数；涵盖广泛，涵盖了 Ajax、跨域、JSONP、模板引擎、节流防抖、XHR Level2 等常用技术。

AJAX零基础到精通_整合Git核心内容全套教程

第三阶段 VUE开发

学前导读：掌握多行业解决方案，项目开发拿来即用，帮你搞定前端工程师必备热门框架Vue.js。

1.前端高级Node.js零基础入门教程

本套课程作为框架前置课，重点为学生铺垫 npm、包、模块化、身份认证、CORS 跨域等主要知识点，为学习后面的 Vue 课程夯实基础。同时，本课程涵盖了 MySQL 数据库、API 接口项目开发等后端内容，拓宽了学生的知识面，为前端学生构建了前后端完整的知识体系，助力学生更好地发展。

Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等_Nodejs六大实战案例详解

2.前端框架Vue2+Vue3全套视频

历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！

Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

第四阶段 React&小程序开发

学前导读：React帮你解锁中高级前端工程师能力地图，多端项目让你满足90%+企业需求。

1.前端React精品教程

React 是时下最流行的前端框架之一，是很多大厂的首选前端开发框架！历经数月精心研发，内容包括：React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组等等技术。

前端React精品教程， React零基础入门到原理详解

系统的学习网页数据交互的 Ajax 技术，建立前后端交互的知识体系，为学生夯实网络编程的基础，为后期高级课程的学习做好铺垫。

2.手把手快速带你开发微信小程序

本课程从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识。学完基础之后，利用 uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用。

前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)