Web前端的学习路线

第一阶段:

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础:

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

JS基本特效:

常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征:

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

jQuery:基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段:HTML5和移动Web开发

Html5:

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发:

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段:HTTP服务和AJAX编程

WEB服务器基础:

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础:

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇:

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇:

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段:面向对象进阶

面向对象终极篇:

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征:

继承性、多态性、封装性、接口。

设计模式:

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段:封装一个属于自己的框架

框架封装基础:

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级:

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充:

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段:模块化组件开发

面向组件编程:

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程:

AMD设计规范、CMD设计规范、RequireJS,LoadJS、淘宝的SeaJS。

第七阶段:主流的流行框架

Web开发工作流:

Git/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架:

Angular.js、Backbone.js、Knockout/Ember。

常用库:

React.js、Vue.js、Zepto.js。

第八阶段:HTML5原生移动应用开发

Cordova:

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目,配置,编译,调试,部署发布)。

Ionic:

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新,上拉加载,侧滑导航,选项卡)。

React Native:

React Native简介、React Native环境配置、创建项目,配置,编译,调试,部署发布、原生模块和UI组件、原生常用API。

HTML5+:

HTML5+中国产业、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段: Node.js全栈开发:

快速入门:

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

核心模块和对象:

全局对象global,process,console,util、事件驱动,事件发射器、加密解密,路径操作,序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。

Web开发基础:

HTTP协议,请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架:

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

Node.js开发电子商务实战:

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车,订单结算、在线客服即时通讯模块。

如何学习web开发环境搭建和脚手架的更多相关文章

  1. Web开发环境搭建 Eclipse-Java EE 篇

    Web开发环境搭建 Eclipse-Java EE 篇 [原创内容,转载注名出处] 1. 下载和安装 1.1 下载JDK 在Java官方网站下载最新版本的 Java SE:  http://www.o ...

  2. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

  3. 记录一下Web开发环境搭建 Eclipse-Java EE 篇

    转自https://www.cnblogs.com/yangyxd/articles/5615965.html Web开发环境搭建 Eclipse-Java EE 篇 [原创内容,转载注名出处] 1. ...

  4. 我的Java学习笔记 -开发环境搭建

    开始学习Java~ 一.Java简介 Java编程语言是一种简单.面向对象.分布式.解释型.健壮安全.与系统无关.可移植.高性能.多线程和动态的语言. Java分为三个体系: JavaSE(J2SE) ...

  5. Spring+Maven+Dubbo+MyBatis+Linner+Handlebars—Web开发环境搭建

    本文主要分三部分,分别是:后台核心业务逻辑.桥梁辅助控制和前台显示页面. 本Web开发环境综合了多种工具,包括Maven包管理与编译工具.Dubbo分布式服务框架.MyBatis数据持久化工具.Lin ...

  6. C++学习之开发环境搭建篇(一)

    由于C++是一门非跨平台语言,其开发的程序编译生成的可执行文件,只能在相应的操作系统中被执行,离开此系统环境将无法执行. 主要原因是不同的操作系统,可执行文件的结构不同,最为常见的操作系统是有:MAC ...

  7. ubuntu的web开发环境搭建

    为了保持mac的干净整洁,决定用PD搭建一条web开发环境,记下整个过程. ubuntu 首先是操作系统,本着习惯就好的原则,选用了Ubuntu server 12.04.4版.系统的安装很简单,ht ...

  8. OSGI的WEB开发环境搭建

    第一步,搭建OSGI环境: 打开eclipse,点击run->run configration..,配置如下,点击run. 运行结果如下图所示:说明OSGI环境搭建完毕. 第二步:搭建基于OSG ...

  9. Django学习笔记 开发环境搭建

    为什么使用django?1.支持快速开发:用python开发:数据库ORM系统,并不需要我们手动地构造SQL语句,而是用python的对象访问数据库,能够提升开发效率.2.大量内置应用:后台管理系统a ...

随机推荐

  1. IE6,7,8支持css圆角

    我们知道Webkit内核的浏览器支持-webkit-border-radius: 10px;属性(10px是圆角半径),可以直接解析出圆角;Firefox浏览器支持-moz-border-radius ...

  2. 关于IE缓存

    为了提高访问网页的速度,Internet Explorer浏览器会采用累积式加速的方法,将你曾经访问的网页内容(包括图片以及cookie文件等)存放在电脑里.这个存放空间,我们就称它为IE缓存.以后我 ...

  3. BZOJ4446 SCOI2015小凸玩密室(树形dp)

    设f[i][j]为由根进入遍历完i子树,最后一个到达的点是j时的最小代价,g[i][j]为由子树内任意一点开始遍历完i子树,最后一个到达的点是j时的最小代价,因为是一棵完全二叉树,状态数量是nlogn ...

  4. [CF409F]000001

    题目大意:输入一个数,输出一个数(愚人节系列) 题解:$OEIS$的$A000001$(原来我不想写的,但是洛谷的智能推荐推荐我做这个...是不是我太菜了) 卡点:无 C++ Code: #inclu ...

  5. visio应用程序相关设置-选项-常规

    1.用户名称,可读写 ApplicationSettings.UserName m_Visio.Window.Application.Settings.UserName = "BEIJING ...

  6. ionic改tab文字和icon图片的颜色

    The official way would be: Change in your theme/variables.scss Active icon for tabs on android is: $ ...

  7. Substrings Sort string 基本操作

    You are given nn strings. Each string consists of lowercase English letters. Rearrange (reorder) the ...

  8. 微信小程序基础知识

    一.基本目录结构 app.js 定义app入口 app.json 定义页面配置 index.js 页面中的事件和监听 index.wxml 定义布局文件 1.app.json配置基本信息 { “pag ...

  9. I wrote a JSONHelper extension

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Newtonso ...

  10. HDU 1798 Tell me the area (数学)

    题目链接 Problem Description     There are two circles in the plane (shown in the below picture), there ...