关闭

2016最新前端学习计划

标签: 前端2016学习路线
10239人阅读 评论(17) 收藏 举报
分类:

 

 

 


一、前端学习路线图

 



二、前端学习路线图——视频篇


六大

 

阶段

学完后目标

知识点

视频资源(附笔记+PPT+模板

 

+源码)

密码

准备篇

学习周期:15天


学完后目标:

1、熟悉媒体查询和响应式设计,使得设计有适配不同的移动;

2、熟悉基础CSS的格式和CSS盒模式;

3、理解网页间是如何链接的、如何设计多列布局,可以处理表单字段和媒体元素;

4、理解如何创建和浏览一个基本的网页。


市场价值:

熟练掌握之后,可以满足市场静态页面布局,但是市场就业工资相对较低,还需继续往下学习。

开发工具的安装配置的介绍

sublime、webstorm、Visual Studio Code

正在玩命更新中 

HTML

理解如何浏览和创建网页、基本的语法规范、常用标签及属性、网页之间的链接与跳转、标签节点层级节点

前端轻松入门: HTML超强视频分享

《前端轻松入门: HTML笔记+PPT+源码》

pt2p
bya5

CSS

基本语法和三种书写位置、选择器和格式化排版、盒模型的高级用法、常用布局模型  

前端轻松入门:CSS超强视频分享

《前端轻松入门:CSS笔记+PPT+源码》

《CSS梅兰商城项目实战视频教程 传智出品,无偿分享!》

《CSS梅兰商城项目实战视频教程—配套资源》

ha3i
u7k1
isx8
6scx

JavaScript入门

基础语法和变量、数据类型和数据类型转换、条件判断、循环语句、函数、数组等内置对象

《快速入门JavaScript 三天视频教程分享》  

《快速入门JavaScript教程配套笔记+源码+PPT》

t4bw
3w93

京东首页实战

 CSS代码抽象与复用、 浮动的盒子布局、padding 和 margin 使用、层级的使用、定位特性的各种使用场景

正在玩命更新中

 

基础篇

学习周期:20天


学完后目标:

1、能够基于jQuery实现炫酷效果和复杂的功能模块;

2、能创造或添加自定义效果到网页上;

3、能熟练添加标准的动画效果到网页上;

4、熟练操作DOM模型。


市场价值:8-13K

JavaScript基础

JS语言的基本构成、变量、数据类型、表达式、选择结构、循环结构、短路语句、函数基础

《五天Javascript基础加强视频分享!》

《【前端】Javascript基础加强配套笔记+源码+PPT》

98ef
p23z

DOM + BOM

DOM基本结构、节点对象的操作、事件特性及使用、常见的内置DOM对象、常见的BOM功能

正在玩命更新中

 

网页特效与进阶

在网页特效中常用的编程接口、动画编程、事件对象和冒泡、缓动框架封装和旋转木马案例、正则表达式及应用

正在玩命更新中

 

Jquery

选择器、基本操作API、动画API、事件API、插件机制、原理分析、项目实战

正在玩命更新中

 
核心篇

学习周期:20天


学完后目标:

1、能够基于jQueryMobile/Zepto等框架进行移动端js功能开发;

2、能够熟练使用html5/css3/ canvas进行移动端页面和功能效果开发,并且能够基于原生和框架进行响应式效果开发;

3、能够基于jQuery、bootstrap等框架实现炫酷效果和复杂的功能模块;

4、能够独立制作电商类,企业类网站,以及常见js动态效果。


市场价值:13K-18K

HTML5 + CSS3

语义化结构、多媒体 、本地存储、其他常见API、CSS3 选择器、CSS3 边框、背景、阴影、CSS3 过渡和动画、CSS3 伸缩布局、Canvas

2016年最新H5+CSS3教程视频 

v53j

服务端编程

端的概念、Web 服务器的概念、服务器搭建、XMLJSON 

正在玩命更新中 

PHP

PHP基础语法 、PHP服务端编程基础

正在玩命更新中 

AJAX

基本编程接口、异步数据交互、模板引擎的使用、跨域的实现方案、增量加载

2016年最新AJAX教程

hj8n

移动Web开发

响应式布局、Bootstrap框架深度使用、Zepto.js库、预编译CSS

《传智前端就业班视频分享:移动web开发课程》

《移动web开发课程源码+笔记+PPT》

n6mi

eq37

进阶篇

学习周期:15天


学完后目标:

1、熟练使用闭包、高级函数、立即执行函数(匿名函数)等;

2、熟练使用元编程,解决Callback等;

3、熟悉JavaScript基本语法。


市场价值:18-22K

面向对象在JS中的体现与实践

面向对象理论、对象的基本概念、对象的属性和方法、通过字面量创建对象

《javaScript高级面向对象-传智前端就业班视频免费分享 》

《javaScript高级面向对象配套源码+笔记+PPT》

nwu6
8x2y

开发过程中常用的模式与思想

开闭原则、MVC思想、高内聚低耦合、工厂模式

正在玩命更新中 

JavaScript高级特性

通过构造函数创建对象、原型对象、继承的多种实现方式、原型链、函数的本质以及 Function 构造函数、作用域链、闭包、沙箱模式

正在玩命更新中 

封装一个自己框架

选择器框架、CSS操作封装、属性操作封装、其他DOM操作的封装、事件框架的封装


《传智前端就业班视频分享:JavaScript 高级框架设计

JavaScript 高级框架课程配套笔记+PPT+源码


kcv9
8ega

高级篇

学习周期:20天


学完后目标:

1、了解主流的后台技术和前后端协作方式,从全局角度理解项目的整个生命周期;

2、熟悉nodejs的全栈式解决方案;

3、从前端的全局角度认识相关的框架;

4、熟练使用VueJSAngularJS等框架完成复杂的前端功能,熟悉前端工作流。


市场价值:22K+

前端工作流

自动化流程工具使用、源代码版本控制工具使用、依赖项管理工具、项目模板脚手架

正在玩命更新中 

流行框架

Angular基本使用、Angular高级特性、VueJS基本入门和路由、项目实战:豆瓣电影

正在玩命更新中 

模块化开发

模块化开发规范、常用的模块化开发工具、RequireJS、AMD/CMD、统一规范UMD、SeaJS

正在玩命更新中 

NodeJS

Node介绍、基本操作、常用内置模块、高级特性、常用框架

正在玩命更新中 

移动

APP 

开发

学习周期:8天


学完后目标:

1、深刻理解移动App的开发模式和技术选型;

2、熟练使用各种模式开发移动应用;

3、了解微信企业公共号开发。

场价值:22K+

混合式应用开发

混合式平台架构、混合式开发实践、京东APP端实战

正在玩命更新中 

微信开发

微信公共号介绍、平台API对接、X5兼容处理、内置接口

正在玩命更新中 

React

组件化思想、基本使用、核心特性、JSX、TODOMVC案例




正在玩命更新中
 

React Native

环境与工具、实现思路、常用组件、常用插件、综合案例:豆瓣电影

正在玩命更新中 

移动其他APP开发框架

PhoneGap、AppCan、HTML5+、Framework7

正在玩命更新中 


三、前端学习路线图——工具篇

 

 

前端

 

流行

 

框架

angularangular-1.5.8离线文档http://pan.baidu.com/s/1pLVilLp rrbv
angular.js 在线中文文档:http://www.angularjsapi.cn/
angular.js官方文档https://angular.io/docs/ts/latest/
reactreact-15.3.1离线文档http://pan.baidu.com/s/1kUKkMTh 2vmp
React 在线文档 http://reactjs.cn/react/docs/getting-started-zh-CN.html
ionicionic-1.x离线文档:http://pan.baidu.com/s/1nuFxaWT3jbd
ionic 在线文档 http://www.ionic.wang/js_doc-index.html
node.jsnode.js 官方在线文档 https://nodejs.org/dist/latest-v6.x/docs/api/
BootstrapBootstrap在线文档 http://www.bootcss.com/
vuevue离线文档:http://pan.baidu.com/s/1c2LvllQ xp7e
vue.js 在线文档 http://cn.vuejs.org/guide/
以上资源合并下载https://pan.baidu.com/s/1pLfbxnP i4mr

前端

 

开发

 

工具

CSS处理工具less 官方文档http://lesscss.cn/#download-options
sass 官方文档 http://www.w3cplus.com/sassguide/
构建工具GRUNT 官方文档http://www.gruntjs.net/getting-started
Gulp  官方文档http://www.gulpjs.com.cn/docs/getting-started/
字体库iconfonthttp://www.iconfont.cn/
fontawesome离线文档http://pan.baidu.com/s/1slTcqFbb3im
fontawesome在线文档

http://fontawesome.io/

代码编辑工具WebStorm 前端开发神器下载http://pan.baidu.com/s/1dEATsWhhjak
Sublime Text 下载+全套快捷键http://pan.baidu.com/s/1eSjxmTk2yka
常用编辑器Editplus下载http://pan.baidu.com/s/1dFidrpRgrnq
编码必备:Adobe Dreamweaver CC下载   http://pan.baidu.com/s/1nvLIBbFz637
编辑利器:Atom下载https://pan.baidu.com/s/1i46H2dBs5ft
免费编辑器Brackets下载https://pan.baidu.com/s/1bYGa1g4152
编写代码利器:Notepad++下载https://pan.baidu.com/s/1bp9lMyV83yy
其它工具YII框架软件下载http://pan.baidu.com/s/1i5Ezk5vvnef
数据库客户端软件navicat下载http://pan.baidu.com/s/1hr91pqcmnny
集成环境软件WampServer下载http://pan.baidu.com/s/1i5uMxvfpkkc 
抓包工具Httpwatch下载https://pan.baidu.com/s/1skFo7spkph4
文件及目录对比神器Beyond Compare下载http://pan.baidu.com/s/1eS5bViici6t
nodejshttp://pan.baidu.com/s/1c2olq84cfn9
以上资源合并下载https://pan.baidu.com/s/1i518nvJm4gt

前端

 

手册

HTML5html5参考手册 api 下载https://pan.baidu.com/s/1jIQ8yBcee3z
CSSCSS2.0中文参考手册 api 下载

https://pan.baidu.com/s/1dEJbf8X

u23n
CSS3.0中文参考手册 api 下载https://pan.baidu.com/s/1bLPc7Ohxa3
css3.4 API 中文样式表手册下载https://pan.baidu.com/s/1jI8r3L099ar
CSS4.0中文参考手册 api 下载https://pan.baidu.com/s/1dFsmGUXxs2y
JavaScriptJavaScript参考手册http://pan.baidu.com/s/1jIqaPVK4ivy
javascript权威指南http://pan.baidu.com/s/1gfx867h66e7
JavaScript中文教程http://pan.baidu.com/s/1jHD1pIm2fth
JavaScript中文手册api下载https://pan.baidu.com/s/1eSeD0cyrmhq
jQueryjQuery1.11.0_中文http://pan.baidu.com/s/1qXQMlU873rf
jQuery api 1.8 中文(离线)版下载https://pan.baidu.com/s/1c1WAaYWi2fm
BootstrapBootstrap中文api参考手册https://pan.baidu.com/s/1cn9hsM6sd3
Bootstrap-v3.3.5中文apihttp://pan.baidu.com/s/1jHKmPOas5hv
Bootstrap3.2.0中文文档http://pan.baidu.com/s/1c155VpQigxj
其它手册Zepto中文api参考手册https://pan.baidu.com/s/1dFOGHqDzsic
AngularJS中文api离线参考手册https://pan.baidu.com/s/1i5oaLYtgd57
MYSQL手册https://pan.baidu.com/s/1boFHhwz7d1k
DOM手册https://pan.baidu.com/s/1qXDUHm05s8p
w3school api文档下载 https://pan.baidu.com/s/1miuau16qvqi
seajs离线文档http://pan.baidu.com/s/1hrB31liaqzn
以上资源合并下载https://pan.baidu.com/s/1nuJ0Ivfhrxv

前端

 

插件

Canvas图表插件

echartshttp://echarts.baidu.com/index.html

模板

 

引擎

underscorejs underscorejs官方文档 http://underscorejs.org/
underscorejs中文文档 http://www.css88.com/doc/underscore/ 
artTemplate artTemplate离线文档https://pan.baidu.com/s/1qXHsMGObaer
artTemplate官方文档 https://github.com/aui/artTemplate 
以上资源合并下载https://pan.baidu.com/s/1dEErv1Jc865



四、前端学习路线图——经验篇

 

 

前端技术

 

文章

 

(新人篇)

从零基础到精通的前端学习路线http://bbs.itheima.com/thread-318332-1-1.html
为什么整个互联网行业都缺前端工程师?http://bbs.itheima.com/thread-329957-1-1.html
如何成为一名优秀的前端工程师http://bbs.itheima.com/thread-329959-1-1.html
前端开发需要学什么?http://bbs.itheima.com/thread-329958-1-1.html
高效的前端编程入门训练方法http://bbs.itheima.com/thread-324088-1-1.html
写给刚入门的前端工程师的前后端交互指南http://bbs.itheima.com/thread-330979-1-1.html
写给前端新人:前端开发必会的二十五个知识点http://bbs.itheima.com/thread-329964-1-1.html
【干货】最全面的前端开发指南:HTML、CSShttp://bbs.itheima.com/thread-330971-1-1.html
【干货】最全面的前端开发指南:JavaScript http://bbs.itheima.com/thread-330976-1-1.html
HTML5新手入门指南http://bbs.itheima.com/thread-330655-1-1.html
HTML5 如何重新定义webhttp://bbs.itheima.com/thread-330656-1-1.html
HTML5标签使用的常见误区http://bbs.itheima.com/thread-330652-1-1.html
20 个重要的 HTML5 面试题及答案http://bbs.itheima.com/thread-330969-1-1.html
css工作中常用的效果总结http://bbs.itheima.com/thread-330963-1-1.html
CSS编码规范http://bbs.itheima.com/thread-330644-1-1.html
20个很有用的CSS技巧http://bbs.itheima.com/thread-330983-1-1.html
流行的CSS思想之——浅析OOCSS必须看这个贴 http://bbs.itheima.com/thread-329965-1-1.html
41个Web开发者必须收藏的JavaScript实用技巧http://bbs.itheima.com/thread-330982-1-1.html
10+ 实用的 JavaScript 调试小技巧http://bbs.itheima.com/thread-330977-1-1.html
新人拒绕晕: JS中toFixed四舍五入的坑http://bbs.itheima.com/thread-329961-1-1.html
流行的CSS思想之——浅析OOCSS必须看这个贴 http://bbs.itheima.com/thread-329965-1-1.html
8种CSS样式使用技巧http://bbs.itheima.com/thread-332570-1-1.html
如何写出小而清晰的函数http://bbs.itheima.com/thread-332579-1-1.html
Web前端有哪些职位?http://bbs.itheima.com/thread-332574-1-1.html
CSS消失的边界问题http://bbs.itheima.com/thread-332606-1-1.html
网页前端学习总结(一)http://bbs.itheima.com/thread-332609-1-1.html
网页前端学习总结(二)http://bbs.itheima.com/thread-332612-1-1.html
以上资源合并下载http://pan.baidu.com/s/1slcVfvJgjqg

前端技术

 

文章

 

(经验篇)

【前端技术分享】Web前端性能优化的9大问题http://bbs.itheima.com/thread-329968-1-1.html
JavaScript学习笔记之判断语句的使用http://bbs.itheima.com/thread-329969-1-1.html
Nodejs --- 丢掉flash,兼容IE789的进度http://bbs.itheima.com/thread-329970-1-1.html
如何实现点对点随机匹配聊天http://bbs.itheima.com/thread-329972-1-1.html
一看就懂的ReactJs入门教程http://bbs.itheima.com/thread-329973-1-1.html
谈一谈循环的性能提升http://bbs.itheima.com/thread-329975-1-1.html
超强的JS总结(一)http://bbs.itheima.com/thread-329984-1-1.html
zepto和jquery的区别,zepto的不同使用小结http://bbs.itheima.com/thread-330314-1-1.html
CSS3图片倒影技术http://bbs.itheima.com/thread-330315-1-1.html
HTML5标签使用的常见误区http://bbs.itheima.com/thread-330316-1-1.html
JavaScript中的数据类型判断http://bbs.itheima.com/thread-330495-1-1.html
web前端35个jQuery小技巧!http://bbs.itheima.com/thread-330632-1-1.html
前端性能之----减少DNS查询次数http://bbs.itheima.com/thread-330913-1-1.html
vue中引入swiper关键问题解决http://bbs.itheima.com/thread-330915-1-1.html
理解ionic2 + angular2开发方案http://bbs.itheima.com/thread-330931-1-1.html
Ajax同步与异步优缺点与使用http://bbs.itheima.com/thread-330938-1-1.html
Bootstrap滚动监控器的设计http://bbs.itheima.com/thread-330645-1-1.html
JS家的十大经典排序算法(上)http://bbs.itheima.com/thread-331275-1-1.html
JS家的十大经典排序算法(下)http://bbs.itheima.com/thread-331290-1-1.html
详解JavaScript存储http://bbs.itheima.com/thread-332646-1-1.html
有趣的CSS题目(2): 从条纹边框的实现谈盒子模型

http://bbs.itheima.com/thread-332647-1-1.html

以上资源合并下载http://pan.baidu.com/s/1slpMuBze56b



五、前端学习路线图——面试篇

 

 

前端面试

宝典

技术篇大牛教你如何写出优秀的前端工程师简历http://bbs.itheima.com/thread-318331-1-1.html 
近期整理前端面试题,供大家参考http://bbs.itheima.com/thread-330105-1-1.html
前端开发工程师面试题http://bbs.itheima.com/thread-330106-1-1.html
百度2016校招笔试题(含答案、解析)http://bbs.itheima.com/thread-330107-1-1.html
前端面试常见问答http://bbs.itheima.com/thread-330633-1-1.html
超实用的前端面试题http://bbs.itheima.com/thread-330627-1-1.html
薪资篇面试官如何评判应聘者的工资

http://bbs.itheima.com/thread-330108-1-1.html

当HR问“你对薪资有什么要求”时怎么回答
HR指责要薪太高怎么办?
自我介绍篇如何进行自我介绍? 

http://bbs.itheima.com/thread-330109-1-1.html

“你有什么优劣势?”
“你为什么选择我们公司?”
项目篇如何介绍简历中的项目?http://bbs.itheima.com/thread-330110-1-1.html
HR贬低项目时你该怎么办“
项目经验少该怎么办?
学历年龄篇你学历低,为什么要录用你?http://bbs.itheima.com/thread-330111-1-1.html
你是不是年龄太大了?
你太小了,你能承担项目吗?
规划篇你准备在我们这家单位做多久?http://bbs.itheima.com/thread-330112-1-1.html
未来五年的规划是怎样的?
以上资源合并下载    

https://pan.baidu.com/s/1geXjXvl

byn6


前端小白到大牛的华丽变身,学上面的资源就足够了!

 


11
0
查看评论

2018学习计划

浑浑噩噩的过了2年半了,现在的工作也开始了重复流水了(可能是自己的知识水平到了一定的瓶颈),需要用看书来给自己充电了! 2018书单如下: 1、深入理解Java虚拟机:JVM高级特性与最佳实践 2、Effective Java 3、Spring技术内幕:深入解析Spring架...
  • mggwct
  • mggwct
  • 2018-01-07 14:59
  • 247

2016最新前端学习计划

以下是简单的使用说明 前端学习路线图:由前端教学经验相当丰富的老师梳理而成,知识由浅入深,循序渐进。自学前端,按照这份学习路线图学习就可以了! 视频篇:根据学习路线图搭配了相应的视频、源码资源。部分资源还在玩命更新中,请稍安勿躁,静候更新。 工具...
  • OnlyLove_KD
  • OnlyLove_KD
  • 2016-12-04 19:04
  • 1415

推荐的前端学习计划

1. 零基础 http://www.runoob.com/ 推荐学习环境  notepad++或者HBuilder 学习目标:熟悉html,js,css,重点学习js,了解网络请求能跟java后端配合开发功能 第一阶段 一个月 学习html,cs...
  • leopardjiang
  • leopardjiang
  • 2016-11-03 17:19
  • 101

前端学习计划

企者不立、跨者不行
  • u012207345
  • u012207345
  • 2017-09-05 10:14
  • 327

vue2学习计划1-2 浏览器跨域问题

最近学习vue2,对网上的看到的内容和自己看到vue组件源码,进行记录。 过去跨域都是用JSONP, window.name,postMessage() 等方法模拟,但都不是很纯粹的AJAX解决方案。先上vue-resource 上的实例 XHR Level2 HTML5中 XMLHttpR...
  • zzk220106
  • zzk220106
  • 2017-05-05 16:12
  • 611

学习计划!!!!!

寒冷的2016年冬季伴随着《君の名 は》一起来临了,作为灵长类动物的一员,依然没有女朋友的各种程序猿在(一个人)哭着看完电影后,开始列起了自己长长的wish list,攒够自己的首付、去欧洲旅游一趟、亦或是找个。。。好吧,到头来,我们还是孑身一人,形单影只的的敲着代码,每天对我们...
  • hr787753
  • hr787753
  • 2016-12-20 14:53
  • 479

前端小白入门学习javascript练手项目合集

前端小白入门学习javascript练手项目全集
  • m0_38099607
  • m0_38099607
  • 2017-06-07 08:13
  • 4071

react 学习规划

以下技术是前端必备的知识,可访问 Mozilla Web 技术文档 来学习。 HTML 入门JavaScript 指南CSS入门教程 在对于这些技术有基本了解后,建议阅读 JavaScript生态圈现状:初学者地图 ,了解前端开发过程所使用的一些技...
  • A335715493
  • A335715493
  • 2016-12-28 10:10
  • 292

一个治愈 JavaScript 疲劳的学习计划

网络埋伏纪事 · 2016-11-12翻译 5706阅读 原文链接  像其他人一样,我最近偶然看到 Jose Aguinaga 的文章《在 2016 年学 JavaScript 是一种什么样的体验》”。 译者注:中文翻译在此。 ...
  • dj0379
  • dj0379
  • 2016-11-26 12:42
  • 926

vue2学习计划1-1 浏览器跨域问题

js中几种实用的跨域方法原理详解这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。下表给出了相对http://store.compan...
  • zzk220106
  • zzk220106
  • 2017-05-05 16:26
  • 549
    本人发布的gitChat,欢迎点进去交流
    个人资料
    • 访问:830926次
    • 积分:9619
    • 等级:
    • 排名:第2200名
    • 原创:214篇
    • 转载:31篇
    • 译文:0篇
    • 评论:471条
    人生格言
    天之道,损有余而补不足,是故虚胜实,不足胜有余。
    我的QQ群
    技术交流大杂烩
    博客专栏
    最新评论
    扫码加-技术交流QQ群
    PV统计