欢迎你来到冰岩作坊 2019 前端组暑期夏令营!
在开始之前,你需要知道的是:
在成为前/后端工程师或测试工程师或全栈工程师之前,你首先得是个工程师!
仓库结构与规范:
初始项目架构:
- Summer-Camp-2018
- M(牟紫瑶)
- Notes(空)
- Project(空)
- Tasks(空)
- B(白晓升)
- Wang(王菲)
- Wei(魏子豪)
- O(欧阳涵宇)
- Z(朱国欢)
- README.md
- .gitignore
- M(牟紫瑶)
目标项目架构:
- 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
- Notes
- README.md
- .gitignore
- 你的文件夹
导师分配
学员 | 导师 |
---|---|
魏子豪 | 周扬 |
朱国欢 | 周扬 |
欧阳涵宇 | 吴静然 |
牟紫瑶 | 吴静然 |
王菲 | 李英豪 |
白晓升 | 李英豪 |
接下来让我们开始紧张刺激的冰岩 5
层关卡挑战吧 ~~ Link Start !!
工具 | 获取地址 |
---|---|
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
天
- 创建并拥有一个 github 账号
- 了解并掌握 git 基本操作
- Fork 并 Clone summer-camp-2019夏令营仓库
- 在
你的文件夹/Tasks
添加hello.md
文件并写入Hello bingyan!
(1级标题)
你的文件夹/Tasks
注:这步涉及到后面内容的代码控制,请一定完成好哦!以下所有涉及此仓库的代码记得当日 push
关键词:git、github
推荐时长:0.5
天
- 阅读并了解 markdown 语法规范
- 熟练使用基本的 markdown 操作
关键词:markdown、typora、简书、插件
你看百度的工程师都用在用 google,所以要什么百度自行车!
推荐时长:1
天
- 成功翻越 GFW
- 能够正常访问 Google、Facebook、Twitter、某hub(不要想歪!)等国外网站
- (选做)成功申请并使用上 gmail
- 修改默认搜索引擎为 google
关键词:Google、Shadowsocks、Virtual Private Network
工欲善其事,必先利其器
推荐时长:0
天
- 任选其一:(千万不要浪费太多时间在这个地方,只需安装一个即可)
- 世界级宝具:Visual Studio Code
- 高冷级宝具:Atom
- IDE 级宝具:WebStorm
- 王の宝具:Vim | Emacs
- 了解并安装适当的插件
关键词:coding
标记的力量
推荐时长:1
天
- 在
你的文件夹/Tasks
下面分别创建目录html
和css
- 分别使用 google 搜索 html 和 css 教程
- 认真阅读并掌握 html 和 css 的用法
- 掌握理解
flex
布局 - 动手实践,写小demo存在
你的文件夹/Tasks/HTML&CSS
中 - 产生相应的笔记写入
你的文件夹/Notes/HTML&CSS.md
中
关键词:W3C、HTML5、CSS3
你的文件夹/Notes
你的文件夹/HTML&CSS
JavaScript 才是世界上最好的语言!Σ(゚д゚lll)
推荐时长:3
天
-
学习并掌握基本的 JavaScript
包含同时不限于以下内容:
- 基本类型
- 常见的宿主环境及其全局对象
- JS 原型链机制
- JS 异步特性
- ES6 相关内容
-
同时产生学习笔记写入
你的文件夹/Notes/JavaScript.md
中 -
测试demo写入
你的文件夹/Tasks/js
关键词:Ajax、Asynchronus、DOM、ES6
你的文件夹/Notes
你的文件夹/js
(长期)扎实基础推荐书目:
- JavaScript 高级程序设计
- YDKJS
- Eloquent JavaScript
正义的伙伴!
推荐时长:1
天
- 了解 Node 的诞生和发展
- 安装 Node 最新 LTS 版,并尝试阅读 Node 文档
- 笔记记入
你的文件夹/Notes/Node.md
- 在
你的文件夹/Tasks/node
目录下下创建task1
文件夹 - 在
task1
文件夹里使用 npm 命令,初始化package.json
并安装colors
包 - 新建
guide.js
文件,使用 nodejs 运行,并尝试用代码在其中输出彩虹色的Geek is the new sexy!
你的文件夹/Tasks/node
你的文件夹/Notes/Node.md
推荐时长:1
天
使用 nodejs 构建命令行(问答形式)成员管理系统(静态Json数据类型,具体需求待定)
你的文件夹/Tasks/node/task2
初次接触项目
推荐时长:1
天(flexible)
对产品组任务的idea进行分解,分解成多个功能/页面,使用原生 js + node 完成某些功能点或某些页面
你的文件夹/Tasks/partOfProducts
任务时长视产品组任务量、任务需求、任务难度而定
如下两种框架二选一
优雅的函数式编程
推荐时长:4
天
- 阅读完文档并掌握 React
- 在
你的文件夹/Tasks
创建react-todo-mvc
文件夹 - 产生相应的学习笔记
React.md
- 使用 新手的姿势 下的
Online Playgrounds
的方法构建应用(推荐使用下载文件到本地再编码) - 纯
react
实现完成后可尝试第三方库扩展应用- react-router
- redux
- ....
关键词:Data Driven、Single Page Application(SPA)
注:只有当你掌握 node 之后才使用 create-react-app
轻量的第三方库
推荐时长:4
天
- 阅读完文档并掌握 vue
- 在
你的文件夹
创建vue-todo-mvc
文件夹 - 产生相应的学习笔记
Vue.md
- 使用 新手的姿势 构建应用
- 纯
vue
实现完成后可尝试第三方库扩展应用- vue-router
- vuex
- ....
关键词:Data Driven、Single Page Application(SPA)
注:只有当你掌握 node 之后才使用 vue-cli
使用React/Vue 完成产品组产品功能需求,同小试牛刀,区别:使用框架
推荐时长:3
天
你的文件夹/Tasks/partOfProducts
任务时长视产品组任务量、任务需求、任务难度而定
不想写后端的工程师不是一个好的前端工程师 (~o ̄3 ̄)~
推荐时长:3
天
- 使用 nodejs 下的 express 或 koa 完成
- 使用 nodejs 能与数据库连接/交互(推荐使用MongoDB)
- 使用数据库,更新迭代已完成的命令行成员管理系统
- 为管理系统搭建简单界面(要求:界面美观,尽量适配)
关键词:服务器编程、非关系型数据库、关系型数据库
你的文件夹/Tasks/node/task2Plus
推荐时长:1
天
- *本地部署或购买阿里云学生优惠服务器(不强制要求购买服务器)
- 部署改完成项目至服务器(推荐使用nginx)
- 发出服务器地址给导师
- 笔记记入
Server.md
独立项目
推荐时长:7
天
- 使用所学知识独自完成产品组某些产品(推荐使用框架)
- 熟悉一个项目的基本架构
- 学会与后台沟通(没有后台自己顶替:)
- 学会测试
Show me your project
这里是无限遐想的世界
到这里你已经掌握了解决基本问题的技能,接下来的战斗需要更多的是你自己不断的努力来面对这场无尽的战争!
但是,正如前面说到的,你首先得成为一名工程师,所以接下来建议是 进一步补充巩固工程师的基本素养
- 计算机网络
- 数据结构和算法
- 操作系统
或者 继续补充前端的相关知识
- W3C 标准规范
- ECMAScript 标准规范
- 前端工程化
- 深入研究框架底层
- 深入研究 JavaScript 底层相关知识
附录: