许多对Web前端开发感兴趣的同学们，都希望系统而完整地学完前端开发课程。然而随着Web技术的不断进步，越来越多的开发模式和前端框架不断的涌现出来，让许多前端开发的小白学生们望而却步，有的甚至感叹：前端开发简直就是个“无底洞”啊！
多年在一线教学的小海老师，总结了市场上常用的技术，将为同学们不断地奉献出高质量的与Web前端开发有关的内容。今天就让我们从Web前端开发的学习曲线开始吧。
简单来说，Web前端开发的学习内容主要包括以下三个部分：Web页面项目的制作、移动端页面项目的制作、JS框架的学习。在这三部分学习内容的基础上，我将整个Web前端开发的学习曲线划分为了五个学习阶段。
1、起航：Web页面布局阶段。
在这里我还是要推荐下我自己建的web前端开发学习裙：659加上四七九再加上860，裙里都是学web前端开发的，如果你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。
第一阶段：起航
这应该是所有Web前端小白学习者必须经历的第一个阶段。该阶段将实现对Web界面的独立布局和制作，能够利用“块+CSS样式”的布局模式对页面进行设计。除此之外，作为一名前端设计师，还应该熟练掌握Photoshop的使用。
该阶段要重点学习以下课程：
Adobe Photoshop
HTML 超文本标记性语言
CSS 层叠样式表
“块+CSS”布局模式
2、扬帆：页面行为阶段。
第二阶段：扬帆
面对自己设计的Web页面，如果能够添上一些鼠标的特效或页面动画，那整个作品的效果就更加酷炫了。这就需要系统的学习页面的行为。该阶段将接触广为人知的jQuery框架，学习原生的JavaScript脚本语言。为了开发出更加符合商业应用的效果，可以学习jQuery UI技术，同时也能更加熟悉框架的使用方式。
前两阶段学习的结束，标志着你已经能够制作出市面上大部分常见的页面效果和布局模式了。这里，小海老师强烈建议在该阶段的最后学习Visual Studio的使用。Visual Studio可以用来制作.net后台项目，这里并不是让同学们系统的学习.net技术，而是由于许多公司在使用.net技术进行后台开发，所以我们可以在此阶段仅学习Visual Studio制作前端页面的方法和利用MVC模式开发Web项目的前端制作方式。
该阶段要重点学习以下课程：
jQuery技术
JavaScript脚本语言
jQuery UI
Visual Stuido的使用
这一阶段的难点是对JavaScript脚本语言的学习，我将该门语言的学习流程划分为三个部分：
第一部分：JavaScript基础知识
第二部分：DOM文档对象模型开发
第三部分：面向对象的程序设计
3、远航：移动页面设计阶段。
第三阶段：远航
在Web界面开发已经熟练的基础上，本阶段重点培养移动页面开发的常用技术和方法。首先要详细的了解CSS3给出的新属性和弹性盒布局模式。一款重要的样式类框架Bootstrap在本阶段成为了同学们学习的重点，这也是响应式布局需要大家重点掌握的框架。专享于移动页面开发的第三方框架可以适当的在本阶段接触几个，例如基于jQuery技术的jQuery Mobile、Framework 7、Light 7等，都是移动端开发得心应手的技术。
该阶段重点学习以下课程：
CSS 3技术
弹性盒布局与媒体查询
Bootstrap框架
jQuery Mobile技术
Framework 7框架
Light 7 框架
4、进阶：HTML5 API开发阶段。
第四阶段：进阶
HTML5技术在JavaScript的基础之上给出了大量的API，丰富了页面功能，使得以前要书写大量脚本代码实现的效果变得更加容易完成。如今HTML5技术比较成熟且常用的API包括：audio和vedio媒体API、Audio Context API、Canvas API、File API、WebStorage API等。HTML5中的许多技术还在不断地制订和完善过程当中，相信未来更多的实用性API会加入到HTML5的阵营中。
该阶段重点学习以下课程：
HTML5新增标记对和属性
audio和video媒体API
Canvas 画布技术
SVG可缩放矢量图形技术
Audio Context API
本地文件 File API
HTML5表单验证API
WebStorage API
……
5、探索：全栈式开发阶段。
第五阶段：探索
为了更好的向后台传递数据，再加上全栈式开发的需要，市面上出现了许许多多的功能性框架。该阶段是前端开发的核心阶段，需要掌握全栈式开发中服务器的搭建，最好在该阶段开始学习MySQL数据库和MongoDB数据库的设计与使用。
该阶段重点学习以下课程：
Node.js框架
Ajax技术
ArgularJS框架
VUE.js框架
结束语
当然，前端开发还有许许多多的知识需要在学习过程中不断的完善，例如JSON、XML、Sass、Less等。如果再能学习一些后台开发知识，例如ASP.net技术、JSP和Java技术、PHP技术，那么在你的知识储备上真的是如虎添翼。那么就让我们赶紧制定一个初步的学习计划，加入到Web前端开发多姿多彩的世界中去吧。更多编程方面的分享请关注微信公众号：程序员大牛！
网友评论