Skip to content

Latest commit

 

History

History
108 lines (87 loc) · 6.52 KB

README.md

File metadata and controls

108 lines (87 loc) · 6.52 KB

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 一些知识 传送门
  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 请求
  4. JavaScript语言精髓 (选读)
  5. Effective JavaScript:编写高质量JavaScript代码的68个有效方法
  6. JavaScript模式 (选读)
  7. JavaScript DOM高级程序设计 (选读)
  8. JS规范 ESLint规范
  9. 练习
  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. 练习

React

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

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

ES6相关

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

  1. 阮一峰的 ES6入门
  2. 关于 ES6 与 AngularJS 1.x 如何结合使用
  3. ESLint规范

团队协作

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

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