如何才能学好前端开发

前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：

基础知识：

1、HTMLCSS这部分建议在线教程学习，边学边练，跟着小测试。之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书。

2、Javascript要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在线教程学习。

进阶：

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。

1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。

2、Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：

a）框架。

推荐jQuery，简单易用，在W3school简单学习js后，直接上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用Codecademy学习Javascript，jQuery，用户体验真的很好（感谢TonyOuyang）。

b）Javascript语言范式。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。

Javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《ObjectOrientedJavascript》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己百度一下。

c）Javascript语言内部机制。必须弄清如下概念：JS中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容会在《Javascript语言精粹》中详细了解。另外，必须理解json。

d）dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能Javascript》这本书中关于dom编程的部分讲的也很好。

e）Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。

f）了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。

3、HTML5和CSS3。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。

再进一阶·代码层面：

有了以上知识，对于大多数小型网站，应该已经可以写出能够工作的代码了。但要想成为更专业的前端，还需继续努力。更高的要求大概还有四方面：

1）易维护，2）可测试，3）高性能，4）低流量（移动端）。

1）易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，最好了解设计模式，重构，MVC等内容。

2）可测性。

3）高性能。必读《高性能Javascript》

4）低流量。移动端关注比较多。

再进一阶·工程层面：

前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。

自学前端是一个非常辛苦的过程，最不可缺少的就是坚持下去的决心以及合理的学习计划。接下来我简单说一下自学前端需要注意的几点以及自学前端的路线。

自学方法：

1、作为一个初学者，你必须明确系统的学习方法，我建议一定要有一个指导人，全靠自己学，放弃的几率非常大，在你对web前端还没有任何概念的时候，需要一个人领进门，之后就靠自己钻研，第一步就是确定web前端都需要学哪些东西，并且在多少时间内学完，建议时间6个月保底。

2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写。所以在这里告诉大家，书可以看，但是是建立在你已经对于某个知识点有了具体的 *** 作的执行后，再用书去巩固概念，这样更加利于你对知识的理解。

3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。

不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。

推荐一个自学前端的路线，你可以参考一下：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、>

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vuejs开发WebApp项目、应用Reactjs开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：NodeJS全栈开发(1周)

内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

相关的视频教程你需要的话，可以加一下我的交流群，里面都有，其他的资料也可以问我要。

随着互联网的迅速发展，更多的人投入到web前端的学习中来，那么想要自学前端该怎么规划学习呢？要学习的技能涉及到哪些呢？对于新手学习HTML5的方法，我有几个建议给大家，希望可以帮助到想要学习HTML5的同学。

自学前端，首先的你得搞懂前端是什么，要学习的内容是什么，每天能抽出多少的时间去学习，能不能坚持的问题，很多同学可能就是三分钟的热情去学习，然后过几天就偷懒学不下去了，为了避免这样半途而废，大家选择学习的方式就是很重要的。还有就是重点的学习哪些技术。

以下就给大家分享一下web前端开发中需要掌握的技术：

1、学习HTML，这是很简单，基本的是要掌握div，formtable、Ulli、P、跨度、字体这些标签，这些都是常用的，尤其是DIV和表格，DIV，表也可以用于布局，但不灵活，和用于基本表处理数据。

2、学习CSS，CSS这里说的不包括CSS3Web前端开发工程师里面我们看到的，一个可以使用HTML或CSSCSSDIV的界面布局，所以CSS是用来协助HTML布局和显示，我们称之为“CSS样式”，为什么说DIVCSS？因为我说div是HTML主要用于布局的，所以div是这个东西的核心！CSS必须配合部。CSS必须掌握浮、位置、宽度和高度，以及较大值和小值，以100%，溢出，边缘、填充等。这些都是与布局相关的样式。

3、然后就是JS的学习。JS入门很简单，不需要很多东西，只要根据ID或名称DOM或”风格或价值，然后以一个ID或名称元标签，或额外的数据，在HTML，这是对数据的 *** 作有关系，那么数据逻辑的影响，无非是一个跳跃，d框，隐藏什么，这一切都是结合其他应用，代码一点都不难，将这些基本的JS。百度其他好。然后多看一些，不是什么问题。

4、学习jQuery相当于封装一组JS插件的JS。其目的是 *** 作更方便，编写更少的代码，jQuery条目也非常简单。这些都是切入点，要学会像JS，只是改变了JQ代码。剩下的就跟百度一样。

5、较好是指出背景语言，如java，php，为什么？因为我们是前台接口数据，从后台到点，如果后台代码，你知道如何与后台数据交互是好的，它节省了时间，也可以使前端代码更加规范。否则，可能是因为你回来了，无法忍受的数据，然后前端代码再次重写，这将是可怕的。

6、研究CSS3HTML5，为什么放在后面呢？因为现在对于前端人员来说，复合型且不断提升能力的人是企业很看中的，所以，如果你准备从事专业战线，学习一下会更好。

以上6点，基本上是一个web前端开发工程师掌握的技术，对于一个新手小白来说，掌握以上技能基本就能入职web前端职位了。

自学肯定是可以的，但是还是要看你学习的初衷是什么吧，如果是个人兴趣，只想业余学习一下，自学是不错的选择，但是如果是想从事这一块的工作，之后往这一块发展的话，去机构学习还是很有帮助的，而且如果是零基础的话，不建议自学，因为自学需要很好的自制力，学习理解能力等等，很多自学的时间战线会拉很长，而且一些小问题都容易卡住，找不到解决方法，影响学习进度，从而很多最后半途而废放弃学习。在机构的话，学习比较系统，还有专门的老师授课和解决问题，而且一群同学一起学习，学习氛围和环境都是很不错的。但是如果在机构学习的话，要注意机构的选择很重要的，主要看授课方式，师资，服务和就业，最好能自己亲自上门看看 ，感受一下学习环境和氛围。

---