Webcourse/16-前端基础/01-Web前端自学路线.md
qianguyihao eb72fefb3a update
2018-04-10 10:51:00 +08:00

103 lines
3.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8776837.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文。
我前几天写过一篇文章:[《裸辞两个月海投一个月从Android转战Web前端的求职之路》](http://www.cnblogs.com/smyhvae/p/8732781.html)。这篇文章讲述了我在转型过程中的亲身经历和感受,不少童鞋私信问我怎么入门前端,于是有了这篇文章。
## 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 的人更多。
## 推荐的学习视频
> 我看过的学习视频,多的数不清。传智播客、尚硅谷、慕课网、极客学院等等,这些只是冰山一角。下面推荐一些。
温馨提示不一定是从头到尾看可以选择性地看。另外要倍速播放我一般是用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的部分很不错。
## 推荐的技术博客
- [阮一峰](http://www.ruanyifeng.com/blog/)
- [张鑫旭](http://www.zhangxinxu.com/wordpress/)
## 推荐的书籍
- 《你不知道的JavaScript》
## 推荐的链接
待更新。
PS今天先写到这里。本文内容不定期更新。
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**id`vitateam`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg)