前端开发需要学什么啊？
2019-06-17 · 让每一名学员高薪就业
四川源码时代科技有限公司
前端开发是一门学习范围广，知识面积大的学科。如果你只想学习最基础的，丰富自己的能力，那你只需要掌握H5就可以设计的网页了。
如果你的目标是从事前端开发行业，那可能要将前端三大基础语言HTML、CSS，JavaScript吃透彻，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。无论是移动前端开发还是web前端开发，都离不开这三大基础语言。
掌握了语言，当然还得运用多种开发工具将它们呈现出来，比较常见的有Dreamweaver、Sublime Text 、HBuilder。
当然，如果你还想往更高领域发展，那就要探索更深的知识，你可能会接触到框架的使用。框架可以完成工具无法做到的事。目前三大框架有Angular、React、Vue。当然还有很多其它框架，都各有各的特点和优势，都是需要你慢慢学习的。
前端要学HTML、CSS、JavaScript。web前端开发是直接与用户接触，前端体验的好坏，以及美观程度是非常重要的。前端开发需要学习的知识非常的多，非常的杂，一个前端页面的开发，需要涉及很多的知识，且前端框架的更新速度很快，需要不断学习新知识。前端开发3个最基础的知识就是HTML、CSS、JavaScript。
1、HTML
HTML是构成网页的骨架，所有的信息显示都要靠HTML实现。一个网页可以没有CSS代码，没有JavaScript代码，但绝对不能没有HTML代码，HTML是web页面的核心。现在HTML发展到了HTML5，新版本增加了很多特性，使得HTML功能更加完善。
2、CSS
CSS在一个网页中起到的作用就像是一个化妆师，它可以让网页变的更加漂亮，更加易于浏览阅读。一个看脸的时代，CSS就是网页的化妆师。CSS的版本也发展到了CSS3，CSS3配合HTML5，让web开发进入了一个新时期。
3、JavaScript
JavaScript是web开发学习中的一个难点，JavaScript我们平时简称JS。JS需要系统学习，它的学习难度基本等同于学习一门后端开发语言，比如php。随着node.js的普及，前端开发后端化，node.js使用Chrome V8引擎，使得它可以做后端开发。JavaScript的应用越来越广泛，所以JavaScript的学习是非常重要的。
第一 前端开发容易学习吗？
关于这个问题，我只有一句古文接单：天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。人之为学有难易乎？学之，则难者亦易矣；不学，则易者亦难矣。
第二 学习前端有前途吗？
关于这个问题， 我的答案是：有前途，非常有前途，值得来学习。但是行业有前途，不代表你就有前途，因为前途是给有实力的人准备的，如果你不好好学习前端技术，只有三脚猫的功夫，那么前途和你只能擦肩而过，当然现在不会不要紧，可以加强学习，积累实力，任何一门技术的提升，都有一个过程。
第三 怎么学习前端技术才能进步的特别快？
关于这个问题，我的经验是跟着高手学习，让会的人带你，你才不会迷路，自学可以，但是自学太费劲也太麻烦，我们的时间成本和精力成本也是很高的。所以让高手带着你来学习，可以让你少走弯路，可以作为你学习前端的向导，我们开车出门现在还需要导航呢。我的前端就是跟一个高手学习的在网上，他每天在网上都有免费前端直播课，讲两个小时左右，讲的很有深度和广度，也很透彻明白，想学习前端的朋友有必要去听一下，想听这位前端高手直播课的同学，可以进入他的前端教程资料裙：首先位于开头的一组数字是：655，其次处于中间地带的一组数字是：567，最后位于尾部的一组数字是：613，把以上三组数字按照先后顺序组合起来即可，学习才有未来，学习才能把握人生的主动权，学习才有希望，逃避学习，只能沦为弱者，人，就应该活而成强者。
第四 大前端完整学习路线（详解）。
第一阶段：
（1）HTML+CSS:
首先 HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、
（2）JavaScript基础：
Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
（3）JS基本特效：
常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
（4）JS高级特征：
正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、
（5）Query：基础使用
悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。
第二阶段：HTML5和移动Web开发。
（1）HTML5：
HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.
（2）CSS3:
CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
（3）Bootstrap:
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
（4）移动Web开发：
跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。
第三阶段：HTTP服务和AJAX编程。
（1）WEB服务器基础：
服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
（2）PHP基础：
PHP基础语法、使用PHP处理简单的GET或者POST请求、
（3）AJAX上篇：
Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。
（4）AJAX下篇：
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。
第四阶段：面向对象进阶.
（1）面向对象终极篇：
从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
（2）面向对象三大特征：
继承性、多态性、封装性、接口。
（3）设计模式：
面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。
第五阶段：封装一个属于自己的框架。
（1）框架封装基础：
事件流、冒泡、捕获、事件对象、事件框架、选择框架。
（2）框架封装中级：
运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
（3）框架封装高级和补充：
JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。
第六阶段：模块化组件开发。
（1）面向组件编程：
面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
（2）面向模块编程：
AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
第七阶段：主流的流行框架。
（1）Web开发工作流：
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。
（2）MVC/MVVM/MVW框架：
Angular.js、Backbone.js、Knockout/Ember。
（3）常用库：
React.js、Vue.js、Zepto.js。
第八阶段：HTML5原生移动应用开发。
（1）Cordova：
WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战（创建项目，配置，编译，调试，部署发布）。
（2）Ionic：
Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果（下拉刷新，上拉加载，侧滑导航，选项卡）。
（3）React Native：
React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。
（4）HTML5+：
HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。
第九阶段： Node.js全栈开发：
（1）快速入门：
Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
（2）核心模块和对象：
全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。
（3）Web开发基础：
HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。
（4）快速开发框架：
Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。
（5）Node.js开发电子商务实战：
需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。
前端主要学习：html、css、javascript、PhotoShop、flash、php、asp等。
html + css这部分建议，边学边练。之后可以模仿一些网站做些页面。理解css每个元素的属性，样式的实现不一定只有一种写法，多想一想还有没有什么需要改进的地方。JavaScript。不是所有的网页都必须有js，但是要想实现一些超酷的功能和界面的时候，就需要涉及到js。
如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习，之后建议马上看《javascript语言精粹》。
Photoshop、flash，熟悉会一点儿就行了，没必要全部都学得精通，当然如果你在学习的过程中，发现你ps或者flash比较感兴趣的话，也可以尝试做美工这一行。html5和css3。可以先了解一下，然后再入手。毕竟IE的浏览器大多还不支持。
浏览器兼容，懂web标准，熟练手写 xhtml css3 并符合 符合w3c标准。代码能兼容主流浏览器Firfox，Chrome、Safari、IE、Opera。虽然IE6很多都不兼容，但现在还使用的人还是有的。
最后就是要熟悉一门后台编程语言如： asp、php、jsp等，都是很重要的。
前端自学者存在的学习误区：
1、所学东西可能已过时
奉为经典的东西可能已经过时，或者已经有了更好的替代者，而你获取信息的渠道有限，消息滞后，导致学习的内容也相对滞后。
2、学习方法盲目。
看书看不懂就找视频类教程学习，觉得教程跟自己的口味不符就另寻他法，因为自己缺少对资源的辨识能力，总是在没有清晰规划学习线路的情况就盲目学习，导致无效学习时间过长而收获寥寥。
3、只有理论，缺乏真实项目锻炼。
对技术的理解停留在理论层次，而缺乏真实企业项目的历练，如果没有相关实习或工作经历，对前端岗位具体的责任划分和工作流程了解不充分。
如何自学前端知识：
自学方法：
1、作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。
2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。
3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。
4、不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。
学前端的话，书籍是必不可少的：
1、《JavaScript高级程序设计(第3版) 红皮书 》，适合有一定编程经验的Web应用开发人员阅读，也可作为高校及社会实用技术培训相关专业课程的教材。
2、《JavaScript权威指南(第6版)》 犀牛书，本书不仅适合初学者系统学习，也适合有经验的 JavaScript 开发者随手翻阅。
3、《JavaScript DOM编程艺术 (第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库。
4、《CSS权威指南(第三版)》，不管你是一个有经验的Web开发人员还是一个彻底的初学者，《CSS权威指南(第3版)》都是你的CSS学习源泉。
5、《JavaScript设计模式》，适合JavaScript初学者、前端设计者、JavaScript程序员学习，也可以作为大专院校相关专业师生的学习用书，以及培训学校的教材。
6、《你不知道的JavaScript(上中下卷) 》，本书既适合JavaScript语言初学者了解其精髓，又适合经验丰富的JavaScript开发人员深入学习。
7、《Vue.js权威指南》，该书内容全面，讲解细致，实例丰富，适用于各层次的开发者。
学习路线：
第1阶段：前端页面重构(4周)
内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段：JavaScript高级程序设计(5周)
内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段：PC端全栈项目开发(3周)
内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段：移动端项目开发(6周)
内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发(1周)
内容包含：(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段：NodeJS全栈开发(1周)
内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
视频教程：
如有疑问，欢迎加入我的前端qq交流群，里面也是一群学前端的小伙伴，我们可以一起学习，互相监督，互相交流学习经验，一起进行项目实践，还有很多学习资料哦~期待你的加入。
