前前后后,从对前端一无所知开始自学三个月,到如今作为前端开发工程师工作了三个月,这总共半年的时间里,我是怎么学的。
一、前言
1.为什么要学前端开发?
我本来是想学java的,买了一堆java书籍,但怎么变成了学前端,已经无从根究,我自己也是没答案。不过既然已经走上了这条路,而且前端还算有趣,那就接着走下去吧。一个优秀的程序员不会只懂一门语言,因此,java什么的,早晚会接触到。也许,那不是java,而会是Haskell、Phython等任何编程语言。
2.前端开发是做什么的?
老实说,这问题我倾向于复制粘贴网上答案来应付了事。可想想逢年过节时,亲朋好友们百分百会问到这个问题,我就说一下吧。
敷衍的A:“做网站,搞网页开发的”。
偏科的B:“做UI设计的,做微信公众号的”。
装逼的C:“改变世界的”。
认真的D:“前端开发有许多方向,比如网站重构,UI设计,web应用开发,物联前端,前端AR...(省略一千字)”。
兼容性最强的万能答案:“写代码的,对,就是传说中的程序员!坐办公室用电脑的!”。
3.前端开发有钱途吗?
当然有,做啥没前途?乞讨乞到极致,也能乞成千万富翁。
一般来说,刚入门的新人,工资都高不到哪儿去,从1k到1w都有。注意,是刚入门,不是刚入行!管理层以下,绝大多数情况都是技术实力正比于薪资!
互联网发达地区的薪资水平会高一截,如北京上海深圳广州杭州,互联网公司会比其他行业公司的薪资水平高一截。同等能力下,牛逼的小公司比大公司的薪资要高一点。
4.我该怎么学前端?
这是个很大的问题。从学习方式来说,有自学与培训。从学习方法来讲,那真是没法数,每个人都有属于自己的合适的自己的方法,有的人觉得看看视频就能学会,有的是觉得光看书就完全get技能了,还有的人觉得在群里多和大佬们聊聊吹吹水就可以掌握想要的知识。
做梦吧。
前端有三大基础JavaScript、CSS、HTML。光HTML就不是上述方法能掌握的,更遑论JavaScript?JavaScript是门直译型的语言,是面向对象的。对象是啥,一只喵星人一个手机一个你就是一个对象。当然,JavaScript里的对象是代码组成的,而在JavaScript里,几乎一切都是对象。
但凡是对象,那肯定是复杂的。你复杂吗?为什么复杂?对象的复杂性,很大程度取决于它自身与其依赖的周围环境。人在陆地上可以活得好好的,扔进水里,能活几分钟?水陆环境的不同,增加了人的复杂些。换成你手机也一样,把它丢进火里或水里试试。
这跟JavaScript有什么关系?
没关系。
才怪。JavaScript是脚本语言,是条寄生虫,不寄生在宿主身上就没生命力的东西。它的宿主是什么?浏览器 or Node。
本质上,浏览器和Node都给JavaScript提供了运行时的环境,所以,这个东西,才是JavaScript的幕后老板。我们称之为JavaScript Interpreter,当然,不止这么一种叫法,还有什么Redering Engine等等,总之,它们都可以将JavaScript代码翻译成机器码,供计算机认识与使用。
没有灵魂的人,跟死人没什么两样。
JavaScript被翻译成机器码后,就有了灵魂,活过来了。
你看,JavaScript其实也是个对象。这么复杂的东西,光看书看视频听人说,能真正懂它吗?不能。这些行为最多帮我们知道它,了解它的知识体系与底层原理,顺便拓展一下眼界。要真正懂它,得不断地去使用它,以各种方式去使用它。
就像你跟一个姑娘谈恋爱,光看照片看她日志有什么用,你要牵她的手,亲吻她,拥抱她,爱她,跟她交流,做各种羞羞的事,才会真正懂她。不是么?
JavaScript尚且如此,包含它的整个前端还用说吗?
Just do it!
5.从哪里开始前端的第一步?
废话了一堆,来点干货。首先,回答问题前,我们来趟时空旅行。
1993年,超文本标记语言HTML(Hyper Text Markup Language)第一版面世,它只支持超链接的纯文本html文档。纯到什么地步?纯文本!超链接!没了。
纯文本是什么概念?在你的电脑桌面新建一个txt文档,在里面写上
hello world
保存文档为html类型。然后双击打开它,你就可以在浏览器里看到hello world了!
这就是纯文本html文档,纯的不能再纯的一个网页。
超链接呢?以记事本方式打开刚才的文档,把hello world替换成
<a href="http://www.baidu.com">hello world</a>
保存。双击打开这文档,你会在浏览器里看到带下划线的hello world,点击它,如果你能上网,那么毫无疑问,它会跳转到百度的首页。这么一个简单的文档,居然可以链接到百度,神奇吗?这就是超链接。链接互联网上的所有。
时间往前走。
1994年,层叠样式表CSS(Cascading Style Sheets)问世,这时它还没成为标准,直到1996才有第一版标准。CSS做了什么?回答这个问题得先知道HTML干了什么。HTML定义了文档的类型与内容。CSS,则决定了这些内容该如何展现。如果把HTML文档比喻成一幅纸画,那么CSS就是造物主的神力,它可以让纸画上的猫咪隐身,也可以让纸画上的鲜花变换颜色,甚至能让里面的小鸟飞出来,让高山变成平地,让沧海变成桑田。梦幻吧。
打开刚才的文档,把内容替换成
<a href="http://www.baidu.com" style="color: red">hello world</a>
保存。双击打开它,你会在浏览器里看到红色的hello world。这里,style引入了CSS样式,color给这些文字打开了颜色的大门,red,涌入了进来,把它们染成了红色。
1996年,JavaScript第一版诞生。只有HTML与CSS的世界太单调,鸟会飞,却无法互相交流,猫咪看不到老鼠,老鼠也看不到猫,它们过着孤独的生活。这样的世界不真实,于是,JavaScript来了。JavaScript赋予了这些生命思考、感知与交流的能力,从此这世界变得无比精彩,无数文明诞生与消亡,演绎宇宙洪荒。
再次打开我们的文档,把内容替换成
<a href="http://www.baidu.com" style="color: red">hello world</a> <script> alert('ni hao'); </script>
保存。双击打开它,你会在浏览器里看到一个弹出的提示框,上面写着,ni hao。这里,script引入了JavaScript代码,alert表示弹出一个提示框,括号里的是提示的内容。没错,人类,你被浏览器发现了!它在向你打招呼!
好了。
回到开始的问题上来,在哪开始前端的第一步?
如果你刚才跟着我敲了一遍例子,那么你已经踏出了第一步。接下来的学习,是把HTML,CSS,JavaScript的所有基础知识快速泛读一遍(不求甚解,只求心中有个印象,大概知道都有些什么知识,真正要了解那些知识,应该放在后面的实践中学习,如此,效率极高),你可以在W3C或者菜鸟上面翻阅这些资料,或者在MND里阅读更详细的内容。相信MDN以后会是你经常光顾的一个地方,它就像前端的百科全书,网络图书馆,你想要的了解的,基本都能在里找到。
这个过程,集中精力不受干扰,可能需要花费大约2~3个小时的时间。
然后,让我们来玩游戏吧。
6.在游戏中学前端?
没几个人会不喜欢玩游戏的,除非他没有童年。
我们要玩的,是一个闯关游戏。只要按照游戏规则,完成指定的任务,就可以进入下一关。完成任务的方式,没错,就是写代码。
不用担心,有足够多的提示能让十足的前端菜鸟轻易完成前面的一些挑战。嗯,别告诉我你是十二足的....
先看个例子,如下图所示:
图中演示了游戏中的两个简单关卡,看不懂不要紧,实际去挑战,就明白了。相信这是个非常有趣,并且富有成就感的过程。
这免费游戏出自FreeCodeCamp,当今世界上最受欢迎最流行的技术类开源项目,粉丝遍布上百个国家,你可以在GitHub上找到它的组织,当然,它在中国也有分支,简称FCC中文社区。
上图的例子,便是在FCC中文社区完成的。笔者当初就是在FCC学习了一段时间,还没完成前端的所有挑战,便已找到一份满意的工作,并且认识了许多前端小伙伴们,他们都非常友善,乐于分享,互帮互助,其中不乏非常厉害的大佬大神们。
游戏过程中,多多查阅MDN,你会学到很多知识。关卡挑战成功与否不是最重要的,最重要的,是我们在这过程中,学会了什么。知识,方法,思维方式,编程思想,and so on...
如果你完成了游戏里所有前端的挑战还没找到工作,那么我百分百敢肯定,要么就是你目标太高,要么,必定是你没认真挑战,恐怕,谷歌百度抄了不少答案吧。有用吗?自欺欺人而已。
请尽量自己独立完成。
完成FCC前端挑战大概需要一到两个月时间,牛人不到十天可以搞定(请收下我的膝盖...)。
假设你已经完成了挑战,让我们进入下一个话题,前端究竟在干什么。