货源分类

16货源网 > 餐饮行业新闻资讯 > 网站建设公司 > 零基础开始学 Web 前端开发，有什么建议吗？

零基础开始学 Web 前端开发，有什么建议吗？

发布时间：2019-09-15 04:33:10 来源：网友自行发布(如侵权请联系本站立刻删除）浏览：【大】【中】【小】

说说我从兴趣到现在想做技术走过的路, 期初迷于校内网剪贴板的神奇, 便开始学习html和css, 后来发现用了javascript可以让页面变得更酷并且能和服务器通讯, 在之后就解除了php的开发,

零基础开始学 Web 前端开发，有什么建议吗？说说我从兴趣到现在想做技术走过的路, 期初迷于校内网剪贴板的神奇, 便开始学习html和css, 后来发现用了javascript可以让页面变得更酷并且能和服务器通讯, 在之后就解除了php的开发, 可看的书籍不少, 如果是入门级的可以看国外的"html入门经典"之类的. 对于css, 多多研究那些设计精良的网站的代码, 比如cssplay等, 慢慢积累吧, 等到你回头时就会发现自己的层次不同了. 首先，任何技术实际都是从零基础开始的，不管是直接学习还是通过相近经历转行。所以不需要因零基础担心。
　　其次，一定要做好准备：一项技术的学习，意味着你各方面资源不同程度的消耗——时间、工具、资金，甚至融入相关交流圈子的准备。在这个准备过程中，最好是带有一个强硬的规划：“我要在一个月内达到能够实现XXX的水平”或者“我一定要在2周内把XXX项目完成”。如果没有这个规划，一般人都会越来越懒惰。
　　然后，选准一个或多个老师。这个老师，可以是一个页面，一本书，也可以是一个真实的人。对于前端这块来说，个人的理解是读十本书不如写一个页面，而我本人也是实实在在地硬着头皮一个标签一个标签google出来的。只有在实际去写的时候，才会出现各种问题，只有在凭自己的思考来解决这些问题的时候，才会得到非常深刻的印象，把相关知识真正转变为自己的。在这里多罗嗦一点，什么叫“选准”老师呢？我参考着去写的第一个页面，是某分类信息网站的首页，一个列表页，除了头尾之外，主体是多个庞杂的列表，并涉及各种布局，总体来讲应该算既不太难又有一些内容的。起手的这一步，如果选择的难度不合适，有可能会造成严重的阻力或者埋下排斥的阴影，学习过程一定要循序渐进。
　　另外，需要着重申明的一点：为什么我在第一句话就说“任何技术实际都是从零基础开始的”？因为我要表达的另一个意思是，无论什么时候，不要忘了在解决问题表象的同时，去推敲一下问题产生的基础，那些最不起眼的基本步。同样一个主导航，为什么有的人写出来非得用上三四层标签，有的人却只有两层甚至一层就搞定？这不光是几个字节的差异，甚至可能为了优化代码结构还需要多花一些时间，但有了这层差异，在整个大项目上反映出来的就是个人代码驾驭能力、页面执行效率、接口程序员的工作强度，甚至关系到SEO、模块结构等很多其他的相关面。BTW，有项目经验的童鞋应该对随时出现的各种“灵异现象”都不陌生吧，往往解决这些问题的关键，也在一些毫不起眼的基本步上，不是吗？
　　多写，多看，多谈，多搜，好刀都是煅出来的：）大家说了不少经验了，我推荐点书：http://uicss.cn/fed-book/ 找对一本靠谱的书，如果有靠谱的人能指引就更好

前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。
Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！
它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（PHP、http://ASP.NET，JSP、Python）等语言，前端开发工程师也需要掌握。

前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。
HTML 甚至不是一门语言，他仅仅是简单的标记语言！
CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。
Javascript 的基础部分相对来说不难，入手还算快。

也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。

Web前端技术有一些江湖气，知识点过于琐碎，技术价值观的博弈也难分伯仲，即全局的系统的知识结构并未成体系，这些因素也客观上影响了“正统“前端技术的沉淀！而且各种“奇技淫巧”被滥用，前端技术知识的传承也过于泛泛，新人难看清时局把握主次。因此，前端技术领域，为自己觅得一个靠谱的师兄，重要性要盖过项目、团队、公司、甚至薪水。

另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。
总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；
各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；
浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。
为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。

随着手持设备的迅猛发展，带动了 HTML5行业标准的快速发展。web领域的技术，大概有10年都没有大的更新了！
现在市场很需要优秀的、高级的前端工程师。
一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统；另一方面，大学里面没有这种课程，最最重要的是：北大青鸟这类培训机构也没有专门的前端工程师的培训课程！！

吴亮在《JavaScript 王者归来》第一张的序里面说：大多数程序员认为 Javascript 过于简陋，只适合一些网页上面花哨的表现，所以不愿花费精力去学习，或者以为不学习就能掌握。
实际上，一门语言是否脚本语言，往往是她的设计目标决定，简单与复杂并不是区分脚本语言和非脚本语言的标准。
事实上，在脚本语言里面，Javascript 属于相当复杂的一门语言，他的复杂度即使放在非脚本语言中来衡量，也是一门相当复杂的语言！
Javascript 的复杂度不逊色于 Perl 和 Python！

如何学习前端知识？

我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。

学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。
而学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！
如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。
如果你想当深入了解Javascript，你需要了解 Javascript 的原理，机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。
还需要深刻了解浏览器宿主下的 Javascript 的行为、特性。

因为历史原因，Javascript一直不被重视，有点像被收养的一般！所以他有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题。
作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。

那么一名优秀的、甚至卓越的前端开发工程师的具备什么条件？

首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度！做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。
在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。
现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。
Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

其次，优秀的Web前端开发工程师应该具备快速学习能力。Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。
对于一个高手来说，新技术不过是就技术的延伸。
再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。

1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。

2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。

3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。

4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。

Yahoo 公司，YUI 的开发工程师 Nicholas C. Zakas 认为：
前端工程师是计算机科学职业领域中最复杂的一个工种。绝大多数传统的编程思想已经不适用了，为了在多种平台中使用，多种技术都借鉴了大量软科学的知识和理念。成为优秀前端工程师所要具备的专业技术，涉及到广阔而复杂的领域，这些领域又会因为你最终必须服务的各方的介入而变得更加复杂。专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。

————————————

关于书籍：
HTML、CSS 类别书籍，都是大同小异，在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。
Javascript 的书籍推荐看老外写的，国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。

这里推荐几本 Javascript 书籍：

初级读物：
《JavaScript高级程序设计》：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。

《JavaScript王者归来》百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。
中级读物：
《JavaScript权威指南》：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。
《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。
《高性能JavaScript》：《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。
《Eloquent JavaScript》：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。
高级读物：
《JavaScript Patterns 》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。
《Pro.JavaScript.Design.Patterns》：Apress出版社讲解JavaScript设计模式的书，非常不错。
《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。
《Developing Large Web Applications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。

要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”。。。这些都要深入研究！

万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。
人们常说：不想当裁缝的司机，不是个好厨师。
如果单纯只是学习前端编程语言、而不懂后端编程语言（PHP、http://ASP.NET，JSP、Python），也不能算作是优秀的前端工程师。
在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。

以下这个答案可能和问题无关，但是能希望能帮到0基础的同学

之前参加Rails Girls时写的，旨在帮助想学做网站的同学们入门。
原文：http://www.douban.com/note/512945304/，欢迎建议
====================================
0基础怎样开始学习做网站？

目标读者：完全0基础的人，Rails Girls，想了解技术的同学，产品新人

大多数教学, 都太有条理了。先讲概念, HTML是什么，CSS是什么，HTTP请求是什么....但是一次性听到这么多陌生的概念，很容易晕的。过于抽象了，所以试着写一篇以例子为导向，而不是以概念为导向的介绍，来帮助大家入门Ruby on Rails

Ruby on Rails是做什么的？做网站的，你知道什么是网站（淘宝，知乎..），Rails能做这些，就行了

1. 网站->网页->按钮

我们要做的是什么？是网站，那么就直接以知乎为例好了

这样一个网站，是怎么和“代码”，Rails联系起来的呢?

这个太复杂了，我们不如只看他的首页（上图）

就拿这个页面来说，他是有3部分构成的，HTML,CSS,JS。不过这样说，依然没有什么用

我们只拿出其中的一个按钮，来解释这个概念

我应该怎么来写代码，来实现这个按钮？

这个时候，就要用到HTML了，代码如此：

< button class="sign-button submit" type="submit">注册知乎

写好以后，生成的就是按钮了（如图）

"靠，可是这也差得太远了吧？这两个怎么能是一个东西呢！！"，你可能会想

但是他的功能，是不是都是一样的呢？（就是点击）

这个时候，就用到CSS了。（不要在意代码具体什么意思，知道这是CSS就行了）

（至于JS，可以以后再说）

上面想说的就是，我们看到的网页，都是用HTML,CSS,JS写的：HTML来说明这个内容是什么，CSS来让这个内容变好看（How it looks）。这里说的是按钮，其实，网页上的所有这些文字，标题等等都是这样，都是HTML+CSS+JS写的，如下图的头像，链接等等

再举个例子，上面的指向某个问题的链接

纯粹的HTML，以及加上CSS来改变他的样子之后

小结一下，上面介绍了什么是HTML,CSS,(JS)

[如果有任何问题，可以直接提问]

2. 难道要重复写很多遍吗？

再看知乎里面的“发现”页面，一条一条的“回答”

这些“回答“的结构，都是相似的。那是不是，我们的代码就要这样一条一条的写下去呢...？

显然，这太麻烦了，所以要用到循环，也就是用编程语言（e.g. Ruby）来做 (e.g for loop )

或者，想根据用户登录/未登录的状态，来调整页面的内容

这里，知乎对于未登录的用户，会有登录的按钮；登录的用户，则显示消息，头像等等。这就用到了编程的东西（if else判断）

[if else, for loop，这些应该还能理解吧？]

3. 怎么实现注册功能？

上面，我们讲到了看到的网站是如何由代码构成的

不过，写到这里，你可能还在想，这不拖拖拽拽就行了吗？e.g. Dreamwaver, front page等软件

确实如此。

不过，我们怎么实现“用户注册”的功能呢？

这个时候，就不仅仅是”循环“、”判断“了。显然，这时候，要涉及到更多更为复杂的逻辑。这个时候，就要用到Rails了，我们要用他来实现——注册、登录的功能，发帖的功能，提问的功能，点赞的功能等等等。

所以，Rails（PHP, Python等等）就是用来实现这些“功能的”。这里不再举例子了，因为太复杂，只提几个问题，让大家思考一下，拿论坛发帖子来说：

我们怎么实现“创建”一个帖子的功能？又怎么“修改”，怎么“删除”？

这下，应该能感到这些功能的复杂了。不过，现在依然不用深究，只要知道Rails是用来处理这些复杂逻辑的东西，就行了（此外，我们有这么多用户的数据，帖子的数据，点赞的数据，就又牵扯到数据库了）。

4. 小结

到这里，我们主要介绍了：

(1) 什么是HTML + CSS +JS （显示网页）

(2) 什么是Ruby on Rails （复杂的逻辑功能）

前面的，就是我们所说的前端，后者，就是常称的后端

如果你下次还有疑问的话，不妨顺着这个思路理一理：

(1) “网页是由什么构成的？”

(2) “怎么实现注册的过程？”

(3) “网站上有这么多数据，怎么保存？”

“可是我想要设计一个很漂亮的网站诶.....”，那个是设计师做的

对于一个网页来说，设计师决定这个按钮的颜色，阴影，怎样才好看

而前端工程师（HTML CSS JS），来负责用代码实现这些东西（写具体的代码）

比如设计师说，希望这个按钮是蓝色的，那么工程师就根据这个要求写具体的代码：

button {color:blue}

对于小的创业团队来说，可能最开始就直接写代码做完了，不会有专职的设计师

5. 那么，我接下来该怎么学习Rails呢？

好了，写到这里，应该基本了解什么是Rails了（其实主要介绍的是前端），接下来的问题可能就是：那我应该怎么学会Rails，来自己做网站呢？

不过我先写这么多了，如果有足够的人需要的话，再继续写吧

注：原标题为Rails in Plain Language，即用浅显的语言，告诉准备学习Rails的同学们，Rails到底是什么。不过本文实际上并没有谈到Rails是什么，更多的写的是前端。因为大多数0基础的同学，并不理解这些，所以先了解一下，我觉得会有帮助。

前言
===============================
CSS入门比较简单，很适合零基础的人去学习。但是该从哪里开始呢？又该学到什么程度，学会了之后，又会能找到一份什么样的工作呢。

目录
===============================
一什么是CSS
二该学习哪些内容
三能胜任什么工作

四为什么不推荐去看视频
五究竟该怎么去学习
六遇到问题怎么交流
七下一步学什么
===============================

一什么是CSS？

CSS【层叠样式表】是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
但是对于新人来讲，更需要的是看懂这么一个流程图，论一个网站是怎么开发完成的，这样你才能了解通常程序员所说的CSS是什么。

解释一下每个名词的含义：

1.产品经理：每一个好的产品，都是产品经理在浴室里思考会议室上拍桌子说服大佬最后拿着枪指着程序员做出来的。这就是产品经理的职责，他们被认为是互联网的灵魂和发动机，理解用户痛点，给出解决方案，做出差异化的产品，能够快速迭代，可以合理分期并能够及时评估项目风险。产品经理就是负责把用户的需求，变成需求文档和原型和PPT和流程图。

当然，大多数程序员对于产品经理的形容只有两个字：SB

2.UI：UI是一个又能做产品又能做页面又能做交互的神奇物种，做UI是跟做前端的人打交道最多的职业，所以他们跟CSS一样，有时候都被简称是美工或切图的，有时候就是给合影照做PS的。UI就是把产品经理设计的原型图，上色变成好看的设计稿。也就是PSD文件。

当然，大多数程序员（特别是CSS）对于UI人员的形容只有三个字：像素眼

3.CSS：其实有时候CSS根本不算程序员啦，这也是为什么有时候UI会兼职做CSS的重要原因。也是CSS成为了最容易上手的IT职业。CSS就是负责把UI设计的图片(PSD)，变成Html网页,里面的数据全是假的。很多时候学会CSS就能找到一份IT行业的工作，但是并不能帮助你拿高薪。

当然，大多数程序员对于CSS人员的形容只有三个字：切页面的。

4.JS：JS入门的难度比CSS稍高一些，但也是所有真正程序员里比较简单的工种了。简单的JS程序员只是做点轮播，做点特效和动画，加个弹窗，做个验证。但是，现在呢，前后端分离的方式，前端架构概念的出现，Html5的普及，已经让前端成为了一个最重要和最热门的工种。

当然，大多数程序员对于JS人员的形容就是：我靠，你居然会写后端代码？

5.后端：后端其实才是神一样的存在，无论前端是有Apple还是IOS还是桌面客户端，永远少不了后端，后端要懂业务逻辑，要懂扩展，要懂备份和安全。但是后端是一个很吃年限，入门要求很高的职业。

当然，大多数产品经理对于后端人员的形容就是：马丹又延期了。

6.QA：QA归属于程序员，但是常常会被程序员孤立哈哈哈哈哈。因为QA就是专门挑错的人，如果你挑错挑的不严谨，Boss会骂你。如果你挑错挑的很认真，程序员会杀了你。你自己看着办吧。

当然，大多数程序员对于QA的形容就是：你是不会用吧。

7.OP：OP是比较奇葩的物种，跟各个程序员之间基本上没什么大的冲突，除非是到了发布的时间点。无数的OP都会经历过这样的事情，线上发布一次，马丹，有Bug，回滚或者是直接在线上改。改了半个小时，马丹，还是错，再继续改。这次先到了测试环境验证，好不容易验证通过了，再发到线上，又出问题了。马丹，程序员们继续改。

当然，大多数程序员最喜欢对OP说的一句话就是：大哥，睡了没？没睡再帮我发一个版本吧？

小结：CSS就是负责把UI设计的效果图变成静态网页，然后由后端或者是前端JS把静态网页中（假数据）变成动态网页（真数据）。简单说，不用理解太多产品需求，只要勾搭好UI妹子，做好浏览器兼容，做好自适应和响应式，代码写的别那么烂，有点通用性，就好啦。这就为一个月之内学会CSS，成为一个初级的CSS工程师，创造了前提条件。

二该学习哪些内容
===============================
先看一下这张图，不同的颜色代表着你需要了解到不同的程度。

简单来说呢，我对一个月的CSS工程师要求是：能独立完成自适应和响应式的项目，能会使用Bootstrap和Less。
你们觉得难么？可能大部分人都未必知道，什么是适应，什么是响应式，什么是Boostrap和Less。

好吧，这确实是有点难度，不过我大IT修真院的弟子可以在15天之内完成这个的。所以，其实还不算太难啦，难的还在于是编码规范。
这儿我把CSS初级工程师，需要会的内容，再整理成一个文字版的。

1.基础环境的配置：WebStorm/sublime,Svn/Git，Nginx/shell ，PS ，命名和规范。这些都是一开始就要会的了，只有一开始都先从简单的功能开始使用，然后每天巩固，每天在用，当一个月之后，你会发现根本就不用刻意去学，自然就会了。其中，WEBStorm是IDE，SVN是源码管理工具，Nginx是WEB服务器，Shell只需要会一些简单的脚本，PS是要你自己学会切图，命名和规范是格外的重要的。。这里每一个点都可以无限扩散，然而你并不需要会那么多，暂时来说，会用就行。

2.布局+样式：布局是最基础的操作，先抛开各种奇怪的控制的属性不谈，单说各种对齐和局中。这里其实是需要了解一些理论知识的（大概也是CSS里为数不多的理论知识之一），主要就是盒子模型，定位（标准流）（浮动）(相对，绝对)。用这些东西做出常见的居中，两列，三列，Header，Foot，侧边栏等。然后就是学习各种控件（简单的和复杂的）的样式，这里包括选择器，优先级等等。

3.自适应+响应式：可以这么说吧，从现在开始，表再做没有自适应的网页了，优先考虑响应式吧，跨屏时候已经来临。所以你要了解屏幕尺寸（Media），要懂长度单位（em,rem,百分比）

4.性能优化：一些简单的常识就够了。最少要学会雪碧图的制作。

5.框架：Bootstrap和Less，在学会以上4种的时候，已经可以自己搭建一个网站了~吃惊咩？然而还是需要学习一下Bootstrap，学会了解一下使用开源框架的感受，学习别人封装代码的思路，这是最重要的。
Less可以帮助你从另一个角度去思考，让你的代码更简洁。

好的，现在来简单总结一下，当我说，一个月之内成为一个CSS初级工程师的时候，就是指的你已经学会了以上的内容。这样你就能开始写一些项目了，在写项目的过程中，会加深很多细节的知识，CSS的知识就是繁琐的。
只有掌握了这些，你才能完成接下来的学习。

三能胜任什么工作
===============================

其实，刚刚已经说到一些了。初级的CSS工程师，在北京可以拿到4K~8K的薪水，能不能找到工作，取决于你能不能独立做出来项目的页面。能拿到多少薪水，取决于你会不会一些JS。
这样的水准啊。在北京找到份工作其实不难了，你每天的日常工作就是，从UI那里拿到图。然后切成静态页面，然后当后端的同学套页面的时候，去看看套的对不对。

跟着会做一些轮播图，做个小弹框之类的。如果你停止学习，你可能在这个水平上停留很长时间。哦，还有可能会懂一些浏览器的Hack。学会兼容IE的老版本。

四为什么不推荐去看视频
===============================
坦白的说呢，如果没有人教你，没有人带你，想要实现在一个月的时间里就学会这些，基本上是做不到的。
这也是我写这篇贴子的很重要的原因,这也是这篇贴子中最有价值的地方。
总的原则是：
1.永远永远不要去先看视频，先看书。
2.永远永远记着代码是写出来的，不是看出来的。
3.永远永远记着要有自己独立学习独立解决问题的能力。
4.永远永远记着不要说自己不会英语。
5.永远永远记着不要给自己没有时间找借口。
6.永远永远记着要学的知识有很多，找到一条正确的途径才可以。

好了。看完这些，也可能会跟你之前的认知有所不同。
但是，想想，你有没有遇到过这些问题。

1.不知道自己该学什么，从哪里入手。
2.视频看了很多，讲起来好像懂了，做起来完全又不会。
3.遇到了问题，根本找不到人解决。
那么我来解释一下，为什么我会让你们抛弃看视频，看教程，做测试题等各种奇怪的学习方式，转而投向更高效更快速的IT修真方式。

首先，技术是有体系的，但是又是非常零散的。
这些零散的小知识太多了，而且在实际使用中，你并不需要把所有的零散小知识都学会，那样太慢了，更何况，在做真实的项目中，根本用不到这些小知识。
用不到的东西很容易就会忘啊。所以这就是你看视频或者是教程之后，就算是懂了也会很快就忘记的原因。
怎么解决？多写多练，学习致用。

其次,做技术的要培养的是自我学习和解决问题的能力。这是看视频和看教程绝对没有办法教会你的。比如说，遇到了问题，该去找哪些关键词？百度的结果中，哪些常用网站的答案是可信的？哪些的方法根本就是错的？
请教别人的时候，如何能够快速准确的描述清楚自己的问题呢？
每个人都有自己的学习方式，都有自己无法理解的问题和困扰，这些只能靠真正的写代码去实践出来的。

再次，学习的氛围很重要，讨论交流，同学都在努力学习的氛围会让你不自然的向前走。
这同样是视频和教程很能给你培训的啊。没有人监督，没有人一起学，很容易被各种各样的琐事打断。

最后，做项目更看重的是编码规范，交流沟通，协作和进度支持。
这也是各种培训机构很难带给你们的。很多培训机构的老师都只会讲课，并不会做项目。

五该怎么去学习
===============================

说了这么多，该怎么去学习呢。别着急，容我仔细讲来。

1.要明白自己学习的目标是什么。
这里的学习目标，并不是成为一个CSS工程师之类的，也不是迎娶白富美什么的，而是一个明确的，专业的目标。
对于CSS工程师来讲，要进入公司就必须能够独立做项目，必须学会编码规划和协作，必须学会自适应和响应式，再学会Bootstrap来了解框架，最后是学习Less扩展视野。

记住了么，如果这些名词不太熟悉，不要害怕，学习都是有顺序的。但是，前提条件是，你必须明白，你会了这些，你才能够说自己算是CSS入门了，可以独立去找一份工作了。

2.要有明确的学习规划
从简到难，先学什么，后学什么，有人带和没人带的差别，就在于这里。
对于CSS来说，重新回过头来看看本篇贴子的第二节，这就是你的一个学习的规划。这就是你要学习的内容。

3.要不断的用代码去验证自己学习的成果
会和不会最直接的方式，就是你能不能做得出来，所以一定是你去做一个任务，然后这个任务呢，包括某种技能和知识点的训练（玩过游戏的都会比较熟悉这种方式），在做任务的时候遇到了问题，再去找人交流或者是请教师兄。
能直接写出来的代码，会让你有脚踏实地的感觉，不会心虚。
对于CSS来说，重新回过头来看看本篇贴子的第二节，这就是你的一个学习的规划。这就是你要学习的内容。

4.要学会自己去主动解决问题

之前提到过，自己主动解决问题的能力很重要，这是一个程序中的生涯中必不可少的解决问题的方式。所以从一开始就要培养自己在这方面的能力，而这个真的是一种能力。有的人能够快速找到问题的解决方案，有的人会被一个问题卡很久，每个人的情况都不一样，早点入手，早点找到更适合自己的方式。

5.要学会自己去和其他人交流请教
其实交流和请教别人，也不是一件简单的事儿，很多时候你并不能描述清楚你的问题。因为出现问题的原因总是千奇百怪，特别是每个人走的路子不一样，解决问题的方案也不一样。因些，最好的方式就是寻找那些刚刚解决过这些问题，比你早走一步的师兄，对他们来说，更乐意去帮助你解决掉这些问题，这也是强化记忆的一种方式。
学会寻找合适的人去请教，描述清楚又不能过多打扰对方，这也是一种能力的训练。还有，提前认识一些技术上的前辈，他们能给你们的指导和帮助，远远超出你的想像。（IT修真院就是提供这么一种途径）

6.每天都去总结反馈
不要给自己任何的理由去停止练习，哪怕你什么都没做，也要保持记录日报的习惯（IT修真院的论坛里有很多师兄写的日报，可以参考，也是我带IT修真院学员的时候，点评日报是和学员交流的最好方式），你可以发现，自己究竟学会了什么，又因为什么阻碍了自己的进度，在什么地方进步更快。
不断的反思和总结，会让你收益颇丰。

7.公开代码，接受交流
你是一个新人，所以没什么可羞涩的。把代码公开出来，把做出来的效果贴出来，这都是很好的交流方式和心态。

8.注重规范，注重合作，注重交流
在真实项目中，这比什么都重要，你会发现，当你和三个人一起合作的时候，因为Class命名不统一不规范产生冲突，因为三个人风格不一致导到项目后期维护困难，当需求发生变化的时候你发现自己写的代码简直无法改动，等等等等这些，在刚开始的时候就这么做，考虑代码的扩展性和可维护性，否则一旦你养成很多坏习惯，再纠正过来就很难了。

9.在需要的时候再去看视频和教程
在遇到一些关键的节点上，自己解决不了的问题的时候，再去翻阅视频和教程-我不确定你们是否明白这两种方式的差别，就是不要跟着教程和视频走，那样太慢，不要去做所谓的练习题，对你没有任何帮助。而是把教程和视频当成是词典，你只在需求的时候去查阅它，在自己积累到了一定的困惑的时候，再去梳理和总结。这是我从业近十年以来发现的最快的学习方式。

10.不要太贪心，什么都想学
严格按照任务序列去做，不要太纠结于细节，学会把不会的内容放一放，留在脑袋里一直让它困惑。保持足够的进度，当积攒到一定程度，你发现他成为你学习的瓶颈的时候，再去解决它。

否则你会就迷失到知识的海洋中，根本找不到方向。

11.学会最佳实践
在做CSS或者是其实的语言的时候，慢慢的你会发现，完成一份工作，总是有很多种方式，很多时候你会困惑，我究竟该用哪些方式好？这个在项目中，就叫做最佳实践，换句话说。最佳实践就是无数人走了无数的弯路，告诉你那么走是走不通的，按照正确的方法走是没问题的。

然而问题又来了，很多时候都会告诉你正确的路怎么走，但是为什么不能走其他的路，并没有人说。而且，也太多了。
因此我必须要认真的提醒你，先确定自己能用一种方式把问题解决，然后再去寻找更好的方式，这就是你的最佳实践。等以后有更好的办法解决问题的时候，再去改进自己的经验体系。

六遇到问题怎么交流

一般来说，遇到问题往往会有以下几种解决方案。
1.如果有之前的正确代码，回滚到正确的代码上，先确认是哪一行代码产生的问题。
2.确认你的运行环境，如果是CSS的话，确定是在哪个浏览器的哪个版本下出的问题。
3.打开F12，如果有报错信息，那么就直接百度报错信息，先试着理解一下报错的含义。
4.如果没有报错信息，用两到三个词来描述你的错误现象，查一下百度结果。用最快的速度判断出来哪些结果有用和没用。如果没用，更换关键词，通常你应该做到，在10秒钟之内至少切换两到三次关键词。
5.写清楚自己的环境很困惑的地方，像一个程序员一样的去问问题，比如说，为什么我的Nginx配置完正确的路径之后显示出来的仍然是默认的欢迎页面，并没有切换到我自己的Html页。而不是像个傻子一样说，有没有人会Nginx？为什么我的Nginx不能用？如果有截图，截上全屏的图，不要只截一小块，真的很烦只截一小块代码的没头没脑的图。
6.先整理问题，再去提问，不要随便遇到一个问题就各种去找人问，整理清楚自己的困惑，然后发给别人，等他们有时间的时候再回复。
7.查阅相关的资料，用最短的时间确定是否能解决自己的问题。不要迷失，不要一直看下去。有困惑一定要存疑，积累至少一到两天或者一周（看你困惑的是不是关键性的问题）。
8.多写不同的代码，多找已有的例子，公开自己的源码，找固定的学习伙伴，寻找比你刚好多学了一点点的师兄，而不是一定要找一些技术大牛，你遇到的问题，他很难领会到你的困境，因为离菜鸟困惑的时间点太远了。【我不得不强烈推荐IT修真院，去哪找这么好的学院找师兄？】

七下一步学什么

实际上，当你能通过IT修真院的15个Task，你就已经可以成为一个具有学习能力，了解CSS的整体趋势，能够独立完成一些项目的初级CSS工程师了。接下来就应该偏向于代码规范，JS，CSS3和Html5的内容。如果想了解更多，就关注IT修真院的微信公众账号，开始CSS中级工程师的修真之旅吧。

北京葡萄藤.IT修真院首页 | IT修真院
===============================
免费，快速，高效的帮助IT新人入门，加QQ群：185354188。微信公众号：葡萄藤IT技能树
好好学习天天向上

写作于2015.11

目前大四，暑假开始决定学习前端，学了三个月，目前在实习。算是入了门吧。就结合我自己的经历讲讲吧。

最开始是在慕课网，有个前端工程师的学习计划。参加那个计划，看看视频做做练习。学html和css时可以看看w3cschool，一些知识点比较基础比较全面。

学习javascript时，推荐看智能社的石川主讲javascript视频，讲的很不错。在网易云课堂上面有。书的话可以看看javascript dom编程艺术，很多人推荐的javascript语言精粹是好书，但不建议现在看。javascriot高级程序设计比较全面，也推荐买来看看，再推荐css权威指南，能减少很多次跳坑的可能。

接着看看jquery，看看html5，css3，bootstrap，应该就到了一个瓶颈了。准备一下就可以找实习了。

更新……

2016.3，已入职广州某大型游戏公司。

更新一下，还可以看下我的文章

我的前端成长回顾（置顶）前端进阶系列-目录

2018.5，已入职阿里巴巴，可以关注我的github，hpoenixf - Overview，偶尔会写一些文章（置顶）前端进阶系列-目录2018.5，已入职阿里巴巴，可以关注我的github，hpoenixf - Overview，偶尔会写一些文章

静态页面：HTML div css，CMS后台管理，可以独立完成静态页面制作。
动态页面：Javascript jquery Ajax 网页特效
移动页面：HTML5 css3新技术移动端+手机特效
高级框架：Bootstrap(起步全局CSS 组件插件实例实战进阶...)作者：张小河
链接：怎么学习前端开发？求推荐学习路线？？ - 张小河的回答
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

大家都是从小白走过来，每个人的轨迹不一样。冒昧说一下个人看法

自学
如果有耐心的话，可以看看w3cschool的教程w3school 在线教程
下面标红的地方，可以按照顺序看看。

but....
我知道多数人肯定没有耐心一个一个看下去，而且看完这些确实也比较累。
最主要的是，很多知识点不一定就在工作中比较频繁的运用到。一般来说，咱们前端工程师遇到不懂的小问题，通过查查手册也可以解决。

看学习视频
如果想比较直观的学习，其实看视频是一件比较快的方式。（我本人是这样的，喜欢看视频）
慕课网有比较多的免费视频可以入门前端开发_web前端开发

但缺点也比较明显，就是慕课网的体系不是按照一套完整的课程体系来的，多数是具体的案例拆解的。
再一个因为讲师比较多，这个是优点也是缺点。学生找到一个自己喜欢的讲师可能需要费点功夫。不过作为入门是足够了。

学习论坛
如果遇到不懂的问题可以去论坛提问，w3cfuns 前端网（W3Cfuns）是一个不错的地方，又很多朋友分享案例，替你解答问题。

大牛博客
还有一些大牛的博客可以关注下：
阮一峰阮一峰的网络日志
张鑫旭首页 ? 张鑫旭
大漠 w3cplus_引领web前沿，打造前端精品教程

上面都是很优秀的前端博客、建议题主可以好好看看。

关于报班
如果自学比较费劲，其实找一个培训机构倒也是一个好事。至少来说，培训机构总结整理了一套完善的课程体系，让学员学习起来比较系统。可以监督跟进学员的学习情况。包括一个学习氛围。
不过不得不承认现在的培训机构鱼龙混杂，需要学员擦亮眼睛。

再一个，请大家不要过度迷信培训机构，那些号称包就业、包学会的机构...多数都是骗人的。对，骗纸...（希望不要被拍砖）

我们都知道能不能学会一项技能，多数都是靠学生自己的努力。优秀的讲师，优秀的课程只是一个辅助作用。作为培训机构能做到不误人子弟，不传递错误的知识，如果再能有一些责任心，这样的机构就很不错了。

最后，附上一张学习图谱，给需要的朋友参考一下：

要成为一个优秀的前端工程师，需要什么技能和学习？答案：练习

在逛知乎、SegmentFault 又或者是相似的技术社区，我们总会看到类似的问题。新手总会关注于，需要怎样的技能，怎么才能入门？有一点经验的程序员则是，需要练习什么？如若一个程序员已经懂得问题的关键是，编程需要大量的练习。那么，我想这个程序员已经入了这个行道了。

在我成为所谓的『前端工程师』之前，我没有想到会变成这样的结果。

前端项目的练习过程

年少的时候，想要做的是 Kernel Hacker。大学时，我做点前端相关的兼职，顺便赚钱点钱。再用这点钱，买点硬件做一些底层、低级的编程，带着去实验室，拿着电洛铁，高喊着：让我们来做一个毁灭世界的机器人。好在，后来我离这个行当有点远，要不这个世界可能就岌岌可危了。反而因此倒是，学会了相当多的前端知识，以及在今天看来是屠龙之术的 IE 兼容。

随后，在研究数据可视化时，我看着用 JavaScript、HTML、CSS 可以做出这么炫的效果。我就继续回到图形编程这个行当，前端的图形编程倒也简单，只需要找一个库，多加练习就可以了。练习多了，便发现，需要更多的面向对象编程经验，要不写出来的代码就跟屎一样。要是在今天，那可能就是函数式编程经验了。

玩了那么多的东西后，我便就对这些东西驾轻就熟了。而在今天看来，仍然走了相当多的弯路。当有人再问我『怎样练习才能成为一个优秀的前端工程师』时，我便想着：我应该好好的回答一下这个问题。

Output is Input

我一直很喜欢那句，Output is Input 的话，即：

即，我们输出知识的时候，便是在输入更完整的知识。因此当我练习的时候，我便会刻意地去结合使用他们，往往能达到事半功倍的效果。想尝试玩一个新的框架时，我便会用这样的逻辑去玩它：使用新框架编写一个应用，再阅读、整理相应的资料。

你若问我，为什么我会这么练习？我想那大概是，我可以更早的得到反馈。我可以更早的知道，A 框架对于使用过 B 框架的人来说有些难度，我也能轻松地指出他们的差异。甚至，如果这是一个新的项目，那么我还能用一种『不很完美的姿势』完成之。而如果只是完成这个项目，那对于我而言也没有多少实质性的提高。

遗憾的是对于多数人来说，可能就只是完成项目这一程度，后面仍然还有好长的路要走。做一个好的前端工程师，即要做很多的项目，又要读一些书。即要会使用这个框架，又要知道他的一些基本的思想。

习惯了先输出、后输入的过程后，练习起来就很轻松了。

练习框架、技术的时机

练习，那可是相当烧时间的大事；时间，又是一种相宝贵的资源。暂不说，相当于好几年的十万小时理论。对于我们这些每天要早出晚归的工作族来说，八小时以外的时间就更小了。对于一个在校的计算机专业学生来说，也不一定能在四年里搞定。

而这时候如果又选择了一个错误的技术栈，哪怕是相当的浪费时间了。好在我们已经在那篇《学习前端只需要三个月【框架篇】》中讨论了如何选择一个合适的技术栈。此时还有一个问题是，如何在一个合适的时机练习它。

过去，习惯了将一些 Idea 放在 GitHub 上变成一个清单。也因此习惯了，将一些想要玩的框架放到了 TODO Lists 中，再慢慢地享受将他们完结的愉悦感。

当有一个新的框架出现时，看看知乎、微博、微信群里的讨论还不错，我就会将这个框架加到 Todo Lists。在一个周末，或者中午，搭建一下项目，玩一下 DEMO。

随后，这个框架就会进入评估期。评估一个框架可不是一件容易的事，要从不同的角度去了解它：社区欢迎程度、API 变化程度、Roadmap 计划、Release 情况等等。再确认一下框架是否可以适合当前的项目，可以的话，就会创建一个新的分支来玩玩，又或者直接引入项目。

如果这是一个有前景的框架，那么我就会选择一个合适的时机（有时间），创建一个开源来应用它。每个人都会有一些偏爱，这也决定了他们可能不会去玩某些框架，这倒是有些可惜了。

当我们决定去练习的时候，我们更需要一些练习的技巧。

练习的过程

练习框架、技术的技巧

练习嘛，我想就这么几步：

找到一个模板
边修改模板，边查阅资料，以此来完成一个应用
阅读官方文档或者代码来补漏
编写博客、文章、书籍来加强印象

我喜欢的就是这种输入和输出相结合的形式。一开始的时候，就应该先做一个应用。这种用意特别明显，借此可以快速地了解一个框架，就会觉得相当有成就感。随后就是去补缺补漏，以便于我们可以更好地完成应用。最后，当我们写文章去总结的时候，便会对这个框架有更基础的认识——像拥有一张清晰的思维导图，熟悉他的方方面面。

使用模板

对于多数的人而言，也包括我，决定去使用一个框架的时候，表明它已经是一个几近成熟的框架——我们可以很容易找到一些资料。依据现在框架的发展趋势，大部分的框架都会提供一个脚手架，即应用程序模拟。只需要运行这个模板，我们就可以有一个 hello,world。

如 Angular 官方提供了一个 angular-seed 的项目，它提供了一套基本的模板，可以用来快速的创建应用。而 React 也提供了一个名为 create-react-app 的工具来快速搭建环境。

遗憾的是，大部分的官方 hello,world 都不是很详细，这时候我们可以在 GitHub 上搜索 xxx starter kit 来做同样的事，如 React Starter Kit，就可以轻松地在 GitHub 上找到相就的项目，如react-slingshot

它提供了一些丰富的组合，如 React、Reactd Router、Redux、Babel、Jest、WebPack 等等的工具。现在，我们在这一步要做的事情就是运行起 hello,world。然后，我们再考虑下一步要做一些什么？

做点什么应用

拿到框架的下一个问题时，我们要去做什么，这个就相当有趣了。挑一个有难度的吧，做不了；挑一个简单的吧，觉得不能练手；还是挑一个实用的吧，比如博客。

我写过最多的应用就是与博客相关的应用了。当出现一个新的练手框架时，我总会用这个框架来把博客写一遍。于是，我的博客的后台 API 用 Node.js、Flask、Django 实现过一遍，而前台则用 Backbone、Angular 1、React 实现过一遍，而 APP 方面也使用 Ionic 1 和 React Native 实现过一遍。

对于博客而言，我们都很轻松它的功能：列表页、详情页、登录、创建博客等等。我通常只会实现上面的四个基本元素，这和大部分应用的主要模式差不多。对于前端来说，我们会练习到基本的内容：

GET 和 POST 数据
列表页到详情页的跳转和返回
对于用户登录凭据的获取和保存

基本上涉及到了一个框架的大部分内容，路由、模板、API 请求、数据存储、用户授权等等。这样一来，我们就要清楚地业务逻辑了，那么剩下的是都是技术的事。

编写一个博客应用

接下来，唯一的问题是：因为对这一系列的技术栈，我们会遇到一系列的困难。当一个新手选择 React 的时候，就会遇到 JSX ES6 Babel Webpack Redux React-Router 等一系列的 React 全家桶。这时，难以下手的主要原因是，不知道这些东西都是干嘛的，也对前端单应用应用没有一个清楚的认识。

在没有基础的情况下，直接下手这些会有一定的困难：在学习新的技术栈的同时，也在学习前端应用的组成。因此：

首先，要对前端单页面应用有一个大致的了解。如对于一个前端框架来说，它要有模板引擎、依赖管理、路由处理、控制器（模板）和状态等等，除此它还需要有构建工具、编译工具、测试框架等等。

然后，就需要了解所使用的工具对应的有什么功能。如上面说到的例子里，JSX 相当于是模板引擎、WebPack 是打包工具 / 构建工具、Babel 是 ES6 语言的编译器、Redux 用来做状态管理、React-Router 用来处理路由。

最后，需要一个应用的例子来将这些内容串在一起。如当我们打开一个 Web 应用的时候，应该要有一个路由处理的工具，来将用户导向相应的页面。而这个页面会有对应的控制器和模板，路由就是来分发用户的请求。当页面数据数据或者用户操作时，页面上的数据状态就会发生变化，这时就需要状态管理工具来管理。

幸运的是，我们已经有了一个 starter kit，在这个 starter kit 中会为我们做好相应的配置。因此，我们可以直接阅读代码来了解它们的关系，逐一的了解他们的功能。过程有点痛苦，结局便是大丰收。

这一个过程里，还有一个难点是，我们缺少数据。这时候，我们可以用 moco、MockServer 等工具来做一个假的服务器，以向我们的应用提供数据。

输入和总结

编写应用的时候，我们将一个又一个的内容放到了脑子里，然后发现自己混乱了。需要重新理清他们的关系，这时候可以选择写博客、画思维导图、做分享的形式来整理。

当我们向别人讲述一个东西的时候，就不得不压迫自己对此有更深入的了解，要不只能丢脸。这时候，我们又在重新学习这些内容，并且比以往的任何时间更加深入。这也就是为什么我喜欢写作的原因，它能让我的思路更加清晰。原本只是散落在房间里的书籍，现在整整齐齐的排列在了书架上。在需要的时候，我就可以找到想要的内容。而由于博客的存在，我可以在未来轻松地了解这个框架，别人需要的时候，也可以直接分享相应的经验。

等闲了，逛逛官方的文档，还会发现：原来这个地方可以这么用；原来某个地方还可以做得更好。

其它

假如，我们将前端和后台所要求的能力做一些对比，我们会发现前端在高级领域比后台简单一些。我的意思是，前端要在编程方面遇到瓶颈更快，并且需要从其他方面来补充，如后台，又或者是用户体验设计。

关于练手项目

在那一篇《关于编程，你的练习是不是有效的》中，我提到，提升技能的项目会有四种：

纯兴趣驱动的项目。即我的Idea列表上的一个个酷炫的项目，先满足自己再说。
理论驱动的项目。这一类的项目会比较少，因为我们需要牵强地驱动出这样的项目，然后以理论的方式驱动它。
兴趣结合理论型。有一个长长的Idea列表，难免有些时间会和将要学习的理论有很大的交集。这种的练习效果是最好的。
整合成文章、电子书。这一步主要是为了分享、巩固知识点、讨论。

最近在带一批学员零基础入门，我就每周把学习大纲（可以透露的那一部分）更新在这里吧。

前四节课的主要知识

命令行基础
vim 基础
HTTP 基础
用 Node.js 写简单命令行程序
用 Node.js 写简单服务器程序

推荐的书

《编码》

学员们表示虽然没讲语法就搞东西有点慌，不过做得挺有意思的。

基础保证讲，谁能把基础讲得比我好啊（这句话你就当真的听，哈哈）。

待续

想知道前端学习线路的请关注我。

小开为打算学习web的小伙伴们祭出一款“自制神器”——2017 最新 Web 开发者成长路线图

这是一位来自迪拜的 Kamran Ahmed 为他的一位老教授制作的图表，用来给学生授课交流。作者也将其放在了GitHub（ kamranahmedse/developer-roadmap）上，分享给所有开发者。

前端路线图

顺便附加一个后端路线图

DevOps 路线图尚在制作中，作者后续还将为每个路线添加相关资源，有兴趣的可以保持关注。

文章转载自【开源中国社区】：自制“神器”，2017 最新 Web 开发者成长路线图

学习不是目的，就业才是

web前端是最近才火的一个专业，遥想两年前，做前端的还是被亲切的称为“前端仔”，从事的是一些切图、布局、做浏览器兼容性等等不是那么有技术含量的工作，很多公司的前端甚至外包出去，“前端仔”一直生活在程序员鄙视链的最底层。

但随着Android和IOS混搭式（Hybird）开发的兴起，由于前端可以不经过应用商店上线，可以实时对更改功能，不像原生的那样必须经过应用商店漫长而繁琐的上线过程。所以，对Web前端开发的要求越来越高，需要美观、漂亮、加载速度快、迭代迅速。

同时又出现Nodejs等后端框架，让前端工程师也能做后端开发，因此前端工程师也能做全栈了，这对公司实在是一个大大的利好呀，我只需要招一个会JavaScript的人，就能把前后端一整套东西全给撸了，所以Web前端逐渐火爆了起来。

而后又出现了微信开发、微信小程序、H5开发等等，前端更迎来一个爆炸性的增长，所以，对前端工程师的需求会一直较大的缺口。

但别高兴的太早，嗅觉灵敏的培训机构早就发现了这一商机，所以他们迅速批量复制了大量“前端仔”，卓有成效的包装成有2-3年经验的人，推送给企业，导致如今企业谈培训机构而色变，只要发现你是培训机构出生，立马刷掉你。

所以，如今的前端是一个存在较大需求，但是对人才要求逐步提高的行业。

而且Web前端相对简单，是个入行的敲门砖，但也因为它入门简单，所以大多数人都停留在了一个初级的层次。

哪第一步该如何踏出呢？

比如我是一个纯小白，学校又不教具体的知识，如何来开始第一步的学习呢？

马上去图书馆找本书？还是找个视频教程开始看？

第一步：

1 模精品

编程是一门手艺，而手艺的话都是从模精品起家的，看书、看视频都用处不大，目前是一个信息过载的社会，如何能吸收信息并让信息沉淀下来，变成自己技能，是必然要通过手敲，必须通过艰难的bug过程，必须是通过实践。

我们可以把知识层级理解为 看过-> 做过 ->讲过

无论如何看、如何听，掌握程度不会超过30%，而只有你真正实践过，做过，才有可能会达到75%。看过了并没有什么卵用，而是要真正的动手，对照书本、视频敲一遍、两遍、然后不看资料，按照自己的思路或者想法再实现一遍，这样才能在脑海里留下足够的印象。

2 项目制-生长学习法

如果你像初中、高中、大学那样一个个知识点的来学编程，比如我先学HTML/CSS、再学Javascript......这种学习法其实是完全错误的！

知识是一个整体，而我们大脑对结构化信息才会有记忆能力，而从小的填鸭教育却将知识割裂开来，而这正是我们绝大多数人对学习感到痛苦，学不好的原因，这种学习法是完全错误的。

那什么是好的学习法呢？就如同动、植物生长一样，先把骨架搭起来，而后才是血肉，才是细胞，这样一来我们有一个具体的目标驱动，学习起来就会愉快的多，不会那么的辛苦。

所以你的学习绝不是 HTML:100% -> CSS:100% -> JavaScript:100%.....而应该是

Level1项目(HTML 10%+CSS10%) -> Level2项目( HTML 20%+ CSS20%+JavaScript 10%)......

这有至少2个好处：

1）大脑擅长的是结构化思维和形象化思维，而绝非死记硬背。以普通人看起来抽象晦涩的数学为例，法国数学家阿达玛统计了身边上百个数学家和物理学家如何做研究，只有极少数人用抽象的符号做推导，更多都是用类比和图像的方法在思考，而爱因斯坦更是坦言：他想象着自己在用手指触碰广义相对论里那些抽象的空间。

2）人的内在驱动力是情感，如果一件事有趣，是令人愉快的事物，那么情感会驱动自己学下去，反之，如果一件事枯燥无味、没有价值，则很容易放弃。学渣和学霸的区别，关键点并不是智力差别（虽然不排除这个影响），而是学霸是一种进入“喜欢学->刻苦学->学习成绩好->更喜欢学”的良性循环，而学渣是进入一种“不喜欢学->不认真学->学不明白->更不喜欢学”的恶性循环。

项目制确保了你的阶段性目标，可执行、可达到。以Web前端为例，你是用100%的精力学HTML，然后再用全部精力学CSS，学JS，学jQuery，然后做项目好呢？还是说我先学一些初级知识，直接做项目好呢？显然是做项目出来更有成就感啦，每天学哪些用不上的知识，大脑会产生本能的排斥。不止是编程了，其它比如数学、英语、化学，学这些到底有什么用呢？大多数人一生都不会用上，大脑本能会排斥，注定是一个异常反人性的过程。

百度前端技术学院提供了大量的项目，但其每期仅限50人，又没有代码审查，所以我自己撸了个站，上面有它所有的项目WEB前端项目大家可以做上面的项目啦。我们还建有一个社群：Web前端存自助学习群：370423482

3 先上车、再买票

躲进深山苦练半载，而后一举成名，这只是武侠小说上的童话。现实中永远是越早越好，“不要让孩子输在了起跑线上”，越早接触到实践，越早开始做真正的工程项目，越早收获经验，获得成功。先上车、再买票，越早工作越好，另可不拿工资，但也要能够进入这个行业。妄图躲在一旁，把整个知识结构学清楚了再出山，单纯的为了知识而学习，又不是应试教育的考试，全方位360度无死角考查你，这是不可取的。

4 泛读定方向，精读做执行

我要不要学框架？我学Vue呢，还是React，其实技术路线图都很多了，找一个最简单的就行，市面上的都流于简单，这里有一份最简版怎么学习前端开发？求推荐学习路线？ - 知乎

给自己定好方向，一个个项目节点的定好，然后按照项目开始撸，举个最简单的例子，我们在http://www.earnfish.com上维护有一个项目列表，如果你能撸完上面的所有项目，必定一定能找到一份工作。

5 针对性的刻意练习

有些人数十年的工作经验，只是同一个经验持续了十年而已。而刻意练习则是以专注的方式制订明确的目标，为达到那些目标制订一个计划，并且想出监测你的进步的方法。举个例子，就以上面小明为例，他的目标是CTO，那么CTO需要哪些技能呢？要会服务端编程，要带过团队，还要会前端编程...等等。如果作为一个前端开发人员，每天做一些前端页面，重复劳动，写上100年都只是初级开发。

公司基本上是不可能提供给你训练环境的，公司找人基本是最低标准：你现在的水平必定能胜任目前任务。你所做的，一定是自己已然擅长的事，这种事做上一百年可能都提高不大，如果想提高，需要另外去找一些“野食”，不仅搞定自己的一块，包括别人的，其它人的代码也可以钻研下嘛，而且如果外面有比较难的项目，也不妨接触下。通过刻意训练来提升自己的技能值，使自己能够胜任更艰难的任务。

看个真实的案例

小明童鞋就读于非著名院校的非热门专业，学习了一端时间后感觉本专业没有发展潜力，毕业没有未来，偶尔发现计算机不错，貌似挣钱多，于是就想在编程方面有所发展，而且发现Web前端比较简单，于是就把自己的目标定为Web前端。

他用了一个暑假，在网上找了个视频教程，然后对着视频教程敲，敲完之后达到能做基本网页的水平了，这时候水平还是非常渣的，但就是这渣的水平在同学面前都算牛的了，于是他按耐不住心中的渴望，出去投简历去了，海投了上百份简历，没想到还真被他找到了一家公司，这家公司是一家实施类的外包公司，主要业务是建站，而且是拿着比人的框架做，平时就改改静态页面就行了，工作量不大，所以对人才的要求是便宜，于是他就在建站公司干了几个月，页面做的越发熟练，倒也不是很忙，平时闲的时候就吹吹牛啥的。

有一天，班级上的老师找到他，“小明，听说你网站做的贼6，有个老总来我们找人创业，要不要去见识下呀？”。小明心想，老师推荐，在新公司又学不到啥新东西，去呗，就毅然从建站公司辞职，加入了创业公司。创业公司是特别锻炼人的地方，而且对人才的要求也没大公司那么看背景啥的，小明加入创业公司后不仅做前端代码，而且由于创业公司技术力量比较薄弱，技术上经常出bug，他也会看些后端的代码，跟后端一起整后端逻辑，几个月后后端代码也熟了，后来后端开发人员感觉创业公司没啥前途，就另谋高就去了，而小明即会前端也会后端，于是就担任了开发负责人这一岗位，负责前端后后端的代码开发。创业公司存活概率是很低的，很不幸小明的这个创业公司活的也不怎么好，艰难的撑了几年之后正式一命呜呼了，也只好去另谋生路。

他海投了一些简历，没想到反响还挺不错的，居然有大厂向他抛出了橄榄枝，于是他有幸进了某一大厂，由于资历比较浅，所以只好从比较初级的开发做起，但他毕竟是经过创业公司的洗礼，技术打的很是扎实，所以半年时间就做到了架构师的岗位，在大厂待了几年，感觉nb人太多，上升乏力，正好赶上创业浪潮，于是下海，到我们的非著名创业公司做技术负责人（CTO），这就是我们CTO的成长经历了。

模精品、上车、买票，这就是最佳实践了

顶! 就一个字

由于前端开发的火热和一些IT巨头公司对 web前端开发人员的需求旺盛，让越来越多的人转入前端。前端开发领域是IT技术语言领域唯一一个男女老少都可以快速入门并快速提升兴趣的领域，今天就来聊聊前端到底该怎么学~

话不多说，让我们直接进入今天的主题。web前端到底怎么学?一般据我经验，在喜欢并且决定和她恋爱之前，我都会做一下充分准备和调查，有必要了解和研究清楚 ‘她’的几个特性和习惯。

web前端的基本工作职责和基础技能(要清楚)

web前端的分类和门派(简要概述，武林实在是太大啦)。

前端开发必看的书籍资料(干货重点)。

如果你已经了解清楚以上前2点并思路清晰，那就跳到后面的 “前端开发 :必看的书籍资料 ” 。

web前端的基本工作职责

“入一行，要先知一行 ”;我们来看看Web前端开发职位无论什么门派都要做到的一些基本工作职责。

首先，你必须是一个合格的“页面仔”，这个叫法不好听，但很生动。

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

如果你的HTML、CSS(包括现在的HTML5+CSS3)基础不会，或者不够扎实，都很难在有大的进步，或者你的JS很好，但布局基础不行，还是不能算合格的web前端。

其次，前端主要负责实现视觉和交互功能，以及与后端服务器通信，完成业务逻辑。现在前端的核心价值在于对用户体验的极致追求。

那么我们靠什么来提升用户体验和人性化操作，让用户觉得体验牛x、舒服呢?(当然细分厉害的公司，会有专门的用户体验攻城狮)当然是我们自始自终的主角JavaScript了，毕竟它最初就是为浏览器而生的脚本语言。

然而，JS这门语言并不是一种强类型语言，更像是一种解释型语言，所以很多属性，在不同的浏览器环境解释有很大不同导致，效果和性能千差万别，而且很多属性之长，之多，之巨都很有工作量。

之后，就出现了jQuery这种的框架神器，由于其好用，简单，效果多样，兼容完美，高效率等特性，迅速席卷全世界，所以如果想入门，jQuery这个东西你是逃不掉的，而且利用它简单的语法，你会很快将一些效果实现出来，迅速提升兴趣。

再后，既然涉及到视觉和用户体验，那么UI设计知识，你肯定要涉及或者懂一些设计方面的技能和基本素养，比如PS的一些基本操作，切图，和颜色值(比如会改个字，隐藏个图层，改个尺寸，变个颜色什么滴)，屏幕适配方案等，讲道理说：平时并不需要我们做，但技能包里绝对要有。

最后，服务器知识+后端语言基础，这个职责和话题就比较hight了，到后面我们会一一解释。

总之，web前端同样是程序员，由于前端是位于后端程序和界面设计师之间的岗位，相当于中间桥梁，要完成三者的对接，涉及到广泛的知识，规模大到工程级，也就有了前端工程师的说法(某人总结，很是到位)。

Web前端工程师，是一个要精通本职HTML、CSS、JavaScript，也要了解后端编程，了解界面设计，了解软件工程的综合人才。

看到这一大篇的职责和技能，你也别害怕，因为这些就像小孩子，会走路，会说话。只要你有兴趣，只要有人领路，有教程自然而然就能掌握的技能，至于一些设计素养，反正你不是UI，有最好，没有又有什么所谓呢?

web前端的分类和门派

根据Web前端的细分工种和业务不同，我无耻的把她比拟出来几个门派，供大家参考，也让无比庞大的前端划分变得有趣一些，不然下面我放一张图，你看了会晕菜。

web前端的分类

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

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

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

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

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

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

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

Web前端知识体系实在是太庞大，先不感慨了，我们赶紧去看干货!

web前端开发：必看的书籍资料

HTML + CSS这部分建议在在线教程上学习，边学边练，每个属性后还有在线测试。然后过一遍之后可以模精品一些网站做些页面。记住这个一定要多练、多练、多练，最重要的事儿还得我说三遍?

JavaScript要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先通过在线教程学习一些基本语法和定义。

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

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

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

以下内容都是结合我自己的学习路线与经验，再整理汇总了网络各路大神的资料，希望能帮助源源不断入坑的新人更好的学习。

web前端书籍必读、必买

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

1 . JavaScript

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

《JavaScript DOM编程艺术》

★★★★★

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

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

一目了然地告诉你如何用JS操作DOM(这是浏览器端编程的基本功)，还灌输了最符合标准的编程理念。可惜有点老，最新一版是2010年的。不过不影响阅读和实现，全部按照最新ES5属性就行了。

《JavaScript高级程序设计》

★★★★

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

《JavaScript权威指南》

★★★★★

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

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

我也是对这本书有很厚的感情和依赖(忘了属性就拿来翻翻，总有收获)，个人感觉这本书还是写得枯燥了些，毕竟是工具性质，不适合当作第一本入门来看，不过内容绝对是五颗星，无可挑剔!神书

《JavaScript语言精粹》

★★★★★

作者是大名鼎鼎的【老道】，我的JS偶像，我github第一个关注的就是这个大胡子叔叔。他是 JSON格式的发明和维护者，也有很多著作和对JS这门语言的超多贡献，可见此人功力绝对顶级!

这本书，属于稍微入门以后看的，了解了一些中高级概念比如：闭包、原型链、作用域链、继承封装等以后，看此书有如神助，看一页相当于犀牛书几十页的讲解(不吹牛逼，当时我是这感觉的)

2 . 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语言的属性之繁多庞杂，我建议你还是要买纸质的书，帮助很大。

其他

再为大家奉上我手里整理出来的一些资料~

★越多，难度越高。

CSS

CSS权威指南 (第3版)★★

精通CSS ★★★

HTML & CSS设计与构建网站 ★

JavaScript

JavaScript & jQuery交互式Web前端开发 ★

JavaScript DOM编程艺术 (第2版)★

JavaScript高级程序设计(第3版)★★

锋利的jQuery ★★

高性能JavaScript ★★★

JavaScript语言精粹 ★★★

JavaScript权威指南 ★★★

编写可维护的JavaScript ★★★

推荐的书籍：

1. 《JavaScript高级程序设计（第3版）》

2. 《JavaScript权威指南（第6版）》

3. 《ES6标准入门（第3版）》

学习web前端建议，记住我的话会少走弯路：

第一步：HTML和CSS基础知识的学习：

HTML 甚至不是一门语言，他仅仅是简单的标记语言！CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。当然也可以找一些相关的视频看看，网上有很多百度一下可以找到一大堆。重要的事说三遍，一定要做大量的练习，大量的练习，大量的练习这是新手最容易忽略的部分，因为简单所有好多人不重视，结果到了工作中很多东西又不会，又重新去找资料学习很麻烦。

第二步：JavaScript基础的学习：

而学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。如果你想当深入了解Javascript，你需要了解 Javascript 的原理，机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。还需要深刻了解浏览器宿主下的 Javascript 的行为、特性。因为历史原因，Javascript一直不被重视，有点像被收养的一般！所以他有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题。作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。

第三步：移动端和一些前端常用框架的学习：

做移动端的开发，一定要学习HTML5常用标签和CSS3新的属性，比如，新增的属性选择器，序列选择器、层次选择器、背景尺寸、阴影、媒体查询等等。接下来就是一些主流框架的学习，react、Vue、Angular等。还有公司里面常用工具的学习，gulp 和grunt ,个人比较喜欢 gulp，简单粗暴。

当然还有很多东西需要学习，大家把上面这些东西搞懂了基本上找一份工作还是可以的。无论学习什么，开始的坚持是最难的，只要过了那个阶段后面的东西就简单多了，贵在坚持。

谢邀，回答这个问题我不会给你讲一些不切实际的定义或者前端历史，或者一些你看不懂听不懂的玄学，我之前做讲师的第一准则是：好好说话，说学生能听懂能有点儿收获的话。下面我来说下怎么零基础学习web前端。
1.先说一下学习完web前端之后能干什么
学完web前端之后你可以开发网页，做h5动画，做手机端app，可以做自己的博客网站，可以做微信公众号开发，可以开发小程序，可以结合nwjs做电脑客户端软件：比如微信的pc版，钉钉的pc版都是web前端来做的

2.怎么开始学习
两条路：自学或者找培训班，找培训班的话，我推荐达内和传智播客，在国内讲师质量都比较高。这块我们一点就过，我主要讲下怎么去自学。
对于自学最直接的方式就是看视频学习，可以是在线视频，比如慕课网，麦子学院，极客学院，北风网都有从入门到精通的前端课程，这些视频都差不多，随便选一套就行，入门课程都一样，不用纠结于选哪一个。
视频找好了之后，如果你不想中途放弃，或者，浪费太多时间又没效果的话。就找找一个引路人，引路人当然是能力越强越好，找引路人的目的在于为你制定学习计划，把控学习质量，及时纠正错误的学习方向，教你正确的学习方式。给你做心理辅导。为你及时打气持续性补充你的信心。
我之前接触和辅导过很多自学的学生，有成功的也有放弃的，放弃的那些同学基本都是输在错误的学习思路和心理迷茫期。听他们抱怨说：没有人去指导他们，每天学完就学完了，第二天接着学，但是东西太乱都串不起来，也都不知道是干嘛用的，尤其是js部分，这种问题完全可以把一个人摧毁！所以我一直对我的学生强调：有问题一定要去问，去解决，千万不要不懂装懂，弄明白了再往下走，人的心理是很脆弱的，一旦倒了可能就再也站不起来了。敬告各位新入行的同学，除非你之前有过编程经验，不然就找个引路人指导你。
3.列一个学习大纲
01.环境搭建
前端环境很好搭建，一个开发工具即可，webstorm，hbuilder，vscode，sublime。初学者建议sublime 也不要装插件，没有语法提示，可以打基础
02.html基础
带你去认识html，让你学习去运行html，等浏览器上面打开你的页面的时候，你会有很强的成就感，然后开始学习html的基础标签
03.css基础
html是勾勒，css是染色，基础的css学完你会有种想写页面的冲动，这时候你不用抑制住那种感觉，直接按照自己所想开写，这是你的第一个项目
04，js基础
js是页面的逻辑，作为一个web前端工程师，js是很核心的部分，也是很难的部分。js的学习之后放长一些，尤其是前一周，要让自己去熟悉那种语法环境，培养自己的开发思路，而且有一点就是学完一个星期的知识之后，及时和你的指引人沟通，看卡自己的理解是否有误，还有就是学习思路是否有问题，他会给你指出那些东西需要多学习，哪些不常用，还有就是给你点一下你学的这些在项目中会是怎么去应用，理论联系实际是最好的学习方式。
05.纯js操作dom和jquery
这阶段要知道怎么去用js来更改页面的元素，怎么去写dom事件，经过一番联系后，再引入jquery，不要本末倒置，有个同学学完jquery之后说发誓以后再不用原生js操作dom！然后被我狠狠骂了一顿
06，开始你的ui框架之旅
这个阶段我推荐从bootstrap开始，这个框架很经典，响应式的珊格系统被后来框架一直沿用，在我线下教学的那几年，我都会带着学生一起看bootstrap的源码，让他们学会这种设计思想，因为之后对他们太有用了，当时他们很痛苦，现在他们说起来觉得很受益，如果可以，你也要去看看源码，先学会去定制bootstrap，公司注重二次开发，定制 bootstrap正好可以练手。
07.开始深入css3
基础学完css3要提上日程，这时你会看到不一样的世界
08.深入js
这阶段你就要去解读原型链，原型替换，this指向，es6，es7的新语法，
09.学一套主流mv*框架
vue，react，angular2选一种，
我建议从vue开始，react的jsx语法不适合你入门去学习，angular2的typescript语法糖难度也比较高，vue学起来平滑些，结合vue，学一下vue-router，vuex，element ui，axios，webpack。做个项目玩一下这个全家桶
10.升级后台语言nodejs
这个不作要求，你在学vue的时候其实已经在用nodejs了，你用的npm就是nodejs的一部分，这个阶段说的是nodejs编程，比较难理解，毕竟是写服务器的东西，不过前面基础打牢固，让别人一点拨就能上手，技术不难，难在思路转换。
3.总结做项目
两个项目，
一个是侧重于css特效方面的，要求就是非常酷，帅到没朋友
第二个项目侧重逻辑处理，用来升华你的逻辑能力
这两个项目可以从网上搜几个网站来模精品，之前我的学生有做过：苹果官网，魅族官网，花瓣网，网易云音乐，在行等很多网站，做的也很不错。
4.面试技巧培养阶段
这个阶段要培养下公司项目的具体流程以及面试技巧的培养，面试回答思路，如果有同学想多了解这方面，我很乐意给大家讲解

整个思路就是这样，希望对大家有用，有问题可以随时私信我，我很愿意为大家辅导

基础如何，请点击:

吴战磊：20道面试题测下你前端基础如何

我自学找到的前端工作，大概三个月。现在入职一家公司，公司技术栈主要是vue，现在vue很火，建议把这个学好！

从工具说起，目前写前端主要使用 VS Code 编辑器 + 一系列插件。编程语言上每年紧跟最新的 ES 标准，并且墙裂推荐学习 TypeScript。

框架上，主要是 React 全家桶，Vue 全家桶，或者 Angular，要至少十分擅长其中之一。

入门 Web 前端开发主要分为三个阶段。

1. HTML + CSS

最开始先学 HTML 和 CSS，其实他们不算编程语言，只是标签符号和样式配置，你只需要有浏览器即可运行你写的 HTML 和 CSS。浏览器首推 Chrome，编辑器首推 VS Code。

这一部分入门比较简单，虽然 CSS 有很多的奇淫巧技，但是你没必要立刻把这些都弄懂，都记住。这里推荐 w3school 或者 MDN 作为学习资料。

W3school：http://www.w3school.com.cn/

MDN 官方教程：https://developer.mozilla.org/zh-CN/

W3C 官方文档：https://www.w3.org/

完成 HTML 和 CSS 的基础入门后，就开始深入学习 CSS 了。推荐：

《CSS权威指南（第3版）》。比较枯燥，像字典。你可以快速翻阅，属性细节不必记忆，用到的时候再查。着重点放在大局上，比如盒模型，浮动和定位这些，抓住重点快速过一遍。

《精通 CSS 第三版》这本书是经典CSS参考指南，自第1版出版至今一直畅销不衰。第3版针对当前浏览器支持度足够好的CSS特性全面改写，着眼于如何为更大、更复杂的网站编写优雅、巧妙、易维护的代码。

两位作者均是技术与写作才能俱佳的开发高手，他们将自己对现代CSS实践的深刻理解融入书中，结合大量复杂实现情景，清晰展示了如何利用新技术写出高度灵活、易维护和可扩展的代码，并让这些代码在不同浏览器和不同平台上跑起来。

接下来这部分我和高赞回答有同样的经历，在这引用一下：

原回答详见：https://www.zhihu.com/question/32314049/answer/100898227

学完上面的内容，你可以打开 Baidu IFE 2015 task 1 写静态页面学了几天HTML和CSS了，应该也有点成果了。打开IFE2015 task1，写个静态页面吧。我X，完全写不出来。这是正常的。去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者w3c，多尝试，不断踩坑才有进步。画完第一张图后，别着急往下写。你的代码肯定会有如下问题：胡乱的代码缩进毫无章法的属性顺序满页的div 不停地写id和class 重写吧，是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的，我最早看的是这一份，所以代码风格也一直维持到现在。再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。开始重写了，会发现功力大增，写代码速度也快了很多的。写到第三张页面的时候，应该比较熟练了。如果看到布局就大概知道应该怎么写了，那就可以进入 JavaScript 的学习了。

至于 CSS 进阶部分，你可以等以后回头再看：