如何成为前端工程师

一、技术的必须的

作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通，类似我字样对前端知识一知半解的，一遇到问题就停下工作就四处搜索解决方案的，首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下（包括搜索引擎），能够完成大多数任务。

以下知识点是作为一个前端工程师必须了解和熟悉的：

DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

DOM *** 作——怎样添加、移除、移动、复制、创建和查找节点。

事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。

XML>

严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。

盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。

块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。

浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

上述这些知识点都应该是你“想都不用想”就知道的东西。除了上述的前端知识，也还需学会至少一门后端编程语言，让你自己学会如何与后端进行更好的交互。

很多前端工程师对一些库非常的熟悉，jQuery，Bootstrap等，但是对于库的熟悉并不能提现你的优秀，整整优秀的是那些理解库背后的机制，特别是能够徒手写出一个自己的库的人。

真正合格的前端工程师是能实现具体的功能要求，而优秀的前端工程师需要解决的问题是寻找一个最优的解决方案。

二、沟通很重要

优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关。在任何情况下，前端工程师至少都要满足下列四类客户的需求。

产品经理——这些是负责策划应用程序的一群人。他们能够想象出怎样通过应用程序来满足用户需求，以及怎样通过他们设计的模式赚到钱（但愿如此）。一般来说，这些人追求的是丰富的功能。

UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。他们热衷于流畅靓丽但并不容易实现的用户界面。

项目经理——这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间——应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。

最终用户——当然是应用程序的主要消费者。尽管我们不会经常与最终用户打交道，但他们的反馈意见至关重要；没人想用的应用程序毫无价值。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。

不要在没有作出评估之前就随便接受某项任务。你必须始终记住，一定先搞清楚别人到底想让你干什么，不能简单地接受“这个功能有问题”之类的大概其的说法。而且，你还要确切地知道这个功能或设计的真正意图何在。“加一个按钮”之类的任务并不总意味着你最后会加一个按钮。还可能意味着你会找产品经理，问一问这个按钮有什么用处，然后再找UI设计师一块探讨按钮是不是最佳的交互手段。要成为优秀的前端工程师，这种沟通至关重要。

那么，前端工程师应该最关注哪些人的意见呢？答案是所有这四类人。优秀的前端工程师必须知道如何平衡这四类人的需求和预期，然后在此基础上拿出最佳解决方案。由于前端工程师处于与这四类人沟通的交汇点上，因此其沟通能力的重要性不言而喻。如果一个非常酷的新功能因为会影响前端性能，必须删繁就简，你怎么跟产品经理解释？再比如，假设某个设计如果不改回原方案可能会给应用程序造成负面影响，你怎么才能说服UI设计师？作为前端工程师，你必须了解每一类人的想法从何而来，必须能拿出所有各方都能接受的解决方案。从某种意义上说，优秀的前端工程师就像是一位大使，需要时刻抱着外交官的心态来应对每一天的工作。

专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。

三、提升无止境

优秀的前端工程师应该具备快速学习能力。推动Web发展的技术并不是静止不动的，这些技术几乎每天都在变化，如果没有快速学习能力，你就跟不上Web发展的步伐。你必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而你的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

四、前端开发知识架构

前端工程师

SVG/Canvas/VML

D3/Raphaël/DataV

知识管理/总结分享

沟通技巧/团队协作

需求管理/PM

交互设计/可用性/可访问性知识

编译原理

计算机网络

*** 作系统

算法原理

软件工程/软件测试原理

D2/WebRebuild

NodeParty/W3CTech/HTML5梦工厂

JSConf/沪JS(JSConfcn)

QCon/Velocity/SDCC

JSConf/NodeConf

YDN/YUIConf

MongoDB/CouchDB

HTML5/CSS3

响应式设计

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

CSRF/XSS

ADsafe/Caja/Sandbox

类库模块化

业务逻辑模块化

文件加载

CommonJS/AMD

YUI3模块

LABjs

SeaJS/Requirejs

压缩合并

文档输出

项目构建工具

YUI Compressor

Google Clousure Complier

CleanCSS/UglifyJS

JSDoc

Dox/Doxmate

make/Ant

GYP

Grunt

Yeoman

数据结构

OOP/AOP

原型链/作用域链

闭包

函数式编程

设计模式

Javascript Tips

JSPerf

YSlow 35 rules

PageSpeed

>

DynaTrace’s Ajax

高性能JavaScript

>

ECMAScript3/5

W3C/DOM/BOM/XHTML/XML/JSON/JSONP

CommonJS/AMD

HTML5/CSS3

jQuery/Underscore/Mootools/Prototypejs

YUI3/Dojo/ExtJS

Backbone/KnockoutJS/Emberjs

Coding style

单元测试

自动化测试

JSLint/JSHint

CSSLint

Markup Validation Service

QUnit/Jasmine

Mocha/Should/Chai

WebDriver

IDE

调试工具

版本管理

VIM/Sublime Text2

Notepad++/EditPlus

WebStorm

Firebug/Firecookie

YSlow

IEDeveloperToolbar/IETester

Fiddler

Git/SVN

Github/Bitbucket/Google Code

HTML/HTML5

CSS/CSS3

PhotoShop/Paintnet

JavaScript/Nodejs

JavaScript语言精粹

IE6/7/8/9

Firefox

Chrome/Safari/Opera

浏览器

编程语言

切页面

开发工具

代码质量

前端库/框架

前端标准/规范

性能

编程知识储备

部署流程

代码组织

安全

移动Web

JavaScript生态

前沿技术社区/会议

计算机知识储备

软技能

可视化

后端工程师

Unix/Linux/OS X/Windows

SQL

MySQL/MongoDB/Oracle

C/C++/Java/PHP/Ruby/Python/…

编程语言

数据库

*** 作系统

数据结构

参考链接：

>

JacksonTian/fks · GitHub

题主你好。

关于这个问题，首先你要给自己一个明确的规划。你想找到什么样的工作。如果你只想成为一个最基础网页设计师，那的确学学h5就能制作网页了。但是如果你想向更专业更全面的前端开发方向发展，就必须掌握前端开发三大基本基石：HTML、CSS，JavaScript。

当然，学会这些还远远不够，一个优秀的前端开发工程师还需要熟练掌握各种工具和框架的运用，常见的工具有Dreamweaver，Sublime，HBuilder。还有FontelloFontello 、Secureheaders、Visual Studio CodeVisual Studio Code，三大基本框架有Angular、React、Vue，当然，还会接触到更多Bootstrap、 Fbootstrapp、BootMetro、Gumby、IVORY、Kube这样的框架。另外，一个优秀的前端开发工程师可能还要掌握SEO、DOM、BOM、Ajax等技能，甚至，网站性能优化和服务器端的相关基础知识也是需要了解的

当然，前端开发也在不停发展，如果你学会了后就安于现状停滞不前，那一定会被市场所淘汰。

学无止境，前端开发的道路还很长，还有很多的新东西等待我们去探索，你要学的也还有很多，永远不要觉得自己已经足够厉害。

关于零基础怎么样能快速学好Python的问题，百度提问和解答的都很多，你可以百度下看看。我觉得从个人自学的角度出发，应从以下几个方面来理解：

1 为什么选择学python？

据统计零基础或非专业的人士学python的比较多，据HackerRank开发者调查报告2018年5月显示（见图），Python排名第一，成为最受欢迎编程语言。Python以优雅、简洁著称，入行门槛低，可以从事Linux运维、Python Web网站工程师、Python自动化测试、数据分析、人工智能等职位，薪资待遇呈上涨趋势。

2 入门python需要那些准备？

21 心态准备。编程是一门技术，也可说是一门手艺。如同书法、绘画、乐器、雕刻等，技艺纯熟的背后肯定付出了长时间的反复练习。不要相信几周速成，也不能急于求成。编程的世界浩瀚无边，所以请保持一颗敬畏的心态去学习，认真对待写下的每一行代码，甚至每一个字符。收拾好自己的心态，向着编程的世界出发。第一步至关重要，关系到初学者从入门到精通还是从入门到放弃。选一条合适的入门道路，并坚持走下去。

22 配置 Python 学习环境。选Python2 还是 Python3？入门时很多人都会纠结。二者只是程序不兼容，思想上并无大差别，语法变动也并不多。选择任何一个入手，都没有大影响。如果你仍然无法抉择，那请选择 Python3，毕竟这是未来的趋势。

编辑器该如何选？同样，推荐 pycharm 社区版，配置简单、功能强大、使用起来省时省心，对初学者友好，并且完全免费！其他编辑器如：notepad++、sublimeText 3、vim 和 Emacs等不推荐了。

*** 作环境？Python 支持现有所有主流 *** 作平台，不管是 windows 还是 mac 还是 linux，都能很好的运行 Python。并且后两者都默认自带 Python 环境。

23 选择自学的书籍。我推荐的书的内容由浅入深，建议按照先后顺序阅读学习：

231《Python简明教程》。这是一本言简意赅的 Python 入门教程，简单直白，没有废话。就算没有基础，你也可以像读小说一样，花两天时间就可以读完。适合入门快速了解语法。

232 廖雪峰编写的《Python教程》。廖先生的教程涵盖了 Python 知识的方方面面，内容更加系统，有一定深度，有一定基础之后学习会有更多的收获。

24 学会安装包。Python中有很多扩展包，想要安装这些包可以采用两种方法：

241 使用pip或easy_install。

1)在网上找到的需要的包，下载下来。eg rsa-314targz;

2)解压缩该文件;

3)命令行工具cd切换到所要安装的包的目录，找到setuppy文件，然后输入python setuppy install

242 不用pip或easy_install,直接打开cmd，敲pip install rsa。

3 提升阶段需要恒心和耐力。

完成入门阶段的基础学习之后，常会陷入一个瓶颈期，通过看教程很难进一步提高编程水平。这时候，需要的是反复练习，大量的练习。可以从书上的例题、作业题开始写，再写小程序片段，然后写完整的项目。我们收集了一些练习题和网站。可根据自己阶段，选择适合的练习去做。建议最好挑选一两个系列重点完成，而不是浅尝辄止。

31 多做练习。推荐网站练习：

crossin编程教室实例：相对于编程教室基础练习着重于单一知识点，

编程实例训练对基础知识的融会贯通；

hackerrank：Python 部分难度循序渐进，符合学习曲线

实验楼：提升编程水平从做项目开始；

codewar：社区型编程练习网站，内容由易到难；

leetcode：为编程面试准备，对初学者稍难；

牛客网：提供 BAT 等大厂笔试题目；

codecombat：提供一边游戏一边编程；

projecteuler：纯粹的编程练习网站；

菜鸟教程100例：基于 py2 的基础练习；

32 遇到问题多交流。

321 利用好搜索引擎。

322 求助于各大网站。推荐

stackoverflow：这是一个程序员的知识库；

v2ex：国内非常不错的编程社区，不仅仅是包含程序，也包含了程序员的生活；

segmentfault：一家以编程问答为主的网站;

CSDN、知乎、简书等

323 加入相关的QQ、微信群、百度知道。不懂的可以随时请教。

伴随着互联网行业的迅速发展，Web前端岗位已经越来越受到大家的重视，Web前端工程师的薪资也日渐水涨船高。不论是薪资还是工作环境，Web前端工程师都是很让人羡慕的，也正因为如此，已经有不少的小伙伴想要加入到前端领域中去。因此，很多想要学习Web前端的小伙伴们就会询问：2020年Web开发前端就业前景还好吗？下面我们就来和我一起看一看吧！

Web前端行业目前来看已经渗透到了到了生活的方方面面，这也说明了Web前端行业的生命力异常强大，并且未来的前途也是不可限量。假如你还在犹豫到底要不要接触Web前端，那么我给你的建议就是，与其将时间浪费在犹豫上，还不如认真的拼一把，把时间花在Web前端上。相信你看完下面的内容会对Web前端有个全新的认识。

为什么说Web开发前端就业前景好

目前的Web前端技术可以说已经是非常成熟了，同时Web前端市场也非常的火爆，并且Web前端的人才目前来看也是异常的紧缺。加之互联网行业的飞速崛起，目前Web前端技术的不断成长发展，也已经占据了互联网的一席之地。

Web前端的薪酬变化

前端开发行业薪资水平呈上涨趋势，Web前端开发早已不是做带动画的下拉菜单的时代了，他们已成为互联网主宰者，各行业都用其开发互联网应用。但目前整互联网行业的Web前端开发工程师紧俏，企业正高薪求才，薪资待遇一涨再涨 ！

Web前端人才需求

Web前端技术可以说是越来越成熟了，Web前端开发工程师已经成为发展中的职业香馍馍。说起来几乎是整个互联网行业都缺少Web前端工程师，无论是刚起步的创业公司，还是上市公司乃至巨头，空缺一样存在。只要你够优秀，Web开发前端就业前景简直不要再好！

Web前端未来发展

Web前端的发展其实还是那句话，有需求才会有市场，为什么那么多人参加想进入Web前端的行列呢，还不是因为Web开发有市场，企业需要量大。所以与其费尽心思的想Web前端今后的发展，还不如用那个时间好好学习一些Web前端技能将来对就业更添保障。

综上所述，大前端是个非常有“前途”的工作，薪资待遇也很高，并且根据自己技能深入的不同程度，拥有不同的薪资待遇。想要成为Web前端工程师，最好有一个充分健全的知识布局体系，拥有内容的深度和广度，等于拥有了企业最需要的技能，到时候你就是企业争相抢聘的人才，也是行业中的佼佼者了。

所以：2020年，Web开发前端就业前景依然很好。

原来问及前端工程师的基础技能素养，可能html、css、JavaScript就搞定了。但是时代在变，企业对于人才的需求与能力要求也在发生变化，就web前端本身来说，每年也有很多新技术、新趋势的涌现。

要知道前端=切图这个职业设定早就成为过去式了，这种狭隘的职业定位是在其技术匮乏时代的产物，现在web前端工程师基本都是使用html5组织页面，使用css3绘图，很多元素已经不需要再使用还原设计，这其实是一个很大的进步。

而且web前端的工程师的技能要求已经不是仅仅停留在前端这个层面，像后端基础、大数据可视化、用户心理等都要有所涉及和了解。

前端工程师要学到什么程度才能找到一份最基本的工作？

单纯从技术角度分析，我大致做了如下知识点罗列，希望对大家的学习有帮助~

PC端网站布局：HTML基础，CSS基础，CSS核心属性，CSS样式层叠，继承，盒模型，容器，溢出及元素类型，浏览器兼容与宽高自适度，定位，锚点与透明，整合，表格，CSS属性与滤镜等。

HTML5+CSS3基础：HTML5新增的元素与属性，表单域增强元素，CSS3选择器，文字字体相关样式，CSS3位移与变形处理，CSS3 2D转换与过度动画，CSS3 3D转换与关键帧动画，d性盒模型，媒体查询，响应式设计等。

WebApp页面布局：移动端页面设计规范，移动端切图，文字流式/控件d性/等比例/特殊设计的100%布局，等比缩放布局，viewport/meta，rem/vw的使用，flexbox详解，移动web特别样式处理等。

原生JavaScript交互功能开发：基本语法，循环语句，函数与数组，String与Date，BOM与DOM，事件，拖拽效果，cookie存储，正则表达式，Ajax，面向对象基础，运动与游戏开发等。

面向对象进阶与ES5/ES6应用：Promise/A+，设计模式（观察者模式等），原型链，构造函数，执行上下文栈与执行上下文，变量对象与活动对象，作用域链，闭包，this，ES5，ES6等。

JavaScript工具库自主研发：DOM库，事件库，AJAX库，原型和继承库，MVVM核心库，基于SPA的路由库等。

jQuery经典交互特效：时间轴特效，tab页面切换效果，网页定位导航特效，滑动门特效，焦点图轮播特效，导航条菜单效果，瀑布流特效，d出层效果，倒计时效果等。

PHP+MySQL后端基础：PHP，MySQL，>

前端工程化与模块化应用：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模块化等。

PC端全栈开发：大首页、列表页与详情页展示与交互特效、搜索、登录与注册、购物车、jQueryUI 与 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平台系统前端等。

应用Vuejs开发WebApp：Vuejs基础，模块化，单文件组件，路由，与服务器通信，状态管理，单元测试与生产发布，服务端渲染SSR与Nuxtjs，基于Vuejs企业级项目开发等。

应用Reactjs开发WebApp：ReactJS基础，JSX语法，组件，flux+Redux，React，Router路由，动画效果，基于React 企业级项目研发等。

应用Angular开发WebApp：TypeScript 基础与进阶，开发环境配置，Hello World，架构、模块与组件，模板，元数据、数据绑定与数据显示，表单，服务与指令，依赖注入，路由，Ionic 3 MUI框架等。

微信公众号开发：初识微信公众号，订阅号的基本功能，使用百度BAE实现代码的快速上线，使用Git完成线上代码部署，公众号开发权限及功能接入，微信JSSDK接口API，微信场景项目开发与接入等。

微信小程序开发：微信小程序初探，小程序入门必学，小程序组件体验，小程序大功能，项目实战等。

React Native：React Native 初探，React Native 项目导航，React Native 项目文本框，React Native 项目滚动分页，React Native 项目第三方登录，React Native其他组件等。

各类混合应用开发：自主原生Navtive Hybrid，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架等。

原来问及前端工程师的基础技能素养，可能html、css、JavaScript就搞定了。但是时代在变，企业对于人才的需求与能力要求也在发生变化，就web前端本身来说，每年也有很多新技术、新趋势的涌现。

要知道前端=切图这个职业设定早就成为过去式了，这种狭隘的职业定位是在其技术匮乏时代的产物，现在web前端工程师基本都是使用html5组织页面，使用css3绘图，很多元素已经不需要再使用还原设计，这其实是一个很大的进步。

而且web前端的工程师的技能要求已经不是仅仅停留在前端这个层面，像后端基础、大数据可视化、用户心理等都要有所涉及和了解。

前端工程师要学到什么程度才能找到一份最基本的工作？

单纯从技术角度分析，我大致做了如下知识点罗列，希望对大家的学习有帮助~

PC端网站布局：HTML基础，CSS基础，CSS核心属性，CSS样式层叠，继承，盒模型，容器，溢出及元素类型，浏览器兼容与宽高自适度，定位，锚点与透明，整合，表格，CSS属性与滤镜等。

HTML5+CSS3基础：HTML5新增的元素与属性，表单域增强元素，CSS3选择器，文字字体相关样式，CSS3位移与变形处理，CSS3 2D转换与过渡动画，CSS3 3D转换与关键帧动画，d性盒模型，媒体查询，响应式设计等。

WebApp页面布局：移动端页面设计规范，移动端切图，文字流式/控件d性/等比例/特殊设计的100%布局，等比缩放布局，viewport/meta，rem/vw的使用，flexbox详解，移动web特别样式处理等。

原生JavaScript交互功能开发：基本语法，循环语句，函数与数组，String与Date，BOM与DOM，事件，拖拽效果，cookie存储，正则表达式，Ajax，面向对象基础，运动与游戏开发等。

面向对象进阶与ES5/ES6应用：Promise/A+，设计模式（观察者模式等），原型链，构造函数，执行上下文栈与执行上下文，变量对象与活动对象，作用域链，闭包，this，ES5，ES6等。

JavaScript工具库自主研发：DOM库，事件库，AJAX库，原型和继承库，MVVM核心库，基于SPA的路由库等。

jQuery经典交互特效：时间轴特效，tab页面切换效果，网页定位导航特效，滑动门特效，焦点图轮播特效，导航条菜单效果，瀑布流特效，d出层效果，倒计时效果等。

PHP+MySQL后端基础：PHP，MySQL，>

前端工程化与模块化应用：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模块化等。

PC端全栈开发：大首页、列表页与详情页展示与交互特效、搜索、登录与注册、购物车、jQueryUI 与 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平台系统前端等。

应用Vuejs开发WebApp：Vuejs基础，模块化，单文件组件，路由，与服务器通信，状态管理，单元测试与生产发布，服务端渲染SSR与Nuxtjs，基于Vuejs企业级项目开发等。

应用Reactjs开发WebApp：ReactJS基础，JSX语法，组件，flux+Redux，React，Router路由，动画效果，基于React 企业级项目研发等。

应用Angular开发WebApp：TypeScript 基础与进阶，开发环境配置，Hello World，架构、模块与组件，模板，元数据、数据绑定与数据显示，表单，服务与指令，依赖注入，路由，Ionic 3 MUI框架等。

微信公众号开发：初识微信公众号，订阅号的基本功能，使用百度BAE实现代码的快速上线，使用Git完成线上代码部署，公众号开发权限及功能接入，微信JSSDK接口API，微信场景项目开发与接入等。

微信小程序开发：微信小程序初探，小程序入门必学，小程序组件体验，小程序大功能，项目实战等。

React Native：React Native 初探，React Native 项目导航，React Native 项目文本框，React Native 项目滚动分页，React Native 项目第三方登录，React Native其他组件等。

各类混合应用开发：自主原生Navtive Hybrid，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架等。

以上就是关于如何成为前端工程师全部的内容，包括:如何成为前端工程师、自学前端学到什么程度可以找工作、零基础学Python应该学习哪些入门知识等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！