还在羡慕程序员工资高吗？看完这篇前端学习计划，你也可以拿高薪

矫情吗；* 2023-06-25 10:22 10阅读 0赞

![还在羡慕程序员工资高吗？看完这篇前端学习计划，你也可以拿高薪][format_png]

# 什么是前端？ #

前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

> （核心技术：HTML、CSS、JavaScript）

**核心技术**是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

# 第一阶段 #

**1.html+css**

HTML、CSS、div+css布局、HTML+css整站开发，适当的敲一些网页的静态页面

**2.初级JavaScript（js）**

常见DOM树操作大全、Js基础教程、js内置对象常用方法、 ECMAscript、DOM、BOM、定时器和焦点图

**3.高级JavaScript（给大家整理了一套学习资料，见页尾处）**

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础，

悬着器、DOM操作、特效和动画、拖拽、变形、JQueryUI组件基本使用（JQuery的使用）

# 第二阶段 #

**1.移动Web开发**

尝试不同的服务端口，最常见的iOS，安卓，iPad等等（要把页面布局写得完美）

现在主流的技术主要有：1.iOS应用开发；2.Android应用开发；3.WinPhone7/8应用开发。还有一些系统级开发，如嵌入式操作系统，一般针对WinCE、Linux、Android、JVM等技术。

必须要掌握：跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机滚屏等等重要技术

**2.小程序开发**

![还在羡慕程序员工资高吗？看完这篇前端学习计划，你也可以拿高薪][format_png 1]

伴随着移动端，现在小程序越来越火，可以做一些微信小程序的开发来提高自己

**3.拓展**

常见的AJAX请求和json解析，Bootstrap布局，echarts的使用方法等。

# 第三阶段 #

前端最重要的就是模块组件化开发

学习主流的流行框架和库

React.js、Vue.js、Zepto.js、Angular.js、Backbone.js等等

至少要掌握1~2种框架的使用方法，或者根据自己自身以后工作的方向来学习自己需要的框架开发，

# 第四阶段（全栈开发） #

尝试服务端请求的尝试，虽然后台语言有很多，比如说PHP , JAVA , Phton等等，因为这里我们主要学的是JavaScript，所以推荐大家学Node.js，这样上手也比较容易，node开发包括：

Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试等

我们学习后台最要的是这个思想，以后在开发过程中，可以与后台开发人员更好的交流，避免产生的一些代沟

![还在羡慕程序员工资高吗？看完这篇前端学习计划，你也可以拿高薪][format_png 2]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLnBzdGF0cC5jb20vbGFyZ2UvZGZpYy1pbWFnZWhhbmRsZXIvODVkODlhYWYtMjkwYi00YmVlLWFlM2ItNzI4MzhhNDI3NWRj?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLnBzdGF0cC5jb20vbGFyZ2UvZGZpYy1pbWFnZWhhbmRsZXIvNjJjNzlhNGUtNzBhYy00MzJhLTg2MWQtNGY3ZDdlZDZkN2Vm?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLnBzdGF0cC5jb20vbGFyZ2UvZGZpYy1pbWFnZWhhbmRsZXIvZDRjMGE0MzQtZTQyOC00NjFlLTlhMTQtNmVlMTQ4ODExOGE1?x-oss-process=image/format,png