2018 冰岩作坊前端组夏令营

欢迎你来到冰岩作坊 2018 前端组暑期夏令营！

在开始之前，你需要知道的是：

在成为前/后端工程师或测试工程师或全栈工程师之前，你首先得是个工程师！

仓库结构与规范：

初始项目架构：

• Summer-Camp-2018
  • He（何剑冲）
    • Notes（空）
    • Project（空）
    • Tasks（空）
    • Process.md（进度表）
  • Li（李英豪）
  • Wu（吴静然）
  • README.md
  • .gitignore

目标项目架构：

• Summer-Camp-2018
  • 你的文件夹
    • Notes
      • HTML&CSS.md
      • JavaScript.md
      • Node.md
      • Server.md
      • Vue.md
      • React.md
    • Project（最后一周项目）
    • Tasks
      • partOfProducts
      • React-todo-mvc
      • Vue-todo-mvc
      • js
      • HTML&CSS
      • node
        • task1
        • task2
        • task2Plus
      • hello.md
  • README.md
  • .gitignore

导师分配

学员	导师
李英豪	胡兴球
何剑冲	陶威
吴静然	唐友枫

接下来让我们开始紧张刺激的冰岩 5 层关卡挑战吧 ~~ Link Start ！！

Re：从〇开始的新手村

新手大礼包

工具	获取地址
Chrome	https://www.google.com/chrome/
Postman	https://www.getpostman.com/
学生大礼包	https://github.com/ivmm/Student-resources
Github Education Pack	https://education.github.com/pack

代码托管 / 版本控制

Build software better, together

推荐时长：0.5 天

任务目标

1. 创建并拥有一个 github 账号
2. 了解并掌握 git 基本操作
3. Fork 并 Clone summer-camp-2018夏令营仓库
4. 在你的文件夹/Tasks 添加 hello.md 文件并写入 Hello bingyan! （1级标题）

任务位置

你的文件夹/Tasks

注：这步涉及到后面内容的代码控制，请一定完成好哦！以下所有涉及此仓库的代码记得当日 push

关键词：git、github

任务奖励

1. 经验值 10 Exp
2. 愉快的对代码进行版本控制与管理了！

参考资料

廖雪峰的 Git 教程

利用 SSH 连接 Github

Markdown

推荐时长：0.5 天

任务目标

1. 阅读并了解 markdown 语法规范
2. 熟练使用基本的 markdown 操作

关键词：markdown、typora、简书、插件

任务奖励

1. 经验值 10 Exp
2. 能够基本写出一手不难看的文档

参考资料

原味文档

中文文档

正确获取知识的姿势

你看百度的工程师都用在用 google，所以要什么百度自行车！

推荐时长：0.8 天

任务目标

1. 成功翻越 GFW
2. 能够正常访问 Google、Facebook、Twitter、某hub（不要想歪！）等国外网站
3. （选做）成功申请并使用上 gmail
4. 修改默认搜索引擎为 google

关键词：Google、Shadowsocks、Virtual Private Network

任务奖励

1. 经验值 10 Exp
2. 完成目标 3 额外获取 5 Exp
3. 瞬间提升的逼格

参考资料

lantern

DigitalOcean

shadowsocks

挑选一个适合自己的编辑器

工欲善其事，必先利其器

推荐时长：0.2 天

任务目标

1. 任选其一：（千万不要浪费太多时间在这个地方，只需安装一个即可）
   • 世界级宝具：Visual Studio Code
   • 高冷级宝具：Atom
   • IDE 级宝具：WebStorm
   • 王の宝具：Vim | Emacs
2. 了解并安装适当的插件

关键词：coding

任务奖励

1. 经验值 5 Exp
2. 高颜值的编辑器

参考资料

Visual Studio Code

Atom

WebStorm 学生授权

HTML 与 CSS

标记的力量

推荐时长：1 天

任务目标

1. 在 你的文件夹/Tasks 下面分别创建目录 html 和 css
2. 分别使用 google 搜索 html 和 css 教程
3. 认真阅读并掌握 html 和 css 的用法
4. 掌握理解 flex 布局
5. 动手实践，写小demo存在 你的文件夹/Tasks/HTML&CSS中
6. 产生相应的笔记写入你的文件夹/Notes/HTML&CSS.md 中

关键词：W3C、HTML5、CSS3

任务位置

你的文件夹/Notes

你的文件夹/HTML&CSS

任务奖励

1. 经验值 15 Exp

参考资料

html

css

MDN 文档

①层：JavaScript 的天下

JavaScript 基础

JavaScript 才是世界上最好的语言！Σ（ﾟдﾟlll）

推荐时长：1 - 2 天

任务目标

1. 学习并掌握基本的 JavaScript

   包含同时不限于以下内容：

   • 基本类型
   • 常见的宿主环境及其全局对象
   • JS 原型链机制
   • JS 异步特性
   • ES6 相关内容

2. 同时产生学习笔记写入 你的文件夹/Notes/JavaScript.md 中

3. 测试demo写入你的文件夹/Tasks/js

关键词：Ajax、Asynchronus、DOM、ES6

任务位置

你的文件夹/Notes

你的文件夹/js

任务奖励

1. 经验值 15 Exp
2. 进一步认识了 JS

参考资料

如何循序渐进、有效的学习 JS

JS 简易教程

MDN 文档

（长期）扎实基础推荐书目：

• JavaScript 高级程序设计
• YDKJS
• Eloquent JavaScript

Node.js

正义的伙伴！

推荐时长：0.5 天

任务目标

1. 了解 Node 的诞生和发展
2. 安装 Node 最新 LTS 版，并尝试阅读 Node 文档
3. 笔记记入你的文件夹/Notes/Node.md
4. 在 你的文件夹/Tasks/node 目录下下创建task1文件夹
5. 在 task1 文件夹里使用 npm 命令，初始化 package.json 并安装 colors 包
6. 新建 index.js 文件，使用 nodejs 运行，并尝试用代码在其中输出彩虹色的 Geek is the new sexy!

任务位置

你的文件夹/Tasks/node

你的文件夹/Notes/Node.md

任务奖励

1. 经验值 10 Exp
2. 为了解后端做铺垫

参考资料

Node.js 是干嘛的

Node.js

简易 Node.js 教程

聊聊 Node.js 的历史

color 库

BOSS 挑战

推荐时长：0.5 - 1天

使用 nodejs 构建命令行（问答形式）成员管理系统（静态Json数据类型，具体需求待定）

任务位置

你的文件夹/Tasks/node/task2

②层：小试牛刀

初次接触项目

推荐时长：3天（flexible）

任务目标

对产品组任务的idea进行分解，分解成多个功能/页面，使用原生 js + node 完成某些功能点或某些页面

任务位置

你的文件夹/Tasks/partOfProducts

任务时长视产品组任务量、任务需求、任务难度而定

③层：框架之争

如下两种框架二选一

React

优雅的函数式编程

推荐时长：2 天

任务目标

1. 阅读完文档并掌握 React
2. 在 你的文件夹/Tasks 创建 react-todo-mvc 文件夹
3. 产生相应的学习笔记 React.md
4. 使用 新手的姿势 下的 Online Playgrounds 的方法构建应用（推荐使用下载文件到本地再编码）
5. 纯 react 实现完成后可尝试第三方库扩展应用
   • react-router
   • redux
   • ....

关键词：Data Driven、Single Page Application(SPA)

注：只有当你掌握 node 之后才使用 create-react-app

任务奖励

1. 经验值 20 Exp

参考资料

官方文档

TODOMVC

Vue

轻量的第三方库

推荐时长：2 天

任务目标

1. 阅读完文档并掌握 vue
2. 在 你的文件夹 创建 vue-todo-mvc 文件夹
3. 产生相应的学习笔记 Vue.md
4. 使用 新手的姿势 构建应用
5. 纯 vue 实现完成后可尝试第三方库扩展应用
   • vue-router
   • vuex
   • ....

关键词：Data Driven、Single Page Application(SPA)

注：只有当你掌握 node 之后才使用 vue-cli

任务奖励

1. 经验值 20 Exp

参考资料

官方文档

TODOMVC

BOSS 挑战

使用React/Vue 完成产品组产品功能需求，同小试牛刀，区别：使用框架

推荐时长：3天

任务位置

你的文件夹/Tasks/partOfProducts

任务时长视产品组任务量、任务需求、任务难度而定

④层：后端之旅

不想写后端的工程师不是一个好的前端工程师 (～o￣3￣)～

推荐时长：2.5天

任务目标

1. 使用 nodejs 下的 express 或 koa 完成
2. 使用 nodejs 能与数据库连接/交互（推荐使用MongoDB）
3. 使用数据库，更新迭代已完成的命令行成员管理系统
4. 为管理系统搭建简单界面（要求：界面美观，尽量适配）

关键词：服务器编程、非关系型数据库、关系型数据库

任务位置

你的文件夹/Tasks/node/task2Plus

任务奖励

1. 经验值 50 Exp

参考资料

程序组夏令营仓库

BOSS 挑战

推荐时长：0.5 - 1天

1. *本地部署或购买阿里云学生优惠服务器（不强制要求购买服务器）
2. 部署改完成项目至服务器（推荐使用nginx）
3. 发出服务器地址给导师
4. 笔记记入Server.md

⑤层：剑之试炼

独立项目

推荐时长：7天

任务目标

1. 使用所学知识独自完成产品组某些产品（推荐使用框架）
2. 熟悉一个项目的基本架构
3. 学会与后台沟通（没有后台自己顶替：）
4. 学会测试

BOSS 挑战

Show me your project

Final：最终の战

这里是无限遐想的世界

到这里你已经掌握了解决基本问题的技能，接下来的战斗需要更多的是你自己不断的努力来面对这场无尽的战争！

但是，正如前面说到的，你首先得成为一名工程师，所以接下来建议是 进一步补充巩固工程师的基本素养

1. 计算机网络
2. 数据结构和算法
3. 操作系统

或者 继续补充前端的相关知识

1. W3C 标准规范
2. ECMAScript 标准规范
3. 前端工程化
4. 深入研究框架底层
5. 深入研究 JavaScript 底层相关知识

附录：

程序组仓库

移动组仓库

时间规划表

任务名	时长（天）
git/github	0.5
Markdown	0.5
Cross GFW	0.8
Editor	0.2
HTML & CSS	1
JavaScript	1
Task2 -Node.js	0.5
Task2 - Node.js	0.5 - 1
Task3 - Parts of products	3
React / Vue	2
Task3Plus - Do it with a framework	3
后端进阶	2.5
服务器/部署	0.5 - 1
Project	7