WEB前端开发教程 WEB前端开发入门攻略

1、首先要从基本的HTML语言开始学起。网页的所有内容都是建立在HTML的基础之上，要想学好HTML，不要去使用任何集成工具，而是使用文本编辑器，直接从最简单的HTML可以写起。首先上网下载notepad++文本编辑器，一个好的文本编辑工具能达到事半功倍的效果。

2、w3shcool 网站提供各种前端开发教程，其教程很适合初学者学习。 根据教程的每一步，一边学习一边编写html，来学习基本的html语言语法。

3、学习了基本的html之后，没有JavaScript，网页永远都只是一张静态的纸。下一步要结合JavaScript来深入前端开发。原生的JavaScript是非常难用的，对初学者门坎比较高，但是如果从Jquery学习开始的话，你会发现js是那样的灵活和美妙，这会让你彻底喜欢上前端开发。再次利用w3shcool的jquery教程来学习。

4、学习jquery的时候，你会发现jquery可以做动画，可以修改页面的显示效果，这样你就自然需要了解css，w3school在此又要有用了，这时可以根据教程学习基本的css语法，你会发现它的选择器与jquery十分相似，其实这也是jquery强大的原因。学习了css，你就会发现自己终于可以做出漂亮的页面，而不是那些古板的条条框框了。

5、学习了以下这些前端开发的基础之后，可以再来下载nginx服务器，安装使用都非常简单，这样就可以了解一个网站在服务器上是如何运转，如何通过一个http的地址来访问你的网页，如何将自己的网页共享给别人。这样你的入门就毕业了，就可以向高级迈入！

6、这时候可以选择学习原生JavaScript，来知道jquery的原理，再学习html5，使用一些开源css框架。

老实说，前端经过这几年的快速发展，网上的文章和教程还是蛮多的，有经验的人能够根据资料制定出属于自己的学习方法和路径，但对于小白来说，还是有些难度。知了姐来给大家分享前端学习路径。针对0基础，非科班，没有编程经验，想学前端，但是不知道如何入门的人群。

基础部分：

1、HTML + CSS 这部分学习，可以模仿一些网站做些页面，在实践中积累经验。做到能与UI对接，能100%重构网站静态页面的开发，为后期编写页面逻辑、动态效果打基础。

2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，这个阶段需要掌握编程基础概念，培养逻辑思维能力。能够独立完成网站的页面开发（包括合理布局，JavaScript操作DOM）

进阶部分：

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

3、JavaScript高级与服务器基础，深入面向对象编程，具备移动端开发能力，处理浏览兼容问题，深入学习ES6/ES7语法规范，前后端分离开发思想。

4、框架与服务器，数据库，前端安全的学习，深入了解Node，数据库操作，前后端分离技术，前后台协作开发。熟悉NPM（Yarn），Node模块fs，http，路由，处理请求，express4（koa）；掌握创建websocket服务，MongoDB/MySQL数据库CRUD（Mongoose）；掌握微信小程序开发，掌握Vue2.x基础，Vue-router，Vuex等等。

5、React与组件化开发，深入学习组件化开发思想，了解webpack使用，掌握React开发基础，Hook，create-react-app等等。

升级部分：

有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。

其他补充部分：

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

以上内容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。

1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。

2、后端。应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。

最后，有经验的程序员都知道，学习编程最有效率的方式就是把你扔到一个项目组，连滚带爬的做一两个项目下来你马上会发现所有的知识点全都连到一起了，不再是分散的，而是形成一个整体了。那种感觉是仅仅深入钻研知识点而不写真实项目的人所不能体会的。 一个项目就是一根绳子可以把大片的知识串到一起。

如果想锻炼实际开发的能力而不仅仅是背诵或者了解一些知识点，如果想成为真正的好手，那么，还是做项目吧！

整体来看的话，Web前端开发需要学习的内容还是比较多的。前端是一门涵盖面很广的学科，而且技术更新较快，优秀的Web前端开发工程师应该具备快速学习能力。如果没有快速学习能力，就跟不上Web发展的步伐，所以需要不断提升自己，不断学习新技术、新模式。

---