评论该主题
作者：您目前是匿名发表 &
作者：，欢迎留言
提示：用户在社区发表的所有资料、言论等仅代表个人观点，与本网站立场无关，不对您构成任何投资建议。用户应基于自己的独立判断，自行决定证券投资并承担相应风险。天猫高手来教你！零基础如何系统地学习前端开发？
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
天猫高手来教你！零基础如何系统地学习前端开发？
：网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：
基础知识：
1、HTML + CSS 这部分建议在
上学习，边学边练，每章后还有小测试。 之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。
2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 W3school上学习。之后建议马上看《Javascript语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2、Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：
a） 框架。
推荐jQuery，简单易用，在W3school简单学习js后，直接上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充： 可以使用
学习 Javascript，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b） Javascript 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。
Javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《Object Oriented Javascript》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己百度一下。
c） Javascript 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容你会在《Javascript语言精粹》中详细了解。另外，你必须理解 json。
d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Javascript》这本书中关于dom编程的部分讲的也很好。
e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
f） 了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。
再进一阶 · 代码层面：
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。
1）易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
2）可测性。
3）高性能。必读《高性能Javascript》
4）低流量。移动端关注比较多。
再进一阶 · 工程层面：
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。
以上内容只是简单说了前端学习的顺序。前端工程师应该有的知识结构请参考这里：
对于前段开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。
1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。
附上超多的交互自学资料：
应该说前段工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是PHP了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如PHP的Ci、Yii、Yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。
3、Android和IOS开发。
时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。对于学有余力的同学，应该了解Native开发的基本流程，至少了解到界面构建的技术。
【优设指南类文章合集】
平面设计：
交互设计：
抠图技巧：
配色方案：
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量104万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注为什么看起来不是很复杂的网站，都需要大量顶尖高手来开发？
　　来自知乎的话题讨论&为什么很多看起来不是很复杂的网站，比如 Facebook、淘宝，都需要大量顶尖高手来开发?&
　　子柳，淘宝打杂的 码农
　　就拿淘宝来说说，当作给新人一些科普。
　　先说你看到的页面上，最重要的几个：
　　【搜索商品】&&这个功能，如果你有几千条商品，完全可以用select &这样的操作来搞定。但是&&当你有(一百亿)条商品的时候，任何一个数据库都无法存放了，请问你怎么搜索?这里需要用到分布式的数据存储方案，另外这个搜索也不可能直接从数据库里来取数据，必然要用到搜索引擎(简单来说搜索引擎更快)。好，能搜出商品了，是否大功告成可以啵一个了呢?早着呢，谁家的商品出现在第一页?这里需要用到巨复杂的排序算法。要是再根据你的购买行为做一些个性化的推荐&&这够一帮牛叉的算法工程师奋斗终生了。
　　【商品详情】&&就是搜索完毕，看到你感兴趣的，点击查看商品的页面，这个页面有商品的属性、详细描述、评价、卖家信息等等，这个页面的每天展示次数在30亿以上，同样的道理，如果你做一个网站每天有10个人访问，你丝毫感觉不到服务器的压力，但是30亿，要解决的问题就多了去了。首先，这些请求不能直接压到数据库上，任何单机或分布式的数据库，承受30亿每天的压力，都将崩溃到完全没有幸福感，这种情况下要用到的技术就是大规模的分布式缓存，所有的卖家信息、评价信息、商品描述都是从缓存里面来取到的，甚至更加极致的一点&商品的浏览量&这个信息，每打开页面一次都要刷新，你猜能够从缓存里面来取吗?淘宝做到了，整个商品的详情都在缓存里面。
　　【商品图片】&&一个商品有5个图片，商品描述里面有更多图片，你猜淘宝有多少张图片要存储?100亿以上。这么多图片要是在你的硬盘里面，你怎么去查找其中的一张?要是你的同学想拷贝你的图片，你需要他准备多少块硬盘?你需要配置多少大的带宽?你们的网卡是否能够承受?你需要多长时间拷贝给他?这样的规模，很不幸市面上已经没有任何商业的解决方案，最终我们必须自己来开发一套存储系统，如果你听说过google的GFS，我们跟他类似，叫TFS。顺便说一下，腾讯也有这样的一套，也叫TFS。
　　【广告系统】&&淘宝上有很多广告，什么，你不知道?那说明我们的广告做的还不错，居然很多人不认为它是广告，卖家怎么出价去买淘宝的广告位?广告怎么展示?怎么查看广告效果?这又是一套算法精奇的系统。
　　【BOSS系统】&&淘宝的工作人员怎么去管理这么庞大的一个系统，例如某时刻突然宣布某位作家的作品全部从淘宝消失，从数据库到搜索引擎到广告系统，里面的相关数据在几分钟内全部消失，这又需要一个牛叉的后台支撑系统。
　　【运维体系】&&支持这么庞大的一个网站，你猜需要多少台服务器?几千台?那是零头。这么多服务器，上面部署什么操作系统，操作系统的内核能否优化?Java虚拟机能否优化?通信模块有没有榨取性能的空间?软件怎么部署上去?出了问题怎么回滚?你装过操作系统吧，优化过吧，被360坑过没，崩溃过没?这里面又有很多门道。
　　不再多写了，除了上面提到的这些，还有很多很多需要做的技术，当然并不是这些东西有多么高不可攀，任何复杂的庞大的东西都是从小到大做起来的，里面需要牛叉到不行的大犇，也需要充满好奇心的菜鸟，最后这一句，你当我是别有用心好了。
　　=========================================
　　分割线
　　=========================================
　　覃超，曾经沧海难为水,Facebook工程师
　　功能上面虽然不复杂,但是要完成的细节却很多.　比如news feed里面的推荐算法就很重要,要根据用户之前的记录和与好友的关系来生成.　另外就是根据用户的信息和行为,要做机器学习和数据挖掘,从而来挑出最匹配的广告.这也是比较花人力的事情.
　　另外Facebook的用户量奇大无比.　假设你只是做一个学校内部用的社交网站,　那肯定很简单.　但是如果考虑到上亿人在上面用.　你首先服务器就必须是一个分布式的机群,还要保证能抗住那么大的流量.　同时为了性能够好,不得不加上mem cache和网页分块加载等功能.　还有就是每天用户产生的总数据量(状态,留言,照片,分享等)有TB的数量级,你数据库是否撑住等等.
　　另外树大招风,你要一个很强的安全小组来保证网站在受攻击的时候能防御好,还有要防止垃圾信息和恶心广告或者程序的散播.　另外还有为了全球化而带来的多语言问题.
　　总之,一个网站做大了之后,很多问题就会产生,不是在校园里面做一个学期作业那么简单.
　　更多回答
关注 『』 官方微信，回复" 14894 " 即可在微信里阅读本篇内容。
在查找公众号中搜索：imyixieshi，或者扫描左侧二维码快速关注。更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
使用您的微博帐号登录，即刻尊享微博用户专属服务。
使用您的QQ帐号登录，即刻尊享QQ用户专属服务。
使用您的人人帐号登录，即刻尊享人人用户专属服务。
按住视频可进行拖动
把视频贴到Blog或BBS
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
收藏成功，可进入查看所有收藏列表
方式1：用手机看
用爱奇艺APP或微信扫一扫，在手机上继续观看：
《自元奇说》轮圈怎么改？高手来教你！
方式2：一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/164eL4
下载安装包到本机：&&
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/164eL4
下载安装包到本机：&&
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
爸爸去哪儿2游戏 立即参与
《自元奇说》轮圈怎么改？高手来教你！
播放量数据：
你可能还想订阅他们：
&正在加载...
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"&
&a href="javascript:void(0);"&
&span>{{start}}-{{end}}&/span&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"&
&a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《》剧集：
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入300字
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制}