web前端到底是什么？


某货： “前几年前端开发人员鱼目混杂，技术参差不齐，相对学习起来不规范，导致> 前端开发人员聚集，所以现在前端工种和工资还是没得到普遍重视，但近2年来，> > HTML5、JS 的流行，让前端异常火爆，以后还会更有前途吗？请问您怎么看？”


我





“我只能告诉你：前端不灭”

“除非你不要脸！”

“前些年因为国内都不要脸，然而现在都明白了用户体验至上，现在都要脸；”

“不但要脸 还要胸大 活好！用着舒服”

“后端提供床，前端提供颜值高的妹，你说重要吗？”


某货：“嘿嘿！你意思是 地上、厨房都可以，但没妹子怎么行？。。【大大的 污 】”




上面对话，是我前两天在群里 一段解答的对话。

有人问我 为什么你举例这么生动，真实，让人看了觉得更激情了。我只能告诉你：我主业是段子手，副业才是code，你表 搞错好吗？

好，下面我来简单粗暴的介绍下我自己：3个特征而已


我 最 帅！
	
我 最 帅！
	
我 最 帅！


O(∩_∩)O 好了，我们已经相识了，我们进入相知的阶段（我擦，太快了吧？）

在我讲段子之前呢，我有必要和责任解释下：
｛“ web前端开发 ”是什么？ ｝

｛“ web前端开发 ”有前途吗？｝

｛“ web前端开发 ”到底怎么学？｝

这3个对象，是你入【前端】这个坑的初恋，对！没错同时和 3个对象谈恋爱（我知道你大学肯定干过额 【邪恶脸】）。



NO 1： web前端开发 ”是什么？

前言：声明啊，我是个草根派，不是学院派；那些一篇噼里啪啦，噼里啪啦的各种定义 和术语解释，你在我这么帅的人的系列文章里，根本看不到 嘿嘿！




【啦啦啦 啦啦啦， 我是卖报的小行家，不怕苦，不怕累。。】。。。画风突变


跑题啦！不过话说回来，这个脍炙人口的儿歌，深刻反映了我们 web前端行业的一个工种状态。行家，自由，但要经历苦、累 才会有收获。其他行业，苦、累居多，而我们大前端那必须是自由，乐趣，随心所欲的一个工种。

本帅的感触：做任何一件事，如果是兴趣使然，那必定会坚守到老，从菜鸟变大神也是顺理成章的事儿。因为你的经验会随着你的颜值经历时间的洗刷，最后你回头会发现一件最有意义的事：

我擦，加薪了！ (^o^)/YES!

废话了这么多，我们来步入正题：其实web前端这个职位，并没有一个有效的历史记录可以查询，更没有一个明确的定义，她不像java 攻城狮、c++开发这种一开始就有明确定位的工种一样，是有核心技能可以描述的。比如java开发，顾名思义就是利用java程序来开发功能，php开发：利用php做个商城等等。



前端小美女

你会发现：我们前端这个姑娘，她甚至没有一个logo 和拟人化的图形用来描述（是不是挺扯淡的？）不过不要紧，下面让帅的人 来为她正名。O(∩_∩)O~

一、web前端的演变


Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过10年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

随着WEB2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。




前端飞速发展



上边一段标注解释，是某科的一些附录，（这么枯燥的东西，就让别人来总结吧对么？）大概阐述了，以前的web是怎么一种状态和Web2.0的重要性。

其实中国的“web前端开发攻城狮”这个职位好多人并不知道是怎么叫出来的，那么我偷偷 <(￣︶￣)>告诉你：其实是淘宝团队，发明出来的本土化的名称，因为历史原因，淘宝在2005以后迅速崛起，并且爆发式的访问量，让淘宝网的用户体验受到巨大考验和急需前进。

然后淘宝官方第一次有了【 web前端开发 】这个字眼和招聘职位，或许其他网站也想到了这样一种描述，但是毕竟知名度巨高的淘宝，受关注度自然高，口碑相传，就把【前端开发】这个叫法发扬光大了。

在早期点Web前端不叫前端，而是被亲切的叫做“网页设计师”，没错你没看错，就是这个名字，我记得那时候 【网页三剑客】的说法满天飞，你掌握了这3贱客，真的很贱，就可以被人叫做网页设计师了。

网页三剑客：DW\FW\Falsh



网页三剑客

网页三剑客（Flash、Dreamweaver、Firewoks) 并称为Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合 。后来Firewoks被Adobe这个变态的巨头收购以后，ps就基本取代Firewoks来做设计网页的工作了，虽然我知道现在还有人用，估计是一种怀念和某些好用的切图功能吧。

而那时候的网页设计师 如果要入此道，必须要掌握的就是Dreamweaver，并不是说只有他能写html 和 css ，而是它在当时的自动提示实在太好用、太强大了，简直不用费脑细胞，你就可以轻轻松松的完成你所想。在当时前端工具和编辑器贫乏的时代，这个绝对是神奇级别了（当然后来 写的多了都熟悉基本不用提示的）。当年还有很多基于Dreamweaver构建网站的教程，那时候真的是个基情满满的年代，这些工具类的历史产物，有兴趣的朋友可以去了解一下就好了，我们不在多舌。

二、web前端开发入门，需要掌握哪些基础


虽说这个问题很大，但是这个话题就很好回答了；因为现在前端如此眼花缭乱，技能多多，都是基于此三板斧：
HTML、CSS、JavaScript




W3C



语言基础：HTML、CSS、JavaScript

思想标准：W3C标准


W3C万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。


所以 我们现在运用的html 超文本标记语言，css 等所有基于web技术的范畴，基本都是w3c标准，并全世界统一执行的，所以符合w3c 也就是开启前段之门了。

web前端，首先不是孤立存在的，前端相对于web后端编程而言，前端是浏览器自身支持的编程语言，包括html,css,javascript

HTML： 是构成网页展示的基础，是一种很简单可视化的标识语言，说白了就是 一是一，你写二就出二。网上所有的网页网站，不管多么牛鼻最后都会转化成html，被浏览器渲染出来，用作展示。

CSS： 又称作样式表，简单点说就是html的外衣，将html包装的明艳动人。

JavaScript：是一种直译式脚本语言，非常灵活，可以在任何浏览器上开发与调试的一种动态类型、弱类型、基于原型的语言。

（关于js这个让人又爱又恨的语言，我们到后面会着重介绍和学习，因为掌握此技能， 你就拥有了全世界，说全世界是扯淡的，说白了拥有了 money和妹子）

NO 2： web前端开发 ”到底有前途吗？

如果你在2012年以前 这么问，或许很多人会思考一下，给你说不知道，应该没后端编程有前途吧，或者直接说，web前端有啥啊？不就写个网页、js吗？工资又低。。。。





但现在是2016年了亲，我只能说以后都会是前端年，很久以前不懂web前端的人观念大概是：


xx是美工，让他弄个网页过来

xx你好，你能给我切割按钮过来吗，我后面需要用

xx你alert一下，看我数据传过去了没。

xx xx xx 的


xx你麻痹啊xx！不要叫我美工，谁叫我跟谁急；不要叫我页面仔，虽说每个扎实的前端都是页面仔过来的；更不要侮辱我的职业，以为前端只是写页面、切图。。



然而现在的真实情况是这样的：

hi，小北你这个是什么效果啊，这么牛，css3 html5做的？【css3 html5 笑而不语】

我擦，这，这 怎么自动就刷新了，吓我一跳啊，我还拉回切换着f5呢【gulp、 webpack等构建工具笑而不语】

哎呦，js真牛逼啊，连后台数据库都能操作了，服务器都能构建了【nodejs笑而不语】

哥，你需要什么形式的json串啊， 我这边好生成一下，哥，你过来看一下这个体验怎么样？【老子 不笑，也不会语。尼玛要累死我？】





随着html5的普罗天下，css3的风靡全球，随着nodejs 的崛起，JavaScript这个最容易被人误解的语言，终于散发了它本该有的光芒（不要以为是我抄的别人的话，本篇文章纯属原创，我就是这么有才！）





Javascript这个牛鼻的历史产物，现在真的可以说是万能的，至少在web层面是这样，交互、效果、数据操作、娱乐游戏、操作文件io等等。


由于现在是web应用时代，各种尺寸的电子设备，增长式的爆发，只要和屏幕有关的 就是颜值，颜值代表了一切，你说前端有前途吗？

html5、网页游戏风靡全球，需要页面展现的东西 都是前端范畴，你说有前途吗？





目前世界上最多的可视化物质是什么？蚂蚁？人？还有人说是TT（泥煤，亏你想的出来），那么我告诉你，是网页，网页 ，网页，据统计现在全世界 有亿级别的网页，请问什么概念，你说有前途吗？

最直观的：前端的工资 从前几年的平均几K 到现在的10 20 k 。




前端工资比例图


你说有前途没?

由于本篇文章是 我 前端系列文章的第一篇，只介绍下历史原因 和 为前端正名，并且有效提升初学者和怀疑者的兴趣，所以一些名词的介绍和意义，大家先自行谷歌、度娘一下，后面我们会一一道来。

NO 3： web前端开发 ”怎么学习，怎么入门？

想知道吗？嘿嘿，我好累，喝口水把个妹，想知道，持续关注我帅帅的颜值，下回分解！



在最后，特别感谢，贺贺妹子（傻），辛苦整理提供一些资料和配图，让我的文章更加生动和有趣。我想她一定是被我的颜值折服了吧！



 

----------------------------------------------------------------------------------------------

 

web前端入坑系列：点击标题进入

第一篇： web 前端入坑第一篇：web前端到底是什么？有前途吗

第二篇： web前端入坑第二篇：web前端到底怎么学？干货资料！

第三篇：web前端 | 一条“不归路” -  学习路线！

 

 

入坑方式：   欢迎加入~！气氛热情，欢乐多，妹子多！

 

 

 扫描屏二维码或直接搜索，可以关注 我的前端公众号 ：前端你别闹

听说妹子挺多的，及时更新一些前端解惑和段子





 

hi，大家好！

我的第一篇文章：【web前端到底是什么？有前途吗？】，在我没想到如此 ‘HOT’ 的情况下 得到很多好评和有效传播。

也为我近期新开的 个人前端公众号：前端你别闹（webunao）

直接增加了几百粉（果然，帅的人大家都喜欢。）


被国内著名技术博客 CSDN 推上博客首页，并且经过我授权在其他公众号也转载了不少。

我觉得我这片入门文章可以小火，究其原因 有以下几点

web前端是如此的火热，关注度也逐年升高


由于前端开发的火热 和 一些IT巨头公司 对 web前端开发 人员的需求旺盛，让越来越多的孩子转入前端


前端开发领域 是it技术语言领域唯一一个 男女老少都可以快速入门并快速提升兴趣的领域（嘿嘿：妹子那绝对是最多的！）


我文风实在是太逗比了，我颜值实在是太帅了

![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE0MjIyNjQx?x-oss-process=image/format,png)

不知不觉，我废话又多了起来，段子手的天性就是改不了？
![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE0NDM4Nzg1?x-oss-process=image/format,png)
ok ,我们切入今天的正题 ：
web前端到底怎么学？
那么在讲 web前端怎么学 这个大命题之前呢，依据我本人的尿性，还是得先把你拉入坑，让你在坑里好好学 O(∩_∩)O
由于第一篇文章，有说到

O(∩_∩)O 好了，我们已经相识了，我们进入相知的阶段（我擦，太快了吧？）

web前端的历史渊源 和一些出处，童鞋们大概都有所了解了。
下面我们进入【相爱】阶段（我都不认识你，就tm相爱了？）
  歌词云：* 想说爱你不容易 *!    

但是我会想方设法让你爱上她（web前端开发）。
一般据我经验，在喜欢并且决定和她恋爱之前，我都会做一下充分准备和调查，有必要了解和研究清楚 ‘她’ 的几个特性和习惯

web前端的基本工作职责 和基础技能（要清楚）
web前端的分类和门派（简要概述，武林 实在是太大啦）
前端开发 必看的书籍资料（干货重点）

如果 你已经了解清楚以上前2点并思路清晰，那就直接 和她相爱吧-直接跳入 【前端开发 必看的书籍资料】
1.web前端的基本工作职责（要清楚）
“ 入一行，要先知一行 ”；我们来看看web前端开发职位 无论什么门派都要做到的一些基本工作职责。
首先，你必须是一个合格的“页面仔”，这个叫法不好听，但很生动；

我们都知道，所有呈现的内容都是基于HTML 网页的。

如果你的html、css（包括现在的HTML5+CSS3）基础不会，或者不够扎实，都很难在有大的进步，或者你的JS 很好，但布局基础不行，还是不能算合格的web前端。
其次，前端主要负责实现视觉和交互功能，以及与后端服务器通信，完成业务逻辑。现在前端的核心价值在于对用户体验的极致追求。

那么我们靠什么来提升用户体验和人性化操作，让用户觉得体验牛x、舒服呢？（当然细分厉害的公司，会有专门的 用户体验攻城狮）

当然是我们自始自终的主角 JavaScript了，毕竟它最初就是为浏览器而生的脚本语言。
然而，JS这门语言并不是一种强类型语言，更像是一种解释型语言，所以很多属性，在不同的浏览器环境解释有很大不同导致，效果和性能千差万别，而且很多属性之长，之多，之巨都很有工作量。
之后，就出现了Jquery 这种的框架神器，由于其好用，简单，效果多样，兼容完美，高效率等特性，迅速席卷全世界，所以如果想入门，jquery 这个东西你是逃不掉的，而且利用它简单的语法，你会很快将一些效果实现出来，迅速提升兴趣。
再后，既然涉及到视觉 和用户体验，那么UI 设计知识，你肯定要涉及或者懂一些设计方面的技能和基本素养，比如PS的一些基本操作，切图，和颜色值（比如会改个字，隐藏个图层，改个尺寸，变个颜色什么滴），屏幕适配方案等，讲道理说：平时并不需要我们做，但技能包里绝对要有。
最后，服务器知识+后端语言基础，这个职责和话题就比较hight了，到后面我们会一一解释。
总之，web前端同样是程序员，由于前端是位于后端程序和界面设计师之间的岗位，相当于中间桥梁，要完成三者的对接，涉及到广泛 的知识，规模大到工程级，也就有了前端工程师的说法（某人总结，很是到位）。
![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwNzA3NTUy?x-oss-process=image/format,png)
web前端工程师，是一个要精通本职html,css,javascript，也要了解后端编程，了解界面设计，了解软件工程的综合人才。
（卧擦！这才入门，web前端就这么多职能 和掌握的基本技能，不开森了 ，哼！）
哈哈，看到这一大篇的职责和技能，你并不要害怕，因为这些就像小孩子，会走路，会说话。

只要你有兴趣，只要有人领路，有教程自然而然就能掌握的技能，至于一些设计素养，反正你不是UI，有最好，没有又有什么所谓呢？
2.web前端的分类和门派（简要概述，武林 实在是太大啦）
根据web前端的细分工种 和 业务不同，我无耻的把她比拟出来几个门派，供大家参考，也让无比庞大的前端划分变得有趣一些，不然下面我放一张图， 你看了会晕菜。

这里我先简单说几种，我们常常熟知的几个门派

比如：

【少林派】：七十二般武艺样样精通 - web网站开发


【武当派】：以柔克刚 - 移动APP开发


【峨嵋派】：倾国倾城 - canvas 数据可视化


【华山派】：剑法精湛 -  nodejs开发


【逍遥派】：潇洒飘逸 -  HTML5游戏


让你晕菜的技能树 ，客观您感受一下先


由于web前端知识体系 实在是太庞大，这是另一个话题，三言两语是描述不清的，我们后面会专门开一个专题文章，来讲解和讨论这个话题。
![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE1NzA4NDkx?x-oss-process=image/format,png)
好累，我们赶紧去看干货
3.前端开发 必看的书籍资料（干货重点-入门篇）
一、 html + css 这部分建议在 w3school 在线教程 上学习，边学边练，每个属性后还有在线测试。 然后过一遍之后可以模仿一些网站做些页面。记住这个一定要多练 多练 多练 ，最重要的事儿 还得我说三遍？
二、 javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习一些基本语法 和定义。

然后你必须要看书，然后实践（好多人问 有没有快速捷径，我只能告诉你：如果有捷径，码农们就不用天天如此苦逼了吧）。

忍得住寂寞枯燥，才能拿得到高薪

对于习惯看视频学习的同学，以上内容也可以在 慕课网 这个在线学习网站上去搜，现在里面基础课程讲解都还不错。跟着敲一边，确实可以避免看书查资料的枯燥

下面多图预警，多书预警。
以下内容都是经过我自己本身的学习路线经验，还有网络各路大神共同整理的资料 汇总，帮助源源不断入坑的新人更好的学习。
前端书籍必读、必买（本帅认为）

★★ 越多，推荐等级越高，和难度无关。最好按照我给的顺序入门，这样不会让你枯燥，想放弃，如果先推荐经典的厚的，满篇定义，我估计是害你们放弃。
#【JavaScript】

先说 JavaScript,因为前面说了，css最好跟着视频练习，毕竟都是可视化的，像做艺术。

【第一本】《JavaScript DOM编程艺术》★★★★★

最好的JS入门书籍，最让人有兴趣读完的那种书。

它通过一个 幻灯片 案例，从头到尾教你实现出来，最后效果实现的同时，基本的JS常用属性，你也就滚瓜烂熟了，很有成就感。（个人很偏向这种风格书籍，此书让我彻底爱上前端js）

一目了然地告诉你如何用JS操作DOM（这是浏览器端编程的基本功），还灌输了最符合标准的编程理念。可惜有点老，最新一版是2010年的。不过不影响阅读和实现，全部按照最新ES5属性就行了。
【第二本】《JavaScript高级程序设计》 ★★★★

又称红宝书，（我喜欢叫 望眼镜）
雅虎首席前端架构师，YUI的作者Zakas出品。虽然书名带了“高级”二字，但是讲得都很基础的属性内容，事无巨细。
关键一点是翻译的也很到位，并不是如嚼蜡一般，这很重要。看此书，我建议配着下面的犀牛书一起 看效果更佳。

【第三本】《JavaScript权威指南》 ★★★★★

著名的淘宝前端团队翻译的，看译者列表都是一堆前期大神。

这本书又叫犀牛书，被国人誉为：javascript开发者的圣经。网上对此书评价很多很好，大概意思是说这			本书是一本JavaScript文档手册，更适合当作字典和备忘录查询来使用。

我也是对这本书有很厚的感情和依赖（忘了属性就拿来翻翻，总有收获），个人感觉这本书还是写得枯燥了些，毕竟是工具性质，不适合当作第一本入门来看，不过内容绝对是五颗星，无可挑剔！神书
【第四本】《JavaScript语言精粹》 ★★★★★

作者是大名鼎鼎的 【老道】，我的JS 偶像，我github第一个关注的就是这个大胡子叔叔。
他是 JSON格式的发明和维护者，也有很多著作和对JS 这门语言的超多贡献，可见此人功力绝对顶级！
这本书，属于稍微入门以后看的，了解了一些中高级概念 比如：闭包、原型链、作用域链、继承封装等以后，
看此书有如神助，看一页相当于犀牛书几十页的讲解（不吹牛逼，当时我是这感觉的）

【CSS】

【CSS】类， 如果视频看完了，练习的熟练了，你还需要一些书的推荐和查询，也是有必要的，我再来给你罗列几本经典的收藏书，买不买均可的。

【第一本】《Head first HTML&CSS》 ★★★

好的入门书。看两遍就对HTML & CSS 有个大概印象了。
此时把w3cschool作为备查手册收藏起来，结合此书，事半功倍，成就感爆棚。

【第二本】《CSS权威指南（第三版）》 ★★★★

最权威的CSS书籍，除了阅读W3C的文档外的不二选择（就是翻译太操蛋，可能有的词你以为是火星语，不过不影响阅读）。
有时间可以反复看，有css3内容，并当做字典随时查。类似犀牛书

【第三本】《图解CSS3：核心技术与案例实践》 ★★★

这本书讲解的是最新的CSS3（前几本书停留在CSS2.1时代，2.1是基础），CSS3也是必学的，不然真的跟不上时代了。
【第四本】《CSS禅意花园》 ★★★★

这本书很值得期待，我看过PDF版本的，那时候还没翻译出来，翻译的也一般，不过作者是巨牛逼的，听说对css理解的就像自己的左右手，光靠写CSS 他年薪就轻松百万了。。汗颜！思路清晰，图文并茂，还解决一些疑难杂症和高级技巧，类似于JS的语言精粹了，大神级别。
好了，差不多就推荐到这里，CSS这基本是基于情怀，罗列一下，买不买都没必要，想当年我学CSS 是挨着几个仅有的视频，一个属性一个属性的练习，还有IE6 各种兼容问题，虐到爆，那酸爽（现在你们是性福的，基本不用兼容IE6 这个老东西了，）。
真正起到决定作用的，还是JS语言的掌握和实践，JS能力越强 基础越稳固，你的前端能力就会越好， 自然薪资越高，所以现实点说大家，大家一起努力吧，让money 都到碗里来

（有些童鞋认为：从来不需要买纸质书，我全程PDF就行了嘛，不过我建议有些书还是要纸质的，这样有感觉，也可以做笔记，甚至随时当工具书字典来查询，由于前端的特殊性和js语言的属性之繁多庞杂，我建议你还是要买纸质的书。帮助很大，而且我告诉你有了钱要补上正版呃）
那么PDF截图奉上，嘿嘿 如果需要请到此大神网站 网盘下载，应有尽有，此处应该有掌声！
地址：http://www1.w3cfuns.com/feres.php?do=picture&listtype=book
![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwODAwMDA2?x-oss-process=image/format,png)
####本篇最后（我真的很累，原创很累的，所以我得结尾了，后一篇在介绍更多的干货）

我总结了部分一些知乎大神举荐的书评连接（微信不可外链，可查看我博客） 和我自己觉得要看的书，罗列如下，供君参考（嘿嘿！是不说我正经起来，很不习惯？）
★ 越多，难度越高。

CSS


CSS权威指南 （第3版）★★
精通CSS★★★
HTML & CSS设计与构建网站★


JavaScript


JavaScript & jQuery交互式Web前端开发★
JavaScript DOM编程艺术 （第2版）★
JavaScript高级程序设计（第3版）★★
锋利的jQuery★★
高性能JavaScript★★★
JavaScript语言精粹★★★
JavaScript权威指南★★★
编写可维护的JavaScript★★★
JAVASCRIPT语言精髓与编程实践★★★
Effective Javascript★★★
Secrets of the JavaScript Ninja★★★
JavaScript模式★★★
JavaScript设计模式★★★★
基于MVC的JavaScript Web富应用开发★★★


性能实践(不是本篇重点)


高性能网站建设指南★


这个文章花费了我不少时间整理收集，然而还是不到冰山一角，至少入门够用了，所以请看到的同学，尽心收藏并帮助传播，可以帮到更多的新人和疑惑中的转型的从业者，我将会非常高兴和欣慰，也将有更大的动力和精神来继续更新和贡献微薄之力。

有人问我：又没人给你钱，你何必这么辛苦，还得工作，还得写文章。然而我说我不在乎钱那是不可能的。
我还告诉你们，这真的是我的兴趣和责任，因为我经历了前端洪荒的年代和苦楚，所以我很愿意分享和帮助新来者，少走弯路和浪费时间。
到最后：兴趣都会变成钱！坚持下来就好。也希望大家支持

能在江湖混迹多年的，肯定不是靠工具和潮流。绝对是靠的不断提升的内功


希望大家明白，趁年轻 一定要忍住枯燥，打好基础!

在最后，特别感谢，贺贺妹子（傻），辛苦整理提供一些资料和配图，让我的文章更加生动和有趣。我想她一定是被我的颜值折服了吧！
![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwOTA2MzU2?x-oss-process=image/format,png)

入坑方式：   欢迎加入~！气氛热情，欢乐多，妹子多！


扫描屏二维码或直接搜索，可以关注 我的前端公众号 ： 前端你别闹

及时更新一些前端解惑和段子


如果未留言就转载，或者转载不署我名字的，你将会越来越丑！很准的呃

小白为大家收集了11个web前端开发，大企业实战项目案例+5W行源码！拿走玩去吧！

老规矩：转发+关注并私信小编：“资料”全部打包带走！

下面给大家简单介绍几个：

小米官网：



项目描述

首先选择小米官网为第一个实战案例，是因为刚开始入门，有个参考点，另外站点比较偏向目前的卡片式设计，实现常见效果。目的为学者练习编写小米官网，熟悉div+css布局。学习资料的话可以加下web前端开发学习裙：960加上508再加上920自己去群里下载下。

项目技术：

HTML+CSS+Div布局

迅雷官网：



项目描述

此站点特效较多，所以通过练习编写次站点，学生可以更多练习CSS3的新特性过渡与动画的实现，并且可以很好的练习div+css布局。

项目技术：

HTML5+CSS3新特性

音乐播放器：



项目描述

本项目为音乐类项目，主要实现音乐首页展示，今日推荐类别，歌曲列表，歌曲播放及歌手列表和搜索功能。主要练习Vue的基础应用和组件如何设计。项目如何构架与测试。通过本项目可以让学者更快的熟悉Vue框架的使用。并且熟练的构建整个项目需求的架构。

项目技术：

Vue+Flex+Vue-Router+Webpack+ES6

微信小程序：



项目描述

此阶段的内容为微信小程序开发，本阶段并非以基础知识点开始入手讲解，基于学者经历过以上的学习，在此时已经掌握项目框架，包含常见的一些实现规范，所以，这里我们将直接讲解项目，根据项目需求的效果使用微信小程序技术实现对应功能。

项目技术：

微信小程序

Love：



项目描述

这是一款为女性专门打造的App，推荐更好的产品，产品包含化妆用品，护理用品，穿戴用品。功能包含浏览，推荐，活动，购物车与购买功能

项目技术：

HTML+CSS+JavaScript+第三方框架

当然还有整套的web前端开发视频教程哦！



第一阶段：

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery：基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：HTTP服务和AJAX编程

WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。



第四阶段：面向对象进阶

面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：

继承性、多态性、封装性、接口。

设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：封装一个属于自己的框架

框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：模块化组件开发

面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：主流的流行框架

Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用库：

React.js、Vue.js、Zepto.js。

第八阶段：HTML5原生移动应用开发

Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战（创建项目，配置，编译，调试，部署发布）。

Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果（下拉刷新，上拉加载，侧滑导航，选项卡）。

React Native：

React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：

HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段： Node.js全栈开发：

快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。

Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

Node.js开发电子商务实战：

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。

一、什么是web前端？
web（互联网总称）：是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。用户在查找或浏览信息的时候，展现出图形化，用直观的界面方式表达出来。
前端：对于网站(页面)来说，有2部分，一个是网站的页面设计，用户的视觉效果等(美工完成)，第二个是网页的结构设计，对页面用代码的实现（web前端开发）。
二、什么是web前端开发？
是网页的结构设计，对网页用代码实现。
网页代码结构：HTML、CSS、JavaScript以及现在最新的HTML5、CSS3等。
三、网页结构分析！（需要掌握的基本技术）
1.HTML       “标签”相当于你建房子的“材料”砖头等。
2.CSS          “样式”相当于你要给你的房子设计、卧室、客厅、刷漆颜色、等，把这个房子建起来，再实现漂亮外观。
3.JavaScript “动态效果”相当于你给你的房子安装灯泡，点击打开灯，点击关掉灯（识别脸部开门、等）
四、从事工作
1.页面重构，也就是重新去写这个页面。（看情况定）
2.webAPP开发（移动)
3.响应式页面开发（手机与pc都能响应）
4.网页制作（只做pc）
5.微信页面开发（移动）
6.web游戏制作（移动与pc）
7.H5游戏、动画制作(pc与移动)
8.其他