前端学到什么地步，能出去找份工作，进公司做前端?【学习路线，工具教程】

前端开发学到什么地步&＃xff0c;能出去找工作&＃xff1f;

下面是北京和上海&＃xff0c;招聘web前端开发工程师的要求。以及需要做些什么&＃xff0c;工作的内容。

那么对于零基础该怎么学习自学前端呢&＃xff1f;以下是我的分享

工具篇

工欲善其事&＃xff0c;必先利其器&＃xff0c;所以在开始之前选择一个合适好用的编辑器是很重要的&＃xff0c;工具不再多&＃xff0c;在于好用就行&＃xff0c;除了编辑器&＃xff0c;我们也要掌握其他的一些工具&＃xff0c;才能够让我们在学习的道路上更加的顺畅。

WebStorm

不必多说&＃xff0c;前端最强大的编辑器&＃xff0c;特别是那无敌的智能提示&＃xff0c;但是它的缺点在于如果项目多于大时&＃xff0c;出现的卡顿让很多人苦恼。

Google

在使用「Google」之前必须学会***&＃xff0c;不然无法访问&＃xff0c;学会使用搜索可以帮助我们解决很多问题&＃xff0c;一个人的知识是有限的&＃xff0c;掌握了搜索的技巧才能以不变应万变&＃xff0c;很多时候百度出来的东西重复性很大&＃xff0c;最重要的是垃圾信息很多&＃xff0c;在百度找不到的答案&＃xff0c;在这里很容易找到&＃xff0c;Google 是我的必备搜索。

Github

全球最大的「同性」开源交流社区&＃xff0c;没有账号的赶紧注册&＃xff0c;在这有很多优秀的资源项目&＃xff0c;各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中&＃xff0c;很多时候任务重、时间紧&＃xff0c;应该避免重复造轮子&＃xff0c;这里能够找到你需要的工具或代码。

Stack Overflow

国外著名的技术问答交流社区&＃xff0c;开发时碰到的很多问题在这里都能找到答案。

SegmentFault

对应的国内版的技术问答交流社区&＃xff0c;如果你英文不好&＃xff0c;也可以在这里找找答案。

Markdown

Markdown 轻量级标记语言&＃xff0c;简洁的语法&＃xff0c;让作者专注内容而非复杂的格式要求&＃xff0c;我认为人人都应该掌握&＃xff0c;特别是经常写博客的人。想想你在用 world 时的场景&＃xff0c;每次写完文章之后&＃xff0c;不得不话费很多时间进行格式的排版&＃xff0c;使用它你就可以避免这些烦恼。

· Markdown 中文文档

· 有道云笔记&＃xff1a;我自己一直在用的在线 Markdown 编辑器。

需要学习的技术知识点和学习路线&＃xff0c;学习方法

HTML 篇

一些准备就绪之后&＃xff0c;开始我们的学习之旅&＃xff0c;首先我们先从 HTML 开始。

HTML名为「超文本标记语言」&＃xff0c;是整个页面的结构基础&＃xff0c;它承载了我们的页面内容。

基础

· w3school 在线教程&＃xff1a;内容非常的基础&＃xff0c;适合小白学习&＃xff0c;对 HTML 有一个入门了解。

· freeCodeCamp&＃xff1a;一个非常好的入门学习网站&＃xff0c;采用闯关的模式&＃xff0c;就像游戏打怪升级一样&＃xff0c;非常的有乐趣&＃xff0c;准备自学的小伙伴不妨试试。

进阶

· MDN HTML&＃xff1a;这里的内容质量更好&＃xff0c;错误更少&＃xff0c;内容也更加的全面。

· HTML和CSS编码规范&＃xff1a;掌握一些代码技巧&＃xff0c;写出更好&＃xff0c;更高质量的代码。

CSS 篇

HTML 承载了页面的内容&＃xff0c;但是有时候会略显单调与「丑陋」&＃xff0c;CSS 的作用就是为这些内容加上样式&＃xff0c;就像一个美女也要有漂亮的外衣去修饰才会更加漂亮&＃xff0c;「人靠衣装马靠鞍」&＃xff0c;网页的内容也是需要穿上一件漂亮的外衣去吸引用户。而 CSS 则完成了这个装饰。

基础

· 学习CSS布局&＃xff1a;带你一步一步的完成 CSS 的学习。

· CSS参考手册&＃xff1a;对CSS可以有一个全面入门的学习。

· w3school CSS 参考手册&＃xff1a;同上也是非常基础的知识&＃xff0c;适合入门。

进阶

书籍&＃xff1a;

《CSS揭秘》&＃xff1a;非常推荐的一本 CSS 书籍&＃xff0c;可以学到很多鲜为人知的技巧。

在线系列&＃xff1a;

· MDN CSS&＃xff1a;和 HTML 都是 MDN 社区文档&＃xff0c;质量保障。

· HTML和CSS编码规范&＃xff1a;掌握一些代码技巧&＃xff0c;写出更好&＃xff0c;更高质量的代码。

· 大漠老师的CSS系列&＃xff1a;大漠老师对CSS有非常深入的认识和丰富的实践经验&＃xff0c;《图解CSS3&＃xff1a;核心技术与案例实战》的作者。

· 大漠老师的SASS系列&＃xff1a;大漠老师的 sass 文章系列。

· SASS中文网&＃xff1a;成熟、稳定、强大的 CSS 扩展语言解析器&＃xff0c;它可以让你使用变量&＃xff0c;条件语句等书写 CSS。

· Stylus官网&＃xff1a;同样是 CSS 预编译器&＃xff0c;但它省去了一些符号&＃xff0c;让 CSS 写起来更加的简洁&＃xff0c;清爽。

· HTML5和CSS3&＃xff1a;详解HTML5 和 CSS3。

知识点&＃xff1a;

· 别说你懂CSS相对单位&＃xff1a;深入了解 CSS 的相对单位rem&＃xff0c;em区别。

· CSS 进阶内容&＃xff1a;常见知识点的深入了解。

· Flex 布局教程&＃xff1a;语法篇&＃xff1a;阮一峰老师的flex讲解。

· Flex 布局教程&＃xff1a;实例篇&＃xff1a;阮一峰老师的flex讲解。

· “CSS相关”目录存档&＃xff1a;张鑫旭大佬的CSS系列文章&＃xff0c;深入浅出&＃xff0c;《CSS世界》作者。

· CSS绘制的40种形状和图形&＃xff1a;利用CSS绘制出的40各种图形形状。

· CSS-大前端&＃xff1a;一些 CSS 的知识点。

进阶

·Javascript语言精粹&＃xff1a;揭示·Javascript中的精华。

·Javascript秘密花园&＃xff1a;对 JS 一些的核心知识点进行梳理讲解&＃xff0c;例如&＃xff1a;this&＃xff0c;闭包/作用域&＃xff0c;构造函数&＃xff0c;原型等等&＃xff0c;都是面试必考知识点。

· ECMA 6 入门&＃xff1a;阮一峰老师ES6入门书籍&＃xff0c;全面介绍 ECMA 6 新引入的语法特性。

· ·Javascript使用技巧&＃xff1a;可以认识到一些你平时没有接触过的小技巧。

· 深入理解·Javascript原型和闭包系列&＃xff1a;详细解释了原型和闭包&＃xff0c;看完之后对原型与闭包让你彻底明白。

· 大漠老师的·Javascript系列&＃xff1a;大漠老师的·Javascript系列文章。

··Javascript算法与数据结构&＃xff1a;基于·Javascript的算法与数据结构&＃xff0c;让你愉快的学习。

·Javascript中的正则表达式&＃xff1a;我自己的一篇正则表达式的文章&＃xff0c;希望对你有帮助。

· 30分钟掌握ES6/ES2015核心内容&＃xff08;上&＃xff09;

· 30分钟掌握ES6/ES2015核心内容&＃xff08;下&＃xff09;&＃xff1a;阐述了一些常用的ES6的知识点。

· 学用 ·Javascript设计模式&＃xff1a;阐述·Javascript编程语言中经典和现代的设计模式。

· 你不懂JS&＃xff08;系列丛书&＃xff09;

· InterviewMap&＃xff1a;聚集了很多知识点&＃xff0c;包括JS&＃xff0c;浏览器&＃xff0c;性能等。

· 30 秒就能理解的·Javascript代码片段&＃xff1a;让你更好的理解一些有用的JS代码片段。

Type篇

ES6 的超集扩展&＃xff0c;严格的数据类型&＃xff0c;带来更好的维护&＃xff0c;适合大型项目的开发工作&＃xff0c;有人说它是未来的发展趋势&＃xff0c;你说要不要了解&＃xff1f;

· Type 中文手册&＃xff1a;官网翻译版。

· Type Handbook&＃xff08;中文版&＃xff09;&＃xff1a;中文版。

· RxJS 中文文档&＃xff1a;中文官网。

· 30 天精通 RxJS (01)&＃xff1a;認識 RxJS &＃xff1a;繁体字可能阅读起来并没有那么顺畅。

Jquery篇

虽说现在已经是单页面应用时代&＃xff0c;有React&＃xff0c;Vue 这种强大的框架可以使用&＃xff0c;但也不缺乏一些老的项目需要维护&＃xff0c;而且在学习之初&＃xff0c;可以用它做两个简单的应用还是不错的&＃xff0c;可以相对了解下基本用法&＃xff0c;它可以让你更好&＃xff0c;更方便的操作DOM。但不建议再深度学习。

· 《锋利的jQuery(第2版)》&＃xff1a;一本很不错的 Jquery 学习书籍。

· jQuery API中文文档&＃xff1a;JQuery 中文教程。

Ajax篇

掌握了的HTML、CSS、Java时&＃xff0c;这时候可以尝试自己做一些项目了&＃xff0c;而项目中肯定会有数据的交互&＃xff0c;这时候就是 Ajax 的用武之地了。

· 廖雪峰AJAX&＃xff1a;廖雪峰大佬的博客知识。

· 对象&＃xff1a;阮一峰老师的AJAX详解。

· JSON风格指南&＃xff1a;前后端的交互数据通常都是 JSON 格式&＃xff0c;所以了解 JSON 是必要的。

NodeJS与模块化

NodeJs 的出现让前端发展进入了一个新的领域&＃xff0c;并且滋生出专业的 Node 工程师&＃xff0c;不仅如此 Node 在前端模块化&＃xff0c;工程化起到很重要的作用&＃xff0c;所以了解是必须的&＃xff0c;如果感兴趣的可以深入学习&＃xff0c;可以向全栈工程师发展。

·Javascript模块化编程&＃xff08;一&＃xff09;&＃xff1a;模块的写法

·Javascript模块化编程&＃xff08;二&＃xff09;&＃xff1a;AMD规范

·Javascript模块化编程&＃xff08;三&＃xff09;&＃xff1a;require.js的用法

· 前端模块化开发那点历史&＃xff1a;了解下&＃xff0c;前端模块化的发展。

· Node.js 官方

· 狼叔&＃xff1a;如何正确的学习Node.js&＃xff1a;狼叔江湖地位颇高&＃xff0c;《更了不起的 Node.js》的作者。

· 全栈工程师之路-Node.js

框架篇

随着日益复杂的用户需求&＃xff0c;与系统的复杂度上升&＃xff0c;传统的开发模式日渐的很难满足&＃xff0c;此时的三大框架孕育而生&＃xff0c;让开发者更加高效&＃xff0c;可复用&＃xff0c;把关注点都放在数据层的操作&＃xff0c;免去那些繁琐而又重复的视图操作。

现在框架的能力已经是前端开发人员必备的技能之一也是趋势&＃xff0c;三大框架的「最终目的」都是一致的&＃xff0c;我认为开发者不必纠结于到底应该选择哪一个学习&＃xff0c;可以选择其中的两个是最好的。对于刚入门的人来说&＃xff0c;建议选择 Vue 入手&＃xff0c;比较简单&＃xff0c;灵活。

· MVC&＃xff0c;MVP 和 MVVM 的图示&＃xff1a;在学习框架之前&＃xff0c;你应该了解下MVVM的设计思想。

· 框架原理&＃xff1a;了解一些框架的基本原理。

Angular

· Angular&＃xff1a;Angular官方社区。

· Angular开发者&＃xff1a;大漠穷秋老师维护的站点&＃xff0c;Angular中国布道者。

· NG-ZORRO&＃xff1a;Angular UI 组件库&＃xff0c;阿里巴巴出品。

Vue

· Vue&＃xff1a;官网&＃xff0c;最好的学习资料。

· 我的Vue进阶之路&＃xff1a;厚着脸皮贴出来&＃xff0c;自己的一些学习总结&＃xff0c;希望对你有所收获&＃xff0c;哪怕一点点。

· 使用vue全家桶制作博客网站

· Element&＃xff1a;一个高质量的 Vue UI 组件库。饿了吗前端团队出品。

· Vue 项目里戳中你痛点的问题及解决办法&＃xff08;更新&＃xff09;&＃xff1a;做项目难免回去到坑&＃xff0c;这里你或许可以找到答案。

React

React我了解不多&＃xff0c;所以就没什么好推荐的了&＃xff0c;大家可自行学习。

· React官网

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节&＃xff0c;互相交流学习&＃xff0c;不停更新最新的教程和学习技巧&＃xff08;网页制作&＃xff0c;网站开发&＃xff0c;web开发&＃xff0c;从0基础开始的的HTML&＃43;CSS&＃43;Javascript。jQuery&＃xff0c;Ajax&＃xff0c;node&＃xff0c;angular框架等到移动端HTML5的项目实战【视频&＃xff0b;工具&＃xff0b;系统路线图】全栈工程师学习路线以及规划都有整理&＃xff0c;分享给小伙伴&＃xff09;点&＃xff1a;学习前端&＃xff0c;我们是认真的