Web/20-前端综合/2018年Web前端自学路线.md

126 lines
4.5 KiB
Markdown
Raw Normal View History

2018-04-10 10:11:35 +08:00
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8776837.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
2018-04-10 10:51:00 +08:00
我前几天写过一篇文章:[《裸辞两个月海投一个月从Android转战Web前端的求职之路》](http://www.cnblogs.com/smyhvae/p/8732781.html)。这篇文章讲述了我在转型过程中的亲身经历和感受,不少童鞋私信问我怎么入门前端,于是有了这篇文章。
2018-04-10 10:11:35 +08:00
## Web前端入门的自学路线
> 新手入门前端,需要学习的**基础内容**有很多,如下。
一、HTML、CSS基础、JavaScript语法基础。学完基础后可以仿照电商网站例如京东、小米做首页的布局。
二、JavaScript语法进阶。包括作用域和闭包、this和对象原型等。相信我JS语法永远是面试中最重要的部分。
三、jQuery、Ajax等。
四、ES6语法。这部分属于JS新增的语法面试必问。其中关于promise、async等内容要尤其关注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面试时有的公司不一定会问canvas靠运气。如果时间不够这部分的内容可以先不学。
七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
八、前端框架Vue.js和React。这两个框架至少要会一个。入门时建议先学Vue.js上手相对容易。
九、Node.js。属于加分项如果时间不够可以先不学但至少要知道 node 环境的配置。
十、自动化工具:构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意Sass 比 Less 用得多gulp 比 grunt 用得多。
十一、前端综合HTTP协议、跨域通信、安全问题CSRF、XSS、浏览器渲染机制、异步和单线程、页面性能优化、防抖动Debouncing和节流阀Throtting、lazyload、前端错误监控、虚拟DOM等。
十二、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外前端常见的IDE有两个WebStorm 和 Visual Studio Code。WebStorm什么都好可就是太卡顿VS Code就相对轻量很多。个人总结一下新手一般用 WebStorm入门之后用 VS Code 的人更多。
## 推荐的学习视频
2018-04-10 10:51:00 +08:00
> 我看过的学习视频,多的数不清。传智播客、尚硅谷、慕课网、极客学院等等,这些只是冰山一角。下面推荐一些。
2018-04-10 10:11:35 +08:00
温馨提示不一定是从头到尾看可以选择性地看。另外要倍速播放我一般是用1.5倍的速度播放。
### 传智播客
传智黑马2018 Web前端全套
- 学习路线图:<http://bbs.itheima.com/thread-391250-1-1.html>
- 视频资源:<http://www.itcast.cn/news/20180209/11421176192.shtml>
- 官方视频库:<http://yun.itheima.com/course/c135.html>
PS上面这三个链接指向的的是同一个学习资源。
黑马的视频很新可以找官方的QQ要配套的PPT和源码。
### 尚硅谷
尚硅谷 2018 Web前端全套
- 视频资源:<https://www.52pojie.cn/thread-688171-1-1.html>
- 官方视频库:<http://www.gulixueyuan.com/course/explore/front>
PS上面这两个链接指向的的是同一个学习资源。
尚硅谷的视频里讲JS语法和ES6的部分很不错。
2018-05-04 09:59:49 +08:00
### Vue相关
2018-05-06 17:28:16 +08:00
**1、传智黑马 | 2018年Vue.js深入浅出教程**
我在网上找了很多 Vue2.0 入门的视频但是一直没有找到满意的。但这套视频还不错可惜官方一直都只公布了一小部分。终于在2018-05-03的时候更新了11天的全部视频真实太激动了。
上面这个视频资源,相关链接如下:
- 在线视频链接:<http://yun.itheima.com/course/335.html>
- 视频资源:<https://pan.baidu.com/s/1bUdzAkPVHJrJPcBuOgKpgA>
- 源码和笔记:<https://pan.baidu.com/s/1Uwja4t4ZE7cmm-l0xufkFg> 密码8v9c
2018-05-04 09:59:49 +08:00
2018-04-10 10:11:35 +08:00
## 推荐的技术博客
- [阮一峰](http://www.ruanyifeng.com/blog/)
- [张鑫旭](http://www.zhangxinxu.com/wordpress/)
2018-04-10 10:51:00 +08:00
## 推荐的书籍
- 《你不知道的JavaScript》
2018-04-10 10:11:35 +08:00
## 推荐的链接
待更新。
PS今天先写到这里。本文内容不定期更新。
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**id`vitateam`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg)