回想自己开始学习前端的时候,应该是大二。当时对于前端,其实是一个模糊的概念。每当看到互联网上各种酷炫的网页特效,令人赏心悦目的色彩搭配,以及简洁明了的布局排版等等,这些都让我心动神迷。抱着对前端的兴趣,懵懵懂懂地开始了前端的自学之路。上大学前,以为大学课程应该会教各种牛逼哄哄的编程技术。其实不然,大学的课程更多的是理论的,而且并没有教太多关于前端的知识。当然部分选修课有,但还是教得太浅,停留在纸上教学。所以很多时候需要靠自学。

我的学习之路像大多数人一样,看书。记得当时去图书馆借关于网页开发的书,面对一个个书架竟然有点不知所措,类别繁多,眼花缭乱。很多书动不动就起个从零开始学习xxx的书名,一看就是专门为我们这些前端菜鸟写的。拿起来看目录,都差不多,知识点很细,很教科书。不过这种书,我借了基本都没怎么看过,因为看着就觉得无聊,而且知识点过于分散,看了之后只能记得书上有这个东西,但具体用途记不清,写网页时还是得再找相应的知识点。我不否认看书没用,我也看了不少书,而且看书让我能够有个大体的知识体系结构。我觉得边看书边实践会更好,这样不会枯燥。而且当实践后对于所用的有了一些心得体会后,再回过头去看书会让我们加深印象,这时看书能够带着自己的一些理解体会。慢慢地,书上的内容就能掌握得差不多了。除了看书外,接下来就讲讲我学习前端的一些方法。这些方法可能有的不是很有效,但也是我的前端学习之路的摸索与积累。

HTML + CSS + JS

网上资源

很自然的,在搜索框输入前端学习四个字,能够得到很多相关的学习资料。各种别人写的博客,不乏有类似的。还有一些指导性的网站,比如最出名的应该是w3school,这个是中文的。之前学习看的是w3schools,貌似给墙了。没关系,内容都差不多,这些网站都有对应的知识点样例,比看书更形象。我们都知道前端的知识体系是很繁杂的,通俗意义上,前端主要包括的是HTML + CSS + JavaScript这三大块,每块知识又能衍生出很多相关的知识。要把所有的知识都装进脑袋是不可能的,这就需要掌握其中的核心。拿CSS来讲,我们大可不必把所有的样式声明都牢记于心,能够掌握一些常用的样式声明就足够,其他比较不常用的,完全可以用到了再查。在看网上资料的时候也是,很多时候能够搜出一大堆的东西,这时就要能够判别哪些资源更好,出处更专业。如何判别呢?对我来说,一般打开网页是塞满广告条的直接关闭,这样的网站一般都是资源的搬运工。而且在这种网站学习知识,简直了。一般国内的一些博客社区有的写的还好。不过,看别人写的东西,一定要加上自己的判断,否则容易被带入坑里。最好能够尽量找权威的,如相应知识的官网,这里推荐一个比较权威的网站Mozilla的MDN,用过火狐浏览器的应该知道Mozilla。

如何搜索

从我学习前端的经验来看,搜索的姿势很重要。这里无论是学习前端还是其他任何技术,搜索都是一门学问。而且从使用的搜索引擎,能够看出你是不是学会了搜索。这里不是贬低国内的很多搜索引擎,毕竟环境使然。很多时候我们都能从Google搜到比较满意的答案,不能使用Google的建议学习一下『科学上网』。通过Google,能够搜到的结果比国内的浏览器搜出的全,而且很多都是比较有用的结果。这里我们不得不佩服国外的程序员,前端领域,甚至计算机相关的大部分领域,歪果仁比我们领先了不是一点两点。他们的分享精神,以及创造能力是我们需要学习的。我相信,没了GithubStackOverflow,将有一大批程序员不会写代码。

如何使用Google,我只想说,用英文搜。不会英文的,网上有翻译器吧。搜什么?关键字,不要像要去提问题一样,给个句子,抓出几个单词,Google能够找到你想要的。实在搜不到,问总可以,去StackOverflow上问。经常的,我会因为某个知识点不清楚去搜索。如:我对于CSS中的backgroundcover不清楚,那么我会打开Google,并搜索CSS background cover就这三个单词,能引导搜索引擎给出我们想要的答案。

Google Result

这样的到结果后就OK了吗?我们并不满足于此,可以看一下以上的结果,可以看到前面提到的w3schools和MDN。这些搜索结果也能让我们找到对我们有用的前端学习资源,这就从点扩展到面了。而且上面的搜索结果中的CSS-Tricks也是学习前端的一个不错的网站。后面会列出我学习前端经常光顾的网站。

这样搜索到的结果,很多都是英文的。我自己的英文也一般,看这些资源也是有难度。但是看到不懂的单词,通过翻译都能基本看得懂。这一点MacBook上的三键取词功能为我带来了不少便利。

如何浏览网页

既然是学习前端,一打开浏览器,这里面所有的操作都涉及到了前端知识。小到在搜素框输入域名,大到呈现在眼前的浏览页面。我相信大部分前端开发人员都不会用IE来浏览网页,甚至讨厌IE。因为为了兼容IE,让他们忙得焦头烂额,而且体验又差。前端人员应该有个通病,看到好的页面实现,总不由自主地按了下F12(这是在Windows下,Mac下是Alt+Command+I),调出开发者工具,认真地研究一下标签,样式等。学习前端的一个优势在于,通过浏览器,可以看到任何页面的源码实现。这些实现对我们都是透明的,这样让我们能够在浏览网页的时候,学习别人的开发经验。这些经验包括:CSS的命名、标签使用、布局实现、网页优化等等。当然有的网页的JS代码通常会进行混淆并压缩,但并不会影响我们学习。

有时候,我们在开发网站时,可能会考虑使用什么字体,毕竟中文的字体跟英文有区别。这时候我会去比较大型的国内网站看看人家使用的字体。通过借鉴别人的开发经验,能够让我们节省很多时间。而且,建议学习一下优秀网站的<head>标签中的声明,其中包含了很多网页的描述信息,对于网页优化具有借鉴意义。

光浏览也不够,必要时,需要动手自己实现一下。可以先根据自己所学的,尝试写出对应的页面。最后再比较别人的实现,看看自己哪里写的不够好,别人为什么要这么实现,有什么优点。这样慢慢地掌握开发时的最佳实践,对自己的编码能够有提升。

资源列表

下面分享下学习前端时,看到的一些有用的学习资源:

总结

前面涉及的都是我在学习前端时,用到的一些学习方法。主要是些学习工具相关,没有涉及到具体的知识学习。接下去,还会涉及到具体的知识内容。希望本文提到的一些学习方法能够帮助到对前端学习无从下手的入门新手。前端学习是一个漫长的过程,新技术层出不穷。我相信掌握了知识获取手段是十分重要的,技术再如何更新换代,学习能力和学习方法对了,永远都不会被甩在后面。