- 熟悉 VS Code,注意几个常用插件的配置
- 熟悉 html 页面结构 ( 强调 doctype ), 注意 html规范
- 使用 Chrome dev tools 调试 CSS, HTML
- 使用 jsbin.com 写自己的 demo 页面
- reset.css 例如 normalize.css (为什么会有rest.css 和 浏览器的差异性)
- 盒模型
- CSS Layout 一些知识 传送门
- block, inline 和 inline-block 元素特点
- 浮动布局 和 清理浮动
- 定位布局
- flex布局 (必须掌握,推荐阮一峰的两篇文章)
- box-sizing
- 垂直居中 传送门
- CSS 样式优先级 和 CSS 选择器
- CSS规范
- 一些常见的组件的写法, 例如导航栏, 登录页面, 菜单, 商品展示等, 可以参考京东或天猫首页, 重点在于HTML结构选择
- 工作流(从原型到html页面(PSD2HTML), 随便截取一张网页的一部分, 让新人实现, 导师可以进行示范)
- 拿到设计稿, 分析结构, 标注
- 先写出HTML结构
- 在添加上CSS样式
- 最终效果与设计稿一致
精通CSS 高级Web标准解决方案
- 语法: 标识符, 数字, 字符串, 语句, 表达式, 字面量, 函数, 对象, 函数, 继承, 数组, 正则, 变量提升, 闭包, 原型继承, 立即自执行函数, 高阶函数, 函数的四种调用方式等
- DOM, BOM, Ajax 和 Fetch 请求
- JavaScript权威指南 (认真阅读,查漏补缺)
- codecademy.com Javascript 练习 (可选)
- NodeSchool JS教程 (可选)
- 阮一峰的 ES6 https://es6.ruanyifeng.com/
- JavaScript语言精髓
- Effective JavaScript:编写高质量JavaScript代码的68个有效方法
- JavaScript模式 (选读)
- JavaScript DOM高级程序设计 (选读)
- React官方指南
- think in react
- 练习
- 饿了吗练习
- React(第2版):引领未来的用户界面开发框架 入门经典
- React Design Patterns and Best Practices 进阶神器