README.md

newcomer

新人培训 (零基础培训)

说明 关于可选或选读, 导师可以根据新人能力, 推荐阅读

CSS基础

适当的讲一下, 但不要过多的占用自己时间, 最终目的, 独立完成UX设计稿到静态HTML页面转换(PSD2HTML)

1. 如何使用 Webstorm ( 强调快捷键使用 )
2. 熟悉 html 页面结构 ( 强调 doctype ), 写一个人简历页面, 不要用 CSS 样式, 注意 html规范
3. 使用Chrome dev tools 调试 CSS, HTML
4. 使用 jsbin.com 写自己的 demo 页面
5. reset.css 例如 normalize.css (为什么会有rest.css 和 浏览器的差异性)
6. 盒模型
7. CSS Layout 一些知识 传送门
   • block, inline 和 inline-block 元素特点 传送门
   • 浮动布局 和 清理浮动 传送门
   • 定位布局 传送门
   • flex布局(可选) 传送门
   • box-sizing
   • 垂直居中 传送门
8. CSS 样式优先级 和 CSS 选择器 (这个 w3cschool 上有, 取决于新人自学程度) 传送门
9. 一些常见的组件的写法, 例如导航栏, 登录页面, 菜单, 商品展示等, 可以参考京东或天猫首页, 重点在于HTML结构选择
10. 工作流(从原型到html页面(PSD2HTML), 随便截取一张网页的一部分, 让新人实现, 导师可以进行示范)
    • 拿到设计稿, 分析结构, 标注
    • 先写出HTML结构
    • 在添加上CSS样式
    • 最终效果与设计稿一致
11. CSS3 和 HTML5 (可选)
12. CSS框架 bootstrap (可选)
13. 精通CSS 高级Web标准解决方案
14. CSS规范

JS基础 (ES5)

以自学为主, 有问题问导师, 独自完成练习, 导师可以带着做一个简单的练习

1. 语法: 标识符, 数字, 字符串, 语句, 表达式, 字面量, 函数
2. 对象, 函数, 继承, 数组, 正则, 变量提升, 闭包, 原型继承, 立即自执行函数, 高阶函数, 函数的四种调用方式等
3. DOM, BOM 和 Ajax 请求
   • JavaScript权威指南
   • codecademy.com Javascript 练习 (可选)
   • NodeSchool JS教程 (可选)
4. JavaScript语言精髓 (选读)
5. Effective JavaScript：编写高质量JavaScript代码的68个有效方法
6. JavaScript模式 (选读)
7. JavaScript DOM高级程序设计 (选读)
8. JS规范 ESLint规范
9. 练习
   • Tab http://www.angularjs.cn/
   • Todo List 用原生JS写 AngularJS 官网的 Todo List
   • login http://www.angularjs.cn/login
10. 其他资料

AngularJS

以自学为主, 有问题问导师, 独自完成练习

1. AngularJS官方指南
2. PhoneCat
3. 精通AngularJS
4. A Better Way to Learn AngularJS 可以作为AngularJS1.x知识的考察点
5. AngularJS 1.x 规范 参考 johnpapa/angular-styleguide
6. AngularJS 1.x Code Review CheckList xmind总结
7. 练习
   • Todo list
   • 写指令
     • tooltip
     • dropdown
     • switch
     • modal
     • steps
     • loading
     • checkbox&radio
   • 飞饭练习

React

以自学为主, 有问题问导师, 独自完成练习

1. React官方指南
2. think in react
3. React（第2版）：引领未来的用户界面开发框架 入门经典
4. React Design Patterns and Best Practices 进阶神器
5. 练习
   • 饿了吗练习

ES6相关

实际项目中会用到ES6, 这里提供两个练习环境

• babelify + browserify + gulp
• babel + webpack

1. 阮一峰的 ES6入门
2. 关于 ES6 与 AngularJS 1.x 如何结合使用
   • 参考ccms-components
   • Angular 1.x和ES6的结合
3. ESLint规范

团队协作

实际项目关于 git 的使用, 以及通过一些工具例如 ESLint 等, 对代码风格控制, 以及通过单元测试, 保证代码质量

1. git使用
2. 前端代码质量控制