欢迎加入 TopView 大前端 😗
- 遇到问题若解决不了(先google),请在 GitHub 上提交 issue 🤘
- 每天结束之前都要在这个git仓库里面提issue,有例子可看,嗯!是每天。(仓库里面有格式例子哦):clap::clap:
- 每周之后,请把每周学习到的东西整理成Mark Down,把自己写的demo源码上传到本 repo 对应的文件夹. 例子请看 week1 文件夹。:notes:
- 注意培养正确的代码规范,具体代码规范参考
this
- 该学习路线将会花费 4周 的时间! 时间自行安排 😈
- 太长不看
整个学习路线会用到下面的资源:
- JavaScript 高级程序设计(第3版)
- Free Code Camp
- GitHub
- Code School
- Flexbox Froggy
- GRID GARDEN
- MDN文档哟
- Git - 廖雪峰
- 很重要的代码规范 😆😆
第一周比较轻松~ 涉及的内容有JavaScript的介绍, 数据类型, 表达式以及运算,以及简单了解下的CSS的flex布局,还有Git。
Source | Tasks |
---|---|
Free Code Camp | Getting Started, HTML5 & CSS, Responsive Design with Bootstrap 部分 |
FlexboxFroggy | 先看这个然后尝试完成flexbox那个网站的题 |
GRID GARDEN | grid 种菜小游戏 |
JavaScript高级程序设计 | 前言, 第1章和第2章 |
Free Code Camp | Basic JavaScript 部分 |
JavaScript高级程序设计 | 第3章, 第4章(可以跳过位操作符部分内容) |
自己 google | 学会调试 JavaScript 。建议使用 Chrome 的 DevTools (开发者工具) |
Free Code Camp | Basic Front End Development Projects 部分(选做) |
Git | 廖雪峰的Git教程:Git简介,创建版本库 |
涉及的内容有对象,数组,函数,DOM 以及 jQuery 当然还有Git 。
Source | Tasks |
---|---|
JavaScript 高级程序设计 | 第6章 |
Free Code Camp | Object Oriented and Functional Programming 部分 |
JavaScript 高级程序设计 | 第5章和第7章 |
Git | 廖雪峰的Git教程:时光机穿梭,远程仓库 |
看这篇了解一下JS的一些执行机制
Source | Tasks |
---|---|
JavaScript 高级程序设计 | 第8, 9, 10, 11, 13和14章 |
CodeSchool | Try jQuery 课程,视频观看以及翻译在这里 |
Free Code Camp | jQuery 部分 |
null | 你的第一个小项目 - Todo |
可参考例子:todoMVC 。
- 添加 / 删除 todo
- 完成 / 取消完成 todo
- 显示所有/ 完成 / 未完成的 todo
- 显示已完成的todo的数目和所有todo的数目
- 写2个版本。原生 JavaScript && jQuery
- 用 Git 以及 GitHub 来管理你们的 todo 项目
- 学会 Git 的分支管理,请利用 GitHub 的 Projects Pages 把你的 Todo 项目发布到网上
内容有 Ajax, 正则表达式,window 对象,事件,以及 jQuery 嗯,我Git又回来了:speech_balloon:
Source | Tasks |
---|---|
JavaScript 高级程序设计 | 第20章和23章。 |
Free Code Camp | JSON APIs and Ajax 部分 |
null | 改进你的 Todo 项目 |
Git | 廖雪峰的Git教程:分支管理,标签管理 |
- 提供修改 todo 功能
- 清除所有已经完成的 todo
- 尝试给todo加上优先级。优先级高的会显示在比较靠上面。
- 使用 jQuery 的添加动画。比如,添加 todo 时的淡入 && 删除时的淡出
- 添加用户验证: 登录注销,利用 Local Storage (看看与用Session Storage会有什么不同)
- 使用 JSON Server 来模拟后台
涉及了JS模块化,类,继承,ES6(ES2015), 路由, 以及多个小项目。
Source | Tasks |
---|---|
JavaScript 高级程序设计 | 第6,16,22,24章。这也许是最有技术性的一次阅读了,如果没看懂先跳过:no_good:,日后再看可好 |
Free Code Camp | Basic Algorithm Scripting 部分(复习 JavaScript) |
ECMAScript 6入门 | 学习 ES2015 |
null | 再次优化你的 Todo 项目。添加新功能,或者重构代码 |
Free Code Camp | Intermediate Front End Development Projects 前3个 |
至于模块化:可以了解一下JS史前模块化的实现 AMD(requireJS) 和 CMD(seaJS), 学习现在JS模块化的实现,ES6的Module实现的模块化
关于路由:去google了解一下前端路由的好处和前端路由解决了什么问题。这个东西以后大家都会继续接触,不必着急一时全弄懂。
由于现在前端的技术还不是很成熟,因此发展会日新月异:feet::feet:
所以啊,我们要时刻保持对知识的饥饿感!!!:yum::yum:
Recommend | Type | Description |
---|---|---|
5 | JS 框架 | React, Angular, Vue 等 |
5 | 打包工具 | Webpack,Gulp等 |
5 | 代码规范 | 使用eslint等 |
5 | JavaScript | ES2015 (如何使用?babel ) |
4 | CSS 预处理器 | Sass, Less等 |
3 | 服务器语言 | Node.js 等 |
4 | 计算机网络 | HTTP 相关知识 |
5 | 社区 | GitHub Trending, Reddit, Medium, 订阅 JavaScript Weekly, 微博 & Twitter 等 |
- 看书看不懂的部分就跳过!! 因为没有弄懂的以后实践的时候自然会弄懂的 总之要看快速看完一遍!:sunglasses::sunglasses:
- 看书的时候多做笔记:pencil2::pencil2:(用MarkDown做笔记)
- 多动手写代码,写得多才学得多。学到的东西尽量实际地打出来
demo
。对于一个方法或者数据类型,写着写着才能发现它的一些细节和特色。 - 遇到不懂的地方请 google,或者问小伙伴,或者提 issue,或者问师兄 ... 师姐 🌚🌚
- 加油哦:rocket: 这将是一个非常充实的假期 :punch::punch: