我是如何自学前端,从流水线工人到月入3万

原创 高志飞 教程 前端 370阅读 2019-05-19 22:34:06 举报

走过很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”。

最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低学历的人来说,自学编程其实不是件容易的事情,不过庆幸的是自己坚持下来了。

目前工作还算不错,收入在目前所在的城市不算高,不算低,生活也还过得去,继续加油努力,也希望自己在今后更上一层。

从 16 年下半年开始,我真正接触前端,到现在 3 年多的时间。开始之初,我没有任何的语言基础,完全从零的小白开始,就连「对象」我都弄不明白,更别说那些高深莫测的什么封装,继承,多态等。

当时自己也不知从何入手,怎么办呢?于是每当自己遇到困难时,就厚着脸皮去请教前辈大牛,然后就是去查阅资料,很多时候自己也很觉得不好意思,现在才发现人很多时候都耻于相别人请教,怕自己丢面子。

但作为一个过来人,我要告诉你请教前辈大牛真的很重要,可以让你少走很多的弯路,不要怕丢人,没面子,面子值几个钱?学到真本事才最重要。没有技能才叫真的没有面子。当然了我们在请教别人时,一定要掌握「度」,不要打扰到了别人的工作。

我现在非常感谢前辈们的赐教,也感谢那些在网上写博客、文章分享的大牛们,给了我们这些自学的小白很多的资料,经验,心得。从中受益很多。

向优秀的前辈们学习,所以自己也开始进行学习总结写博客,希望也能帮到和我一样,学渣、从零开始、喜欢技术的一群志同道合的人。

我深知自己的技术并不高,还处在继续学习的路上,离大牛还差的很远,我本身也非常敬畏技术,也知道自己的渺小,只希望这篇文章的「学习之路」对于那些「从零开始」学习前端的同学有一些指引作用,不像自己一开始那样的那么盲目,哪怕对你有一点点的帮助,就足够了。

说了这么多,下面我们直接进入正题,都是我平时学习和收集的一些资料希望能够帮到你。

前言

  1. 首先我得告诉你,自学是件很苦的事情,学习本身就是件反人性的过程,更何况在一个从零开始的全新领域独自奋斗,这里不是要打击你,而是要你认真想好,结合自身的环境、条件。不然半途而废浪费的不仅是时间,还有精力、金钱。
  2. 如果你已经想好决定去做,那就不要犹豫,坚持下去你就可以成功,像我这样的学渣都可以,你没有什么不可以的,一定要相信自己。
  3. 兴趣是最好的老师,很多人对这句话非常反感,被生活所迫,谈兴趣不可笑吗?其实不是,问问自己对技术有没有兴趣,做自己喜欢和感兴趣的事情才能够走的更远和更久,很多人不理解这一点,总有一天你会明白的,我当时转前端的时候也是因为自己挺喜欢,而且最接近用户,都是所见所得的东西很好玩,令外一方面也觉得工资也挺高,所以自己打心里觉得做前端挺好。
  4. 做好持续学习,时刻保持学习的心态,说实话现在社会,科技的发展非常之快,技术的更新更是如此,如果你觉得学习一门技术就可以吃到老,我劝你还是打住,可能考个公务员更适合你(不要杠精,我并不是说公务员不要学习,自己体会就好)。
  5. 永远不要觉得迟,只要行动然后坚持下去,你就干掉了 80% 的人,自学的人很多,但是坚持下来的没有几个。就像郭德纲说过,不是我的相声说的多好而是「我活了下来」。
  6. 与其把时间花在学与不学的纠结上,不如把这个时间放在行动上,如果发现自己不合适也坚持不下去,那就换个赛道,专注的去做一件事情,会提高你的成功概率。

工具篇

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

1. WebStorm

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

  • WebStorm:官网下载地址。
  • WebStorm 有哪些过人之处?
  • 激活WebStorm2018

2. Visual Studio Code

微软开源免费产品,受到非常多技术人员的喜爱,基本上成为前端开发者的必备编辑器,强大的插件扩展,可以灵活的打造自己喜欢的风格。给你们送上常用插件列表拿走不谢。

  • Visual Studio Code:官网下载地址。
  • VSCode拓展推荐
  • 使用顶级 VSCode 扩展来加快开发 JavaScript
  • vscode 插件推荐

3. atom

也是一款免费开源的编辑器,受到很多人的喜爱,但是我本人用的较少,所以插件方面就不推荐了,大家可以按照自己的爱好去寻找。

4. 科学上网

每个程序员都应该具备的工具和能力,否则很多事情都无法办到,至于怎么做,你可以自己查阅资料,这里不就不在多说了。而且下面推荐的很多资源都是需要科学上网之后才能访问,所以一定要学会,一定要学会,一定要学会。

5. Google

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

6. Github

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

7. Stack Overflow

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

8. SegmentFault

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

9. Markdown

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

  • Markdown 中文文档
  • 有道云笔记:我自己一直在用的在线 Markdown 编辑器。

HTML 篇

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

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

1. 基础

  • w3school 在线教程:内容非常的基础,适合小白学习,对 HTML 有一个入门了解。
  • freeCodeCamp:一个非常好的入门学习网站,采用闯关的模式,就像游戏打怪升级一样,非常的有乐趣,准备自学的小伙伴不妨试试。

2. 进阶

  • MDN HTML:这里的内容质量更好,错误更少,内容也更加的全面。
  • HTML和CSS编码规范:掌握一些代码技巧,写出更好,更高质量的代码。

CSS 篇

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

1. 基础

  • 学习CSS布局:带你一步一步的完成 CSS 的学习。
  • CSS参考手册:对CSS可以有一个全面入门的学习。
  • w3school CSS 参考手册:同上也是非常基础的知识,适合入门。

2. 进阶

书籍:

《CSS揭秘》:非常推荐的一本 CSS 书籍,可以学到很多鲜为人知的技巧。

知识点:

  • 别说你懂CSS相对单位:深入了解 CSS 的相对单位rem,em区别。
  • CSS 进阶内容:常见知识点的深入了解。
  • Flex 布局教程:语法篇:阮一峰老师的flex讲解。
  • Flex 布局教程:实例篇:阮一峰老师的flex讲解。
  • “CSS相关”目录存档:张鑫旭大佬的CSS系列文章,深入浅出,《CSS世界》作者。
  • CSS绘制的40种形状和图形:利用CSS绘制出的40各种图形形状。
  • CSS-大前端:一些 CSS 的知识点。

JavaScript 篇

有了 HTML 与 CSS,网页也就有了内容和样式,但是会缺少与用户的互动,所有的内容都静静的躺在那里死气沉沉。就好比一个美女穿着漂亮的衣服在你面前一动不动好像也没有什么吸引力,但如果又唱歌,又跳舞,还向你抛媚眼,那可真就把持不住了。JavaScript 就是给网页添加这样的「行为」。

Javascript 简史:可以简单了解下,JavaScript 发展由来。

1. 基础

书籍

  • 《JavaScript权威指南 (第6版)》:俗称「犀牛书」,JS 的经典之作,提升JS技能的必备书籍,我的JS基础知识全都是啃这本书啃下来的,刚开始读时可能有会有些吃力,但是只要坚持下来收获满满。
  • 《JavaScript高级程序设计(第3版)》:俗称「红宝书」,JavaScript 超级畅销书,全书阐述了JavaScript语言实现的各个组成部分,ECMAScript,DOM,BOM,事件,面向对象等等,随时拿出来翻翻,更加深入了学习 JS。

在线系列

除了书籍之外,也有很多优秀的在线教程,可以帮助我们更好的学习。

  • 现代 Javascript 教程:非常全面的JavaScript 学习教程,从基础到高阶,非常详细,相信你会爱上它的。
  • 廖雪峰的JavaScript教程:廖雪峰系列教程。
  • JavaScript 标准参考教程(alpha):阮一峰老师的系列教程,通俗易懂,案例丰富。

2. 进阶

  • JavaScript语言精粹:揭示JavaScript中的精华。
  • JavaScript 秘密花园:对 JS 一些的核心知识点进行梳理讲解,例如:this,闭包/作用域,构造函数,原型等等,都是面试必考知识点。
  • ECMAScript 6 入门:阮一峰老师ES6入门书籍,全面介绍 ECMAScript 6 新引入的语法特性。
  • JavaScript使用技巧:可以认识到一些你平时没有接触过的小技巧。
  • 深入理解javascript原型和闭包系列:详细解释了原型和闭包,看完之后对原型与闭包让你彻底明白。
  • JavaScript 算法与数据结构:基于 JavaScript 的算法与数据结构,让你愉快的学习。
  • JavaScript中的正则表达式:我自己的一篇正则表达式的文章,希望对你有帮助。
  • 30分钟掌握ES6/ES2015核心内容(上)
  • 30分钟掌握ES6/ES2015核心内容(下):阐述了一些常用的ES6的知识点。
  • 学用 JavaScript 设计模式:阐述JavaScript编程语言中经典和现代的设计模式。
  • 你不懂JS(系列丛书)
  • InterviewMap:聚集了很多知识点,包括JS,浏览器,性能等。
  • 30 秒就能理解的 JavaScript 代码片段:让你更好的理解一些有用的JS代码片段。

TypeScript篇

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

  • TypeScript 中文手册:官网翻译版。
  • TypeScript Handbook(中文版):中文版。
  • RxJS 中文文档:中文官网。
  • 30 天精通 RxJS (01):認識 RxJS:繁体字可能阅读起来并没有那么顺畅。

Jquery篇

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

  • 《锋利的jQuery(第2版)》:一本很不错的 Jquery 学习书籍。
  • jQuery API中文文档:JQuery 中文教程。

Ajax篇

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

  • 廖雪峰AJAX:廖雪峰大佬的博客知识。
  • XMLHttpRequest 对象:阮一峰老师的AJAX详解。
  • JSON风格指南:前后端的交互数据通常都是 JSON 格式,所以了解 JSON 是必要的。

NodeJS与模块化

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

  • Javascript模块化编程(一):模块的写法
  • Javascript模块化编程(二):AMD规范
  • Javascript模块化编程(三):require.js的用法
  • 前端模块化开发那点历史:了解下,前端模块化的发展。
  • Node.js 官方
  • 狼叔:如何正确的学习Node.js:狼叔江湖地位颇高,《更了不起的 Node.js》的作者。
  • 全栈工程师之路-Node.js

框架篇

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

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

  • MVC,MVP 和 MVVM 的图示:在学习框架之前,你应该了解下MVVM的设计思想。
  • 框架原理:了解一些框架的基本原理。

1. Angular

  • Angular:Angular官方社区。
  • Angular开发者:大漠穷秋老师维护的站点,Angular中国布道者。
  • NG-ZORRO:Angular UI 组件库,阿里巴巴出品。

2. Vue

  • Vue:官网,最好的学习资料。
  • 我的Vue进阶之路:厚着脸皮贴出来,自己的一些学习总结,希望对你有所收获,哪怕一点点。
  • 使用vue全家桶制作博客网站
  • Element:一个高质量的 Vue UI 组件库。饿了吗前端团队出品。
  • Vue 项目里戳中你痛点的问题及解决办法(更新):做项目难免回去到坑,这里你或许可以找到答案。

最后

很多时候,我们在学习的时候有些知识点很难理解或者自己一时间想不通,如果有大牛能够询问或者带着我们再好不过了,而那些视频学习资源是你最好的选择。

这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复