Web/17-前端综合/01-2019年Web前端入门自学路线.md
2019-12-08 22:34:53 +08:00

118 lines
6.3 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.

> 本文的最新内容,更新于**2019-12-01**。大家完全不用担心这篇文章会过时,因为随着 前端技术的更新,本文也会随之更新。
> 本文的最新内容也会在[GitHub](https://github.com/qianguyihao/Web)上实时更新。欢迎在GitHub上关注我一起入门和进阶前端。
我之前写过一篇文章:[《裸辞两个月海投一个月从Android转战Web前端的求职之路》](http://www.cnblogs.com/smyhvae/p/8732781.html)。这篇文章讲述了我在转型过程中的亲身经历和感受,不少童鞋私信问我怎么入门前端,于是有了这篇文章。
## Web前端入门的自学路线
> 新手入门前端,需要学习的**基础内容**有很多,如下。
一、HTML、CSS基础、JavaScript语法基础。学完基础后可以仿照电商网站例如京东、小米做首页的布局。
二、JavaScript语法进阶。包括作用域和闭包、this和对象原型等。相信我JS语法永远是面试中最重要的部分。
三、jQuery、Ajax等。jQuery没有过时它仍然是前端基础的一部分。
四、ES6语法。这部分属于JS新增的语法面试必问。其中关于 promise、async 等内容要尤其关注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面试时有的公司不一定会问canvas靠运气。如果时间不够这部分的内容可以先不学。但如果你会绝对属于加分项。
七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
八、前端框架Vue.js和React。这两个框架至少要会一个。入门时建议先学Vue.js上手相对容易。但无论如何同时掌握 Vue 和 React 才是合格的前端同学。
九、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就相对轻量很多。个人总结一下用VS Code 的人越来越多,用 WebStorm 的人越来越少。具体可以看:《[第一次使用VS Code时你应该知道的一切配置](https://www.cnblogs.com/qianguyihao/p/10732375.html)》
十三、TypeScript简称TS。ES 是 JS 的标准TS 是 JS 的超集。TS属于进阶内容建议把上面的基础掌握之后再学TS。
## 推荐的前端图文教程
我在GitHub上有一个Web前端入门的学习教程非常详细地址是
> <https://github.com/qianguyihao/Web>
非常详细和贴心你值得star。这个前端教程主要有三个作用
- 网上的大部分入门教程,都不太适合初学者,本项目争取照顾到每一位入门者的同理心。
- 帮助前端同学提供一个精品学习路线和资源,提高学习效率,少走很多弯路。
- 可以当做前端字典,随时翻阅,查漏补缺。
## 学习交流
我建了一个“前端学习”的微信交流群目前来看学习氛围很不错。加我微信bootmei拉你进群
- 进群暗号:前端学习。
- 进群要求:少提问、少闲聊、多分享(长期潜水的,就不必了)。
## 推荐的技术博客
- [阮一峰](http://www.ruanyifeng.com/blog/)
- [张鑫旭](http://www.zhangxinxu.com/wordpress/)
## 推荐的书籍
- 《[你不知道的JavaScript](https://book.douban.com/subject/26351021/)》
上面这套书有上、中、下三本,你都可以读一读。如果时间不够,那就先读第一本。
- 《[网络是怎样连接的](https://book.douban.com/subject/26941639/)》
程序员面试的时候经常会被问的一个问题是“在浏览器的地址栏输入url按下回车后发生了什么
为了清楚这个问题,看上面这本书,足够了。如果你想入门计算机网络,这本书也是必读的。评价非常高。
关于这个问题,也可以看下面这篇文章:[浏览器输入 URL 后发生了什么?](https://zhuanlan.zhihu.com/p/43369093)
- 《[CSS世界](https://book.douban.com/subject/27615777/)》
关于 CSS 的书籍,首先推荐这本书,我身边的大佬们都说这本书好。虽然我不是大牛,但我也觉得这本书很好。
如果 js 熟练,说明你是有技术深度的前端;如果 css 熟练,说明你是有经验的前端。
## 推荐的链接
- 前端导航:<https://www.cnblogs.com/qianguyihao/p/10701923.html>
这个导航里列出了很多常见网站、博客、工具等,整体来看比较权威。
学是一方面,也是最主要的方面;但还有一个作用,比如,“这个前端框架你都不知道啊”、“这个前端大牛你都没听说过啊” 。此时,这份清单就能起到作用了。如果能把清单里列出的内容都了解下,逼格也会高很多。
- MDN 官方文档:<https://developer.mozilla.org/zh-CN/docs/Web>
如果你想查看前端的 api 文档,请首先去 MDN上看。很官方很正规。
不要去什么 w3school 上看,可能有很多错误。
## 前端资讯订阅源
国内的很多技术博客,都是比较粗浅的二手知识,真正的大佬,看不上这些东西。
要了解最新的的前端技术趋势、前端资讯,还得看国外的网站。下面这两个前端资讯的网站,极力推荐。它们都可以通过邮件的形式订阅,我认为是前端开发者必须要订阅的:
- Daily JS<https://medium.com/dailyjs> - medium 上的博客。
- JavaScript Weekly<https://javascriptweekly.com/> - 聚合类的技术周刊。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
![](http://img.smyhvae.com/2016040102.jpg)