preservance717/newcomer

数云西安前端新人培训

newcomer

新人培训 (零基础培训)

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

CSS基础

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

1. 如何使用 Webstorm ( 强调快捷键使用 )
2. 熟悉 html 页面结构 ( 强调 doctype ), 写一个人简历页面, 不要用 CSS 样式, html规范
3. 使用Chrome dev tools 调试 CSS, HTML
4. 使用 JSBin 写自己的 demo 页面
5. reset.css 例如 normalize.css (为什么会有rest.css 和 浏览器的差异性)
6. 盒模型
7. CSS Layout 一些知识 http://zh.learnlayout.com/
   • 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规范 http://codeguide.bootcss.com/

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 https://angularjs.org/
   • login http://www.angularjs.cn/login

AngularJS

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

1. AngularJS官方指南 https://docs.angularjs.org/guide
2. PhoneCat https://docs.angularjs.org/tutorial
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 和 png
7. 练习
   • Todo list
   • 写指令 Tabs, 简单日历, panel, dropdown
   • 开关, 幻灯片
   • 飞饭练习

ES6

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

• babelify + browserify + gulp
• babel + webpack

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

团队协作

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

补充资料

1. JS查漏补缺1
2. JS查漏补缺2
3. JS查漏补缺3
4. JS查漏补缺4
5. JS查漏补缺5
6. JS查漏补缺6

计划变更

1. 对于技术优秀的实习生, 可以直接通过练习, 检测其水平, 水平合格者, 可以直接跳过相应的阶段.
2. 初学者, 关于JS学习过程, 犀牛书过于理论化, 建议换用其他书作为入门教材, 当学生通过下面的知识学习后, 再回头学习犀牛书.
   • JS入门
   • JS高级
   • Ajax