TopView 大前端暑假学习计划

欢迎加入 TopView 大前端 😗

First of All

• 遇到问题若解决不了，请在 GitHub 上提交 issue 🤘
• 每周之后，请把每周学习到的东西上传到本 repo 对应的文件夹. 例子请看 week1 文件夹
• 该学习路线将会花费 4周 的时间! 时间自行安排 😈
• 太长不看

Resources

整个学习路线会用到下面的资源:

• JavaScript 高级程序设计(第3版)
• Free Code Camp
• GitHub
• Code School

Week 1 - Introduction, Data Types, Expressions and Operations

第一周比较轻松~ 涉及的内容有JavaScript的介绍, 数据类型, 表达式以及运算。

Source	Tasks
Free Code Camp	Getting Started, HTML5 & CSS, Responsive Design with Bootstrap 部分
JavaScript高级程序设计	前言, 第1章和第2章
Free Code Camp	Basic JavaScript 部分
JavaScript高级程序设计	第3章, 第4章(可以跳过位操作符部分内容)
自己 google	学会调试 JavaScript 。建议使用 Chrome 的 DevTools (开发者工具)
Free Code Camp	Basic Front End Development Projects 部分（选做）

Week 1~2 - Objects, Arrays, Functions

涉及的内容有对象，数组，函数，DOM 以及 jQuery 。

Source	Tasks
JavaScript 高级程序设计	第6章
Free Code Camp	Object Oriented and Functional Programming 部分
JavaScript 高级程序设计	第5章和第7章

Week 2~3 - DOM, jQuery, and the First Project

Source	Tasks
JavaScript 高级程序设计	第8, 9, 10, 11, 13和14章
CodeSchool	Try jQuery 课程，视频观看以及翻译在这里
Free Code Camp	jQuery 部分
null	你的第一个小项目 - Todo

Todo

可参考例子：todoMVC 。

• 添加 / 删除 todo
• 完成 / 取消完成 todo
• 显示所有/ 完成 / 未完成的 todo
• 写2个版本。原生 JavaScript && jQuery
• 用 Git 以及 GitHub 来管理你们的 todo 项目
• 学会 Git 的分支管理，请利用 GitHub 的 Projects Pages 把你的 Todo 项目发布到网上

Week 3 - Ajax, Event, Regular Expressions, jQuery 动画

内容有 Ajax, 正则表达式，window 对象，事件，以及 jQuery。

Source	Tasks
JavaScript 高级程序设计	第20章和23章。
Free Code Camp	JSON APIs and Ajax 部分
null	改进你的 Todo 项目

改进 Todo

• 提供修改 todo 功能
• 清除所有已经完成的 todo
• 使用 jQuery 的添加动画。比如，添加 todo 时的淡入 && 删除时的淡出
• 添加用户验证: 登录注销，利用 Local Storage
• 使用 JSON Server 来模拟后台

Week 4 - Module, MVC, Class, Inheritance

涉及了模块化，类，继承，ES6(ES2015),以及多个小项目。

Source	Tasks
JavaScript 高级程序设计	第6，16，22，24章。这也许是最有技术性的一次阅读了，如果没看懂先跳过，日后再看可好?
Free Code Camp	Basic Algorithm Scripting 部分（复习 JavaScript）
ECMAScript 6入门	学习 ES2015
null	再次优化你的 Todo 项目。添加新功能，或者重构代码
Free Code Camp	Intermediate Front End Development Projects 前3个

Front End Go!

由于现在前端的技术还不是很成熟，因此发展会日新月异。

所以啊，我们要时刻保持对知识的饥饿感！！！

Recommend	Type	Description
5	JS 框架	React, Angular, Vue 等
5	JavaScript	ES2015
4	CSS 预处理器	Sass 等
3	服务器语言	Node.js 等
4	计算机网络	HTTP 相关知识
5	社区	GitHub Trending, Reddit, Medium, 订阅 JavaScript Weekly, 微博 & Twitter 等

鸡汤

• 看书看不懂的部分就跳过!! 总之要看快速看完一遍！:yum:
• 遇到不懂的地方请 google，或者问小伙伴，或者提 issue，或者问师兄师姐 🌚
• 加油哦:rocket: 这将是一个非常充实的假期 :clap: