wanghan2789/FED-Learn-Path

前端学习路线

CSSGPL-2.0

FED-Learn-Path

HTML

HTML5模板
HTML5标签
- 详解HTML 头标签元素的意义以及使用场景
- 标签语义化
  - nav, section, article, aside, menu, menuitem, figure
  - p, br, hr, blockquote, code, pre
  - title, mark, small, del, i, em, sub
  - header, footer, summary, details, time, dialog
  - ul li, dl dt dd, h1 to h6
  - fieldset, legend, form , label, input, select
  - table, caption, thead, tbody, th, thd, tfoot
SEO

CSS

CSS Tricks
- CSS实例
  - CSS选择器优先级
  - 定位(Position)
  - 盒模型(BoxSize)
  - 清除浮动(Clearfix)
    - 清除浮动的6种方法
  - 水平居中
  - 垂直居中
  - 左右结构，流式布局
  - 上下结构
  - a链接伪类 (a:link、a:visited、a:hover、a:active)
  - font-family
  - input美化
  - file upload按钮美化
  - CSS选择器(CSS Selector)
  - 模拟下拉菜单
  - 字符超出隐藏
  - 背景图片尺寸(background-size)
  - before & after 伪元素
    - 伪元素应用 - CSS3 Button
    - CSS3实现 - 加载动画
  - Media Query - 媒体查询
  - Web Font(在线字体)
    - 字体图标
      - iconfont
      - fontAwesome
    - 在线字体
      - Google Fonts
  - CSS3动效
    - Transition - 过渡
    - Transform - 变形
    - Animation - 动画
    - Animate.css
    - 网页动画的12原则(中文)
    - 3D
  - CSS3 Filter - 滤镜特效
  - CSS3渐变
  - FlexBox[图]
- Sass
  - 为什么要用CSS预编译工具
  - SCSS语法
UI框架
- Bootstrap
- Semantic UI
设计 +

JavaScript

库
- jQuery (DOM操作、ajax、事件委托、自定义事件、js动画...)
- Zeptojs (小型jQuery 9.1kb，移动端jQuery类库，语法相同)
- Underscore/lodash (数据操作库)
模板引擎 (为什么要用模板引擎?)
- 前端模板
- 后端模板(Java)
  - JSP
  - FreeMarker
    - 前端编写FreeMarker所要掌握的
    - FreeMarker中文手册
框架
- AngularJS
- Backbone.js
- Vue.js
  - Vue论坛
- React
实例
- 选项卡
- 轮播图
代码片段
js优化 & 编码技巧
模块化
- 为什么要模块化
- CommonJS规范
  - browserify
  - webpack (不只是个js打包工具)
- AMD规范
  - RequireJS
- CMD规范
  - Sea.js

HTML-CSS-JS测试

RESTful

移动端Web前端

前端构建

Gulp (基于流的构建工具)
webpack
Yeoman (脚手架)
FIS (百度FED的前端整套构建工具)
Grunt

版本控制

Git

开发工具

编辑器
- Sublime Text3
- Atom
- VS Code
IDE
- WebStorm
- HBuilder
- Cloud9 IDE
- Visual Studio
调试工具
- PageSpeed (Chrome扩展)
- Chrome Dev Tools (Chrome F12)
- Fiddler
- YSlow

Hybird App && WebApp