多同学想学习WEB前端开发，不过面对大量的前端学习资料(视频教程、网上教程、书籍)等，不知道从何处下手。

作为一个多年从事前端开发的程序员，为了让新手程序员少走点弯路，这里就分享腾讯前端大牛快速学习前端开发的经验：

一、前端学习思路

前端学习存在一个普遍的问题：感觉编程语言死气沉沉，代码枯燥乏味，很多人觉得学不下去，或者认为不好学。出现这样的情况，无非是学习编程的思路不对头!

首先来谈谈前端学习的思路。个人看来，前端的学习如果思路不对，你学习的过程会非常挣扎和痛苦，最后发现到头来学得一头雾水。

我的经验是，带着目的和解决问题的心态，以生活中的类比来学习编程，就非常有趣，也会变的不难。

前端学习大体分三个部分：html、css、javascript。首先应当用生活的类比熟悉这些概念。

比如学习html，你可以把它当做设计这房子的整体结构。头部(head)，中部(body)，底部(foot)就像是房子的屋顶，房间，地基。

学习css，就像是给房子做装修，墙壁刷成什么颜色，选择什么样的瓷砖装饰房间。

学习javascript，你可以把他当成是各种互动的开关控制，比如按某个按钮，可以控制电视开关换台，或者控制灯光。

二、有趣化的编程体验

对于一名前端开发的初学者而言，有趣的编程学习方式会让你更快掌握前端开发。因为有趣的方式意味着乐此不疲地学习。

入门阶段，我所使用的前端开发编程教程都是用w3cschool网站https://www.w3cschool.cn/。这主要也是我大学的计算机老师推荐的，因为w3cschool比较老牌，官方，注重实战，上面的课程非常适用于初学者。

在w3cschool网站上，除了有比较详细的讲解之外，还有大量的实例实战。

我的方法是，采用循序渐进的方式，比如对于“创建一个画布(Canvas)”，我会按照w3cschool官方网站提供的实例，将代码从头到尾敲一遍。因为编程最重要的就是动手能力!

前期为了入门，我主要还是学习了w3cschool网站上html、css、javascript这三套基础教程(现在在学进阶教程)，在这里要说明一点，一个问题没有弄懂不要跳着学下面的东西，不然你后面要填很多坑。

前期最主要还是循序渐进，将代码都过一遍，当你打下坚实的基础，对后面的面试也很有帮助。

当然，代码有时候敲累了，我玩玩w3cschool app前端的微课。微课采用了边学边练的模式，类似于游戏化闯关的模式，我只是把它当做游戏来玩，不停地刷副本。

个人比较喜欢上面的积分奖励，因为w3cschool官方做了一个积分排行榜，这可以激励我每天做大量的编程练习，查看积分排行榜是否出现我的名字。

另外，新手的前端程序员仍然需要积累一些感性经验，通过视听觉来理解前端知识，所以建议可以使用慕课网看一些前端的视频教程。

看视频要做两件事：其一是弄懂视频里所讲的每一个知识点，一遇到含糊不清的问题，直接记录下来。其二是用思维导图记录要点，不然你下次再看教学视频就得从头再来，整条视频播放。

三、视频课程推荐

在这里不得不提到慕课网的前端视频课程。就拿HTML+CSS基础视频课程来说，采用了通俗易懂的方式讲解了理论。视频课程主要浓缩了前端开发的一些重点以及一些核心的概念，我们直接去透彻理解并掌握核心概念，就相当于走了捷径。

四、谈谈面试那些问题

前端的学习经验大致就这些，由于基本功比较扎实，大学的导师让我跟他做一些项目，所以前端开发也积累了一些项目经验，一毕业也顺利拿到了offer。

而关于前端开发的面试，面试官主要会问很多技术细节，前端开发基础的问题。个人在没有拿到offer前，比较经常看w3cschool app名企的面试题(阿里巴巴、百度、腾讯、小米)，因为还是需要了解一些面试的间接经验。

开源代码也需要了解一些，不然面试官问你看过哪些代码你一脸茫然，这就很尴尬了!至于从哪里看开源代码，比较常用的是github。

最后，总结一下前端开发的学习经验：

1、以生活中的类比来学习编程

2、尽可能选择老牌的编程网站，第一次就学对;

3、有趣化的编程，玩w3cschool app微课;

4、可以通过慕课网、极客学院等通过视频补充学习;

5、准备面试前，多刷一些名企面试题，积累面试经验。

w3cschool app有需要下载的请前往苹果商店、各大安卓手机应用商城下载安装。

为现在web前端这个职业非常火，腾讯最近组织了一个大型web前端技术交流峰会，可见web前端这个职业是多么的火，其实这个不是最重要，重要的在五年之后，web前端发展前景是势不可挡的。但是我现在看到的问题是，大家看到web前端这个职业发展非常好，未来前景也是非常好，挣钱也是非常多，但是大家都忽略了一个东西，既然是这么好的职业，那么它一定没有那么容易让你胜任这个工作，我们都知道现在前端的竞争非常大，而这种竞争是在新手之中的竞争，在初级工程师、中级工程师、高级工程师是没有竞争的，很多人眼红前端工程师工资这么高，自己也想这样去拿高薪，但是大家不知道当初这些人在学习前端的时候是怎么学习的，才有今天，为了避免大家有这样错误的思想，我给大家下面几个建议：

一、在如今前端开发竞争这么激烈的时代，千万不要着急去找工作，尤其是不可相信那种速成四个月培训，然后去找工作的，大家不妨想一下，五年的速成和五年后的速成，找工作的性质能一样？五年的差距，最后还用同一个方法速成，你觉得工作好找吗？

二、现在的前端不是之前的网页制作，现在的前端更加高端，新手学习前端必须有一个学习规划，有一套系统的学习方案，这个方案的学习时间最好是半年，每天应该学习什么，心里应该有数，每个知识点应该做什么案例，而且要每天坚持学，一天都不可以停，一旦停了就不想学习了，所以说现在学习前端不是智商的问题，看谁可以慢慢的挺过去，韧性强。

三、要有人去指导，其实这个我好像谈了无数次，现在一个新手想要全部通过自己学习前端，并且找到工作，首先这种可能性非常的小，如果谁能单凭自己一个人的力量自学前端找到工作，那么这个人一定是一个人才，但是这种人只有1%，所以一定要有一个可以帮你解决小问题的人，不然会走很多弯路，得不偿失。

前端学习步骤如下：

一阶段：html+css+ps切图+ftp网站上传+html5标签+css3动画+手机端开发+swiper.js+iscroll.js

二阶段：js+jq+ajax+正则表达式+面向对象+js插件+github+sea.js+require.js+gulp

三阶段：2D+3D应用+touth+canvas+svg+本地储存+h5拖拽+highcharts+boorstrap

四阶段：node.js+vue.js+react.js

上述学习内容，如果你可以在半年之内全部掌握熟练，那么你的月薪在一线城市超过一万是非常可能的，但是这些内容没有那么好学，半年的时间如果认真应该差不多，具体的学习方法，学习效率可以随时问我，下面有我的web前端新手学习裙，随时都可以加我问题，希望新手少走点弯路，也有一些比较适合新手学习的视频免费分享。

样是web前端工程师，我们通常会发现他们的薪资待遇截然不同，web更注重的在于技术。

通过web培训出来的工程师，通常是中高级。自学的web工程师也有可能达到这样的水平，但是前提是必须系统化进行学习。那么初级web前端应该懂什么呢?

首先，Web工程师要入门必须要了解前端、后端、后台的基本概念，同时要了解基本的html、css和javascript语法，最后根据设计师的设计图在不考虑兼容性的情况下把页面做出来。

需要注意的是，入门阶段最关键的就是对所学内容形成一套概念,知其然知其所以然，不要管好那么多细节。

其次，你可以把html、css和javascript分成三个阶段进行学习。

第一阶段：HTML的学习

Html是超文本标记语言，英文全称为HyperText Mark-up Language，这是一个网页的骨架。静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。

当然，学习html过程是比较枯燥乏味的，所以你需要更有效的学习策略。依w3cschool看来，你可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，想必会比单纯记忆HTML标签和属性有趣、有用的多吧?

第二阶段：CSS的学习

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。

学习css建议可以看相关的一些书籍，如《CSS权威指南》(很详细、很经典!)、《CSS揭秘》 《精通CSS：高级Web标准解决方案》，博客和专栏等也可以浏览。

第三阶段：JavaScript的学习

JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，进而实现客户端的特效、验证、交互等。

建议可以看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕。如果是精华部分，我们在后续进阶部分可以深入研究，而如果是糟粕部分，那么只要大概看懂别人写的渣代码就可以，自己还是不要尝试为妙。

通过这三个阶段的学习，我们就可以往更高级的web前端工程师进阶了!

附Web前端工程师学习图:

更多编程技术，就来w3cschool。