前端学习路线

转载自:https://www.douban.com/note/330647290/


感谢豆瓣白乌鸦提供

前端要学习三个部分:HTMLCSSJavaScript(简称JS),因此首先明确三个概念:
HTML
是内容层,它的目的是表示一个HTML标签在页面里是个什么角色。
CSS
是样式层,它的目的是表示一块内容以什么样的样式(字体、大小、颜色、宽高等)显示。
JS
是行为层,它要做的是当用户触发某些行为时,会给内容和样式带来什么样的改变。

1
HTMLCSS部分。
HTML/CSS
初学,就照着http://www.w3cschool.cn/(有编程基础或计算机专业的看会大有帮助,看之前搞清楚:什么是HTML?HTML能做什么?什么是CSS?CSS能做什么?)http://www.dreamdu.com/xhtml/(零基础看这个适合),把http://www.w3cschool.cn/index-6.htmlhttp://www.w3cschool.cn/index-7.html两套做完了就入门了。

入门之后,学习CSS的精华,即布局,推荐李炎恢的教学视频,布局这一章:http://edu.51cto.com/lesson/id-14895.html27章,如果觉得不够,需要实战,则再学习接下来的2829章。注意,这时候一定要老师讲一块代码,自己就要照着实现一次,切勿只看不做。

CSS
还有一个精华部分就是命名规范,找几个著名网站(比如豆瓣、网易新闻)这类,研究它们的命名规范,我这里,有一个现成的命名规范可供学习(需要登录evernote查看):https://www.evernote.com/shard/s168/sh/7f89cc57-cab2-4712-b61b-9fde25e3ef51/d01c8e34ef05373ec06c3b2f7cfaba82/res/e0b9963b-ba7a-441a-8462-8f87c48e4cda.jpg?resizeSmall&width=832

学习完成后就是一个较为熟练的HTML/CSS使用者了.这时候如果想继续深入学习相关类库和框架,推荐SassCompass,推荐两篇阮一峰的博客:http://www.ruanyifeng.com/blog/2012/06/sass.htmlhttp://www.ruanyifeng.com/blog/2012/11/compass.html
和这本书:《Sass and Compass inActionhttp://book.douban.com/subject/6732187/

2
JavaScript部分。

初学者推荐看视频:http://edu.51cto.com/course/course_id-166-page-1.html,特别注意JavaScriptOOP写法(重点,可多看几遍),以及闭包、原型链,异步编程部分(次重点),前者写项目都在用,后者涉及JS这个语言本质特点。

然后需要学习JSHTML/CSS在浏览器下的调试方法,推荐用Google Chrome下的chrome developer tools调试,可以看这个视频学习:

http://haoduoshipin.com/v/40


补充:

看完视频并经过实践后,可以看《Javascript good parts》(http://book.douban.com/subject/2994925/)这本书,不必细看,看它的思想即可。用于巩固,提升JS方面的编程思想。


如果英语不错的话https://www.codecademy.com/en/skills/make-a-website这个网站是从0开始制作一个网页的,很详细,交互也很赞。相比之下,w3school对于新手真的太不友好了,很多都是让人感觉一头雾水。

 

推荐一篇极好的文章(整个前端的知识体系):http://www.haonanji.cn/230.html

 

感谢豆瓣司马小萱提供

入门前端的入门可能会比较容易,例如一些最基本的公司可能就仅仅要求csshtml就可以了,排排页面,重构一下页面。可能一个10来天的学习就可以很好的胜任了。然后更加深入一些,能够使用JavaScript对页面的改动,运用一些能够加快开发速度的工具,如jQuery之类的。这时候的前端我感觉就可以胜任很多工作了,例如一些基本的网站开发,和后端的协同开发(ajax)什么什么的。然后我个人觉得这里就开始出现分岔了。我个人觉得学习方向可以从广度和深度两个方向去看。首先是广度,前端能够涉及到的方面有很多:可能一直就是喜欢工程型的开发,想继续寻找更多的可以让项目开发周期更短,让工程师开发起来是thinking of programing。而广泛接触不同的工具,例如grunt gulp的自动化工具,sass less,coffeescript之类的预编译语言,或者是typeScript一类的js超集,还有一些全栈解决方案,meteor,phonegap之类的。或者是就是想钻研框架,就想知道jquery的选择器实现是怎样的,怎样解决冲突,angularjs的框架思想和jquery怎么不一样……又或对计算机网络,网站性能有兴趣。可以钻研http协议,ws协议,还有网站性能如何提升还可以是就喜欢走前沿,html5的各种接口,svg,canvas。然后就可以顺便去钻研一下计算机图形学。另外ecma2015,目标是构建大型应用,随着前端的能力越来越强大,前端要处理的问题也越来越多,因此语言特性增加了,这时候,需要深挖语言特性,需要处理数据结构还有很多的一些,例如浏览器兼容的问题,兼容css3,html5api(websocket,localstorage什么的)~。前端的安全问题xss,csrf,界面操作劫持等。都是可以深究的课题。实在不喜欢,我还可以跳出html5的架构,我去玩玩flex架构的东西?广泛去接触是为了让我们有更多的知识积累,去接受一些我们即将遇见的问题,去提出一些可能的解决方案。花费的时间可能不多,但是会让你受益匪浅。甚至了解的领域可以不仅仅是前端的,后端的,操作系统,服务器,什么都可以去了解,说不定哪一天你就用上了呢?而知识的广度中,我觉得构建个人的知识结构图是很重要的(github上有开源项目就是类似这样的,fks,前段技能总汇)走了结构图,你就知道自己有什么东西是知道的,这样你会有成就感。有了结构图,你也可以经常性的回想一些已经了解过的知识。反正就是好处多多咯~还有一个就是如何收集一些新的信息和知识:github开源项目,工作接触,系统学习某一块知识时接触,一些论坛和团队(阿里的d2,腾讯的alloyteam),一些网站的问答和博客文章(csdncnblog,前端范)而另一方面,学习的深度也是不可或缺的,这是为了使我们能够把表层的,停留在认知上的知识深化。这一步通过的是实践咯。开源项目,实习工作,学校项目,虚拟项目都是可以的。例如你想了解websocket的协议,要不就去为一个不支持websocket的浏览器写一个兼容库?这样你就深刻了解了ws的技术实现,也感受到了浏览器兼容的做法,连带着为了理解wshttp协议,socket你要不要也去了解一下?然后顺便来一下计网的osi七层模型,顺便买本http权威指南看一看吧……(๑• . •๑)还有你对js有兴趣吗?毕竟jquery什么的可能会过时,但是基础的js你可是可以一直用的呢,(也不排除出来一个类似dart的,就取代js了,但是……我不信 )还有ecma2015诶,然后你对js的翻译过程有兴趣吗,我记得有开源项目js.js,可以去了解翻译过程。或者angularjs,jquery的库的源代码也是可以读读。双向绑定的实现,脏检查,作用域……回答的很多,我想说其实前端东西涉猎可以很多,也可以不多,因为界限很模糊。但如果自己喜欢,也有时间,其实可以把这些东西都了解一下,说不定哪一天突然心血来潮,就下定决心在某一个领域钻研下去了呢。安全性,图形学,数据结构,数据库,计算机网络~框架和语言特性的深入摸索~全栈模式的探索~webapphybrid app的开发~html5的新接口……好多好多。我是个学生啦充其量是个实习了半年,好不容易拿到offer了的应届生。自己也没有完全确定一条自己的前端之路,因为我每走一步我都会发现好多好多。我是觉得自己并不需要这么快就定下来,我喜欢前端,我也喜欢实现自己的想法,所以我想去了解更多可以实现我想法的工具,了解一些新的技术,钻研一些旧的东西。其中有些观点是参考前端范这个学习基地,其实一切迷惘,我觉得都是因为了解的不够多,时间还没到。这时候,需要积累。我相信这样积累下去,直到某一天,我会突然发现自己应该前进的路。

 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页