大部分人学习一项技术肯定是以就业为目标,那么学习web前端哪些知识才能找到一份工作?小蜗这里根据行业的变化以及企业的用人需求,整理了一份web前端的学习路线,只要掌握了以下内容,找到一份工作基本不难。
第一阶段:专业核心基础
阶段目标:
1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。
2. 熟练运用HTML+CSS特性完成页面布局。
4. 熟练应用CSS3技术,动画、弹性盒模型设计。
5. 熟练完成移动端页面的设计。
6. 熟练运用所学知识仿制任意Web网站。
7. 能综合运用所学知识完成网页设计实战。
知识点:
1、Web前端开发环境,HTML常用标签,表单元素,Table布局,CSS样式表,DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化,能够仿制任意网站的前端页面实现。
2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端,整理网页开发技巧。
3、预编译css技术:less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发,深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。
第二阶段:Web后台技术
阶段目标:
1. 了解的发展历史、掌握Node环境搭建及npm使用。
2. 熟练掌握的基本数据类型和变量的概念。
3. 熟练掌握中的运算符使用。
4. 深入理解分之结构语句和循环语句。
5. 熟练使用数组来完成各种练习。
6.熟悉es6的语法、熟练掌握面向对象编程。
7.DOM和BOM实战练习和H5新特性和协议的学习。
知识点:
1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用的知识完成各种练习。
2、面向对象基础、异常处理机制、常见对象api,js的兼容性、ES6新特性。熟练掌握面向对象的开发以及掌握es6中的重要内容。
3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。
4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。
第三阶段:数据库和框架实战
阶段目标:
1. 综合运用Web前端技术进行页面布局与美化。
2. 综合运用Web前端开发框架进行Web系统开发。
3. 熟练掌握Mysql、Mongodb数据库的发开。
4. 熟练掌握vue.js、webpack、elementui等前端框技术。
5. 熟练运用Node.js开发后台应用程序。
6. 对Restful,Ajax,JSON,开发过程有深入的理解,掌握git的基本技能。
知识点:
1、数据库知识,范式,MySQL配置,命令,建库建表,数据的增删改查,mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理,为Node.js后台开发打下坚实基础。
2、模块系统,函数,路由,全局对象,文件系统,请求处理,Web模块,Express框架,MySQL数据库处理,,文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。
3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解,能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发,对MVVM模式有深刻理解。
4、需求分析,数据库设计,后台开发,使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git,实现整站项目完整功能并上线发布。
第四阶段:移动端和微信实战
阶段目标:
1.熟练掌握React.js框架,熟练使用React.js完成开发。
2.掌握移动端开发原理,理解原生开发和混合开发。
3.熟练使用react-native和Flutter框架完成移动端开发。
4.掌握微信小程序以及了解支付宝小程序的开发。
5.完成大型电商项目开发。
知识点:
1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。
2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架,并分别使用react-native和Flutter分别能开发移动端项目。
3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。
4、大型购物网站实战,整个项目前后端分离开发;整个项目分为四部分:PC端网页、移动端APP、小程序、后台管理。团队协作开发,使用git进行版本控制。目期间可以扩展Three.js 、。
web前端学习路线思维导图
据统计,国外的前端开发人员和后端开发人员比例约为1:1,但是国内比例却在1:3以下,web前端开发职位的人才缺口巨大。
根据网上统计数据,上海Web前端开发工程师这一职位的月平均收入为1.5万元,工作经验达到3年的web前端工程师甚至达到3万元。
而且Web前端工程师一般工作1年左右,年薪一般就都能有15W,工作5年以上的通常能成为互联网公司技术总监或产品经理,年薪达到25W左右。
如果你想要学好web前端最好加入一个好的学习环境,可以来这个Q群,首先是132,中间是667,最后是127,这样大家学习的话就比较方便,还能够共同交流和分享资料
web前端就业薪资
我们先用三个数据了解一下。
web前端在北京地区的薪资:
北京前端开发工程师平均工资:¥ 18690/月,取自 23348 份样本。
按工作年限统计:
从图表中可以发现,web前端工程师月薪2-3万的人群占比最大,达到了30%以上,而10-15K月薪的人群也占到了11.8%。这个薪资水平远超其他行业。
web前端工程师发展路径:
工作1~2 年后可成为年薪15 万以上的HTML5/Web前端高级软件工程师;
工作3-5年后可成为年薪30万左右的高级工程师或团队负责人。
工作5 年后通常能成为互联网公司的技术总监或产品经理,年薪将达到50 万左右;
地区薪资排行
请点击输入图片描述
请点击输入图片描述
可以看到,在北上深、web前端的平均薪资都在15000左右,而即使在二线城市的南京、成都、前端工程师的薪资也都超过10000元,且相对于其他IT岗位,web前端的工作岗位非常多!
薪资变化趋势
请点击输入图片描述
请点击输入图片描述
web前端从2010年起,平均薪资都在大幅提升,并且在2021年达到最高点,至月薪20K左右。在2021年虽然稍有下降,但是依然很高,超过18000元。
各阶段web前端工程师的薪资范围
当然也只是一个范围,仅供参考:
1、切图熟练、能写一些JS效果(HTML+CSS+jQuery):月收入5k~1w
2、会切图会JS,并可以熟练用JS开发各种组件:月收入8K~1.5w
3、具备前两条件,熟悉几个个后端语言:月收入1.5w~3w
4、具备以上所有条件,并对前端架构、性能优化方面有深入了解:月收入平均4w,并且企业抢着要!(毕竟现在人才缺口,而且越顶尖的人才越稀缺)
所有知识框架,那肯定是一个结构型的展现,就是一棵树。web前端的知识点非常多,也非常散,需要好几层结构来组织这个体系,否则就会显得很乱。那么如何组织、把谁和谁放在一块儿?这是真正值得我们去思考的,你也可以自己来思考一下这个问题。
在我总结的这个知识框架中,首先第一层我划分为:理论知识,类库框架,编码开发,运行环境。如下图:
接下来给大家解释一下:
这个图要从下往上看,为何?——因为下面是上面的基础;
首先,我们需要一定的理论知识,不管是你听别人讲授、自己看书还是网上淘资料,你都需要一定的理论知识,每一种程序开发,都避免不了。
第二,有了这些理论知识我们就可以编码了——不错——but,没有人能抵挡住第三方框架和类库的诱惑,例如jquery;
第三,有了这些理论知识和协助我们的类库框架,我们就可真正的编码了。大家可能以为编码开发不就是写代码吗,还有啥?——这里面道道多着呢;
最后,开发程序的目的,最终是为了能高效、稳定的运行在相应的环境中,这其中又有哪些事情需要我们去做?请期待;
理论知识 包括“软知识”和“硬知识”
“软知识”和“硬知识”大家可能觉得词陌生,其实我一说大家就能明白。
所谓“软”的就是能在各个程序开发中都用到的,算是基本功、内功,例如数据结构、算法、设计模式、面向对象等等;
所谓“硬”的就是能直接用于本程序开发的。用C语言你就得学C语言语法,此时学java没用。我们web前端开发所需要的硬知识其实都包含在三个标准里面:http标准、W3C标准和标准;
聊一聊web前端开发中的“硬知识”
“软知识”的内容非常多,也是我们时代学习的重点(没学好是另回事儿,毕业再恶补)。我们本次主要讨论的是web前端这一个方向,因此就点到为止,让大家知道这些知识也在知识体系中扮演重要角色。
刚才说道,硬知识有三个标准:http标准、W3C标准和标准,那咱们就挨个聊聊这三个标准。
1. http标准
为什么做web前端要了解http标准?——因为浏览器要从服务端获取网页,网页也可能将信息再提交给服务器,这其中都有http的连接。web系统既然和http链接有瓜葛,你就必须去了解它。
我的意见是:你不必去非常了解http的详细内容,但是你要了解web前端开发常用的一些http的知识——就是上图中我列出来的那些。当然,我知识列了一个纲,详细内容还得靠你自己去查阅(本文章讲的是知识框架,不会涉及任何知识点的详细内容)
关于这方面的知识,建议去查阅《图解http》这本书,浅显易懂的讲述了这些内容,我曾经也看过。
2.W3C标准
如果说你只知道web前端的一个标准,估计肯定是W3C标准了(据我了解,貌似大部分人真的都只知道这一个标准)。它的内容非常多,看看www.w3.org/TR/这个页面。
写到这里让我想起了一句话:2/8原则——20%的功能满足80%的需求。我觉得这句话用到这里非常合适,我们在平时开发过程中根本用不到这么多东西。反而,你要把平时用的多的东西搞懂了。
下图的这些知识,我想不用再过多解释了,这就是我文章开发说的“三大块”(html、css、js)。现在你要知道,它们只不多是W3C标准的一部分,而W3C标准也只是web前端开发知识体系中的一部分而已。
(下图没有完全展开,想看权展开的图,可下载本文一开始提供的附件)
关于CSS的基础知识,毛遂自荐一下自己之前的一篇系列博客:《CSS知多少》
3.
简称ES,写全称太麻烦了。
有些人可能只知道,而不知道ES——其实,js是在ES的基础上,为web浏览器做了一部分封装(增加了DOM操作、BOM操作等)。
如上图中的这些概念,大家可能平时都在中看到,其实他们是ES的内容。只不过继承了ES的这些特性,并且用的比较广泛,因此才会在js中讨论的多一些。
还是那个“2/8原则”。其实ES中的内容也非常多,而且更新很快,现在都到ES6了。但是我上图中列出来的这些都是最重要的概念。如果你不懂原型、闭包和作用域,那就说明你还不完全了解ES,也就是不完全会用。
在此毛遂自荐自己之前的一篇系列博客,大家可以去参考:《深入理解原型和闭包系列》
5. 框架和类库
前面已经描述完了web前端开发所需要的理论知识。如何实践呢?——不能蛮干——还得绕世界去看看,有哪些大牛已经为我们做出了如此多的贡献。
用下面的这些类库或者框架,能大大提高你的开发效率。
首先,jquery一定是大部分web前端开发者不可或缺的工具。而我利用jquery不仅仅停留在只使用它的API和插件上,我还会自己去写jquery插件,我还会去读jquery的源码、了解jquery的设计思路。如果你也能那样做,请相信我,你会收获到意想不到的效果。如果有一个问题:怎样才能最最透彻的理解的事件系统?最佳答案之一:读几遍(一遍可能读不懂)jquery关于事件处理部分的源码!
bootstrap不用再过多解释了吧,从github上的排名也能看出道道来。甚至连我们公司的UI设计师,都从bootstrap上截图作为素材。
是全世界最强大的图标系统。相比于css制作图标来说,这个要好很多倍,不管是开发、效率还是维护上。icomoon.io能让我自定义选择自己的图标文件。
requirejs和seajs这种模块定义系统,也一定是你系统中不可或缺的。我曾经看过一个教程,讲师就说:requirejs带来了既jquery之后的第二次前端技术变革。
其他的,backbone、angular、react这些也慢慢的开始发挥了他们的价值,此处精力有限就不再赘述了——但是,他们很重要——你至少要试着去了解它们。
6. 编码开发
要问编码IDE哪家强,当然要属微软的visual studio!但是即便是微软的VS最新版本,它也代替不了下面要说的这套开发环境。
如果你专门做web前端,就不要在用vs了,当然要选择sublime。写html语句还用手动一条一条写吗?你得需要zencoding的协助,否则效率太差了。
另外,针对html、css、js的压缩、合并、语法检查,文件的清除、复制这些操作,你还要手动去做吗?——你需要grunt或者gulp的帮助。
在此毛遂自荐自己的教程《用grunt搭建自动化web开发环境》,讲的比较详细,适合初学者学习。
如果你的系统中有比较多的js代码或者文件,请选择一个合适的模块定义规范——CMD / AMD
请用git来帮助你做文件版本管理,最简单的就是使用github。
调试、测试,也都有专门的工具,都是需要学的……
——我的天哪……这些字写到现在写的我的手都酸了,别说要学习这些知识了——再也别说我们web前端是“三大块”了!
7. 运行环境
当系统真正到了运行环境中,当你觉得终于完事儿的时候,其实还有好几个知识点需要你掌握。看下图:
首先,你要知道web系统虽然大部分是在浏览器下运行,但是js可能会被运行在node环境。
在浏览器环境下,最重要的两点是:web安全和性能优化。需要注意的纲要我都列出来了,如果想了解推荐两本书《白帽子将web安全》《高性能网站建设指南》
8. 其他
以上这些是全部的知识体系。如果你想成为一名合格的、让leader喜欢的程序猿,你除了知道这些知识之外,我觉得还需要以下几点:
要了解敏捷软件开发流程(如SCRUM)和项目管理知识(如考取PMP),这也属于一种“软”知识吧;
要学会在网上和别人交流(博客、qq群、开源项目),交流能让自己看到自己的不足;
要学会自我反省和自我学习。就像我现在一样,试着自己总结一下属于自己的东西,随时反省随时进步
互联网行业的高薪是众所周知的,而前端作为互联网公司越来越重视的技术开发模块,薪资收入同样一路走高。
从职友集采集到的的数据可以看到,北京地区前端岗位的平均月收入为20.1K。
这个薪资收入在其他部分传统实体行业中,已经属于天花板级别的收入了。而在前端岗位中,这仅仅是平均薪资,也就是说作为一个前端开发程序员,只要坚持学习,不断进步,一定是可以达到更高的收入水平。
自2016年至今,前端岗位的工资一直在快速增长,2016年北京各地区的前端岗位平均工资仅在14500元左右,至今已达到20000元了。所以,从事前端工作,只要技术过关,涨薪应该是最简单的事情。
技术成熟,入行门槛低
前端开发是一门对初学者非常友好的学科,不需要特别扎实的专业知识,文科生都可以轻松胜任。
前端入门需要学习的知识包括HTML和CSS,前者只是结构标签,后者是样式配置,入门是非常简单的。大家跟着好程序员的相关视频进行学习,或者找相关书籍来看,都可以实现轻松入门。
Web前端入门门槛低的另一个重要体现就是,符合82定律,也就是20%的东西使用率占到80%。因此我们的重点就是把这20%学起来,然后再逐步攻克剩余的80%知识点。
但是入门门槛低不带表前端岗位的成长性低,相反,前端的高端岗位收入是非常可观的,以前端架构师为例,招聘网站给出的薪资普遍都超过了35K。
可以创业或独立工作
成为一名优秀的团队成员对于任何组织来说都是一项很重要的技能,但是当涉及到一些私人的业务,或者你想在工作之余赚取一些外快的话,独立工作是非常重要切具有巨大好处的。
作为一名WEB程序员,你可以轻松的通过创建WEB应用、网站、主题以及很多数字产品来赚钱。
你可以在一些网站上售卖你的作品,或者花费下午时间的一两个小时制作WordPress主题来赚取外快。
有足够的多的工具和框架适应
从1990年前端诞生发展至今,前端技术已经形成了一个大的技术系统。作为一名前端开发者,有足够多的工具和框架可以让你用不同的方法轻松的完成工作。
当然,这在很大程度上会受你选择的平台的影响,几乎所有主流的WEB开发平台和语言都有良好的社区支持,以及众多的开发WEB应用和网站的工具可供选择。从你开发到产品进入市场,只需要很短的时间。
可以在职赚外快
开发一套前端程序的启动成本很低,并不需要庞大的计算资源。只需要拥有一台电脑并且能够联网即可。开发 WEB应用的大部分工具都是免费的,作为一名前端程序员,可以很容易接到兼职开发的工作,无论是网站开发、APP开发、亦或是小程序开发,都是我们赚取额外收入的目标。
Web前端行业,发展前景的美好性毋庸置疑,从初级到高级,有很多发展方向比如技术专家、全栈开发、项目经理,主管,架构师等等。晋升空间都是非常的,薪资水平也会随技术水平不断提高。