新人培训 (零基础培训)
说明 关于可选或选读, 导师可以根据新人能力, 推荐阅读
适当的讲一下, 但不要过多的占用自己时间, 最终目的, 独立完成UX设计稿到静态HTML页面转换(PSD2HTML)
- 如何使用 Webstorm ( 强调快捷键使用 )
- 熟悉 html 页面结构 ( 强调 doctype ), 写一个人简历页面, 不要用 CSS 样式, 注意 html规范
- 使用Chrome dev tools 调试 CSS, HTML
- 使用 jsbin.com 写自己的 demo 页面
- reset.css 例如 normalize.css (为什么会有rest.css 和 浏览器的差异性)
- 盒模型
- CSS Layout 一些知识 传送门
- CSS 样式优先级 和 CSS 选择器 (这个 w3cschool 上有, 取决于新人自学程度) 传送门
- 一些常见的组件的写法, 例如导航栏, 登录页面, 菜单, 商品展示等, 可以参考京东或天猫首页, 重点在于HTML结构选择
- 工作流(从原型到html页面(PSD2HTML), 随便截取一张网页的一部分, 让新人实现, 导师可以进行示范)
- 拿到设计稿, 分析结构, 标注
- 先写出HTML结构
- 在添加上CSS样式
- 最终效果与设计稿一致
- CSS3 和 HTML5 (可选)
- CSS框架 bootstrap (可选)
- 精通CSS 高级Web标准解决方案
- CSS规范
以自学为主, 有问题问导师, 独自完成练习, 导师可以带着做一个简单的练习
- 语法: 标识符, 数字, 字符串, 语句, 表达式, 字面量, 函数
- 对象, 函数, 继承, 数组, 正则, 变量提升, 闭包, 原型继承, 立即自执行函数, 高阶函数, 函数的四种调用方式等
- DOM, BOM 和 Ajax 请求
- JavaScript语言精髓 (选读)
- Effective JavaScript：编写高质量JavaScript代码的68个有效方法
- JavaScript模式 (选读)
- JavaScript DOM高级程序设计 (选读)
- JS规范 ESLint规范
- 练习
- Tab http://www.angularjs.cn/
- Todo List 用原生JS写 AngularJS 官网的 Todo List
- login http://www.angularjs.cn/login
- 其他资料
以自学为主, 有问题问导师, 独自完成练习
- AngularJS官方指南
- PhoneCat
- 精通AngularJS
- A Better Way to Learn AngularJS 可以作为AngularJS1.x知识的考察点
- AngularJS 1.x 规范 参考 johnpapa/angular-styleguide
- AngularJS 1.x Code Review CheckList xmind总结
- 练习
以自学为主, 有问题问导师, 独自完成练习
- React官方指南
- think in react
- React（第2版）：引领未来的用户界面开发框架 入门经典
- React Design Patterns and Best Practices 进阶神器
- 练习
实际项目中会用到ES6, 这里提供两个练习环境
- 阮一峰的 ES6入门
- 关于 ES6 与 AngularJS 1.x 如何结合使用
- ESLint规范
实际项目关于 git 的使用, 以及通过一些工具例如 ESLint 等, 对代码风格控制, 以及通过单元测试, 保证代码质量