2018冰蓝暑期短学期

项目目录结构

2018-binglan-shortSemester

• LICENSE
• README.md
• example
  • tasks
    • HTML&CSS
    • JavaScript
    • JQuery
    • Vue
    • Node
  • blogs.md
  • product

操作步骤：fork本仓库，按照示例目录结构，新增一个以你的名字命名的目录，tasks目录存放你的代码，blogs.md每日更新博客链接，任务完成后提交pr合并到主分支

这里是2018冰蓝暑期短学期，本次短学期以前端技术的学习为主干， 要求每天要写一篇博客总结学到的东西，博客可以写在博客园、简书、知乎、自己的博客等等平台，每天将博客链接更新到 你的名字/blogs.md

开始我们的前端之旅吧！

首先你需要知道前端工程师是干什么的，不妨思考一下你什么想要成为一名前端工程师

推荐阅读：写给想成为前端工程师的同学们

作为一个合格的程序员必知必会之常识：）

推荐用时：0.5 day

1. 掌握git基本操作，熟练使用git init，git clone，git add, git commit，git push等常用命令
2. 注册一个GitHub账号，熟悉GitHub的各项功能与使用，如fork，pull request等
3. fork本仓库，只需修改自己名字的文件目录，每天完成任务之后提交pr

参考资料：

git官方文档

廖雪峰的git教程

git简明指南

推荐用时：0.5 day

程序员写作利器，掌握markdown的基本用法，写博客或文档的时候非常方便

参考资料：markdown中文文档

推荐用时：0.2 day

了解Linux的发展历程，掌握常用的Linux命令行

推荐用时：0.2 day

编辑器：

轻量级推荐VScode，重量级推荐WebStorm，VScode可以安装一些常用的插件，并熟悉常用的快捷键

其他较知名的有：sublime、Atom、Brackets、HBuilder等

不可不提，但不建议新手使用的：

编辑器之神：vim

神的编辑器：Emacs

不要在选择编辑器上纠结，就用VScode吧：）

浏览器：Chrome,熟悉使用Chrome的开发者工具

其他工具： windows可以安装git bash，支持git和部分linux命令

postman: Chrome 插件，可测试前后端HTTP请求与响应

推荐用时：0.6 day

学会Cross GFW，能够访问google，twitter，youtube等

正确的学习姿势是不会的先搜索，找不到答案时再提问

搜索：学习免不了搜索，用google用google用google

提问：正确的提问姿势应该是描述清楚需要解决的问题，问题发生的场景，以及你的尝试，在线上提问代码应使用jsbin，jsfiddle等在线工具发送

强烈推荐阅读：

碰到技术问题时，如何寻求帮助（上)

碰到技术问题时，如何寻求帮助（下)

细节，好看最重要

推荐用时：1 day

没有基础的同学可以先过一遍基础，熟悉之后写一个静态页面来练习并加深理解

1. 学习HTML5&CSS3
2. 在你的目录/task1目录存放你的静态页文件
3. 动手写一个百度首页
4. push你的代码到你的名字/tasks/HTML&CSS，并提交pr

要求掌握语义化、流式布局、清除浮动、定位、flex布局、媒体查询、响应式等常见概念和相应使用方式

参考资料： MDN、菜鸟教程，W3C标准文档，不推荐w3school中文站，错误和过时信息较多

前端工程师的核心竞争力

推荐用时：2 day

1. 学习掌握JavaScript的重要概念和技术点，如原型链、闭包、this，Ajax等
2. 学习掌握一些ES6新的特性，如let,const,arrow function,class等
3. 写一个计算器应用，UI自定，但一定要好看
4. push你的代码到你的名字/tasks/JavaScript，并提交pr

参考资料：

JavaScript高级程序设计

JavaScript标准参考教程(阮一峰)

JavaScript简易教程

MDN

ES6入门

推荐用时：1 day

1. 使用JQuery重构你的计算器应用，思考JQuery解决了什么问题，又有什么缺点
2. push你的代码到 你的名字/tasks/JQuery，并提交pr

前后端沟通的桥梁

推荐用时：0.5day

1. 了解计算机网络的基本原理
2. 掌握HTTP请求与响应的基本结构。包括但不限于GET与POST的区别，常见状态码的含义等
3. 写博客记录学习到的东西

参考资料：

图解HTTP

网络是怎样连接的

JS生态基础

推荐用时: 0.5 day

1. 了解node的诞生与发展
2. 安装nodejs(LTS版)，掌握npm常用命令的作用与用法
3. 写博客记录学习到的东西

1. 用express连接数据库
2. 了解前后端交互的各种方式

推荐用时：3day

前端框架如今是React，Vue，Angular三分天下，本次我们选择Vue

1. 阅读Vue的官方文档，学习Vue的用法，动手练习一些demo
2. 了解Vue的生态，思考Vue与传统前端开发方式的不同
3. 用Vue写一个知乎日报应用,使用vue-cli需要先了解webpack的使用
4. push到你的名字/tasks/Vue目录，并提交pr

推荐用时：2day

前端工程化是一个复杂的概念，这里我们只涉及常用构建工具的使用

1. 学习使用webpack进行项目打包构建
2. 使用babel进行ES6的转译

推荐用时：7day

1. 完成冰蓝官网的优化，移动端的开发
2. 可以选择自己开发一个小项目

到这里，前端之旅的学习并没有结束，而是刚刚开始。前端工程师首先是个工程师，因此计算机基础是必不可少的

• 数据结构与算法
• 计算机网络
• 操作系统
• 数据库

前端的其他领域也可以探索，如

• 数据可视化
• web安全
• WebGL
• JavaScript进阶知识，框架原理等等