/newcomer

前端新人培训

Primary LanguageJavaScript

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. 前端代码质量控制