起航学习网

今天小T要跟大家分享的文章是关于0基础新手如何学Web前端开发？结合个人经历总结的Web前端开发入门方法，总结从0基础到具备Web前端开发基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向新手，让新手少走弯路。

互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业Web前端开发工程师成为热门职业，各大公司对Web前端开发工程师的需求量都很大，要求也越来越高，优秀的Web前端开发工程师更是稀缺。个人感觉Web前端开发入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀Web前端开发工程师也只是时间问题。

学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。

不过随着互联网行业的发展，Web前端开发必然是Web开发人员需要学习的知识，有时候是没有专业Web前端开发工程师一起合作的，所以即使不做专门的Web前端开发工程师，掌握基本的Web前端开发技能为工作带来方便。下面我们就一起来看一看0基础如何学Web前端开发吧！

一、必备基础技能

以下是个人觉得入门阶段应该熟练掌握的基础技能：

§ HTML4，HTML5语法、标签、语义。

§ CSS2.1，CSS3规范，与HTML结合实现各种布局、效果。

§ Ecma-262定义的javascript的语言核心，原生客户端javascript，DOM操作，HTML5新增功能。

§ 一个成熟的客户端javascript库，推荐jquery。

§ 一门服务器端语言：如果有服务器端开发经验，使用已经会的语言即可，如果没有服务器端开发经验，熟悉Java开发可以选择Servlet，不熟悉的可以选PHP，能实现简单登陆注册功能就足够支持Web前端开发了，后续可能需要继续学习，最基本要求是实现简单的功能模拟。

在掌握以上基础技能之后，工作中遇到需要的技术也能快速学习。

二、基本开发工具

恰当的工具能有效提高学习效率，将重点放在知识本身，在出现问题时能快速定位并解决问题，以下是个人觉得必备的Web前端开发工具：

§ 文本编辑器：推荐Sublime Text，支持各种插件、主题、设置，使用方便

§ 浏览器：推荐Google Chrome，更新快，对Web前端开发各种标准提供了非常好的支持

§ 调试工具：推荐Chrome自带的Chrome develop tools，可以轻松查看DOM结构、样式，通过控制台输出调试信息，调试javascript，查看网络等

§ 辅助工具：PhotoShop编辑图片、取色，fireworks量尺寸，AlloyDesigner对比尺寸，以及前面的到的Chrome develop tools，

§ FQ工具：lantern, 壁虎漫步

三、学习方法和学习目标

方法：

§ 入门阶段反复阅读经典书籍的中文版，书籍中的每一个例子都动手实现并在浏览器中查看效果。

§ 在具备一定基础之后可以上网搜各种教程、demo，了解各种功能的实际用法和常见功能的实现方法。

§ 阅读HTML，CSS，Java开发script标准全面完善知识点。

§ 阅读Web前端开发牛人的博客、文章提升对知识的理解。

§ 善用搜索引擎。

目标：

§ 熟记前面知识点部分的重要概念，结合学习经历得到自己的理解。

§ 熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。。

四、入门之路

在整个学习过程中HTML CSS Java开发Script会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。

动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。以下是一些比较好的教程网址

可以搜索各大公司Web前端开发校招笔试面试题作为练习题或者他人总结的Web前端开发面试题还有个人总结的面试题(带参考答案)。

原生javascript是需要重点掌握的技能，在掌握原生javascript的基础上推荐熟练掌握jQuery，在实际工作中用处很大，这方面的书籍有《Learning jQuery》或者去jQuery官网。

建一个https://github.com/账号，保存平时学习中的各种代码和项目。

有了一定基础之后可以搭建一个个人博客，记录学习过程中遇到的问题和解决方法，方便自己查阅也为其他人提供了帮助。

经常实用Google搜索英文资料应该经常找到来自http://stackoverflow.com/的高质量答案，与到问题可以直接在这里搜索，如果有精力，注册一个账号为别人解答问题也能极大提高个人能力。

经典书籍熟读之后，可以打开前面必备基础技能部分的链接。认真读对应标准，全面掌握知识。

五、继续提高

有了前面的基础之后，Web前端开发基本算是入门了，这时候可能每个人心中都有了一些学习方向，如果还是没有。可以参考前面必备技能部分提到的那两个项目，从里面选一些进行发展学习。以下是一些不错的方面：

§ Grunt：Web前端开发自动化工具，提高工作效率

§ less css：优秀的CSS预处理器

§ bootstrap：优秀的CSS框架，对没有设计师的团队很不错，与less结合使用效果完美

§ requirejs：AMD规范的模块加载器，Web前端开发模块化趋势的必备工具

§ Node.js：Java开发Script也可以做后台，Web前端开发工程师地位更上一步

§ AngularJS：做Single Page Application的好工具

§ 移动端Web前端开发：智能手机的普及让移动端的流量正在逐步赶超PC端

§ Java开发script内存管理：SPA长期运行需要注意内存泄露的问题

§ High Performance Java开发Script(Build Faster Web Application Interfaces)

§ Best Practices for Speeding Up Your Web Site：重要技能

六、语言基础

Java开发Script：

作用域链、闭包、运行时上下文、this

原型链、继承

NodeJS基础和常用API

CSS：

选择器

浏览器兼容性及常见的hack处理

CSS布局的方式和原理(盒子模型、BFC、IFC等等)

CSS 3，如animation、gradient、等等

HTML：

语义化标签

其他

有些东西不是考敲码就能弄好的，我参与实习的时候感受到了很多，这些是我遇到的也是我感觉自己做的不好的地方

对于业务的思考：我个人这方面非常欠缺，所以放在最前面，在敲码前要多思考业务

交流和沟通能力：这个非常重要，Web前端开发同时需要与项目经理、产品、交互、后台打交道，沟通不善会导致很多无用功，延缓项目。

知识管理、时间管理：input和output的平衡，output是最好的input。如何做好分享，参与社区，做好交流，作好记录。

对新技术的渴望，以及敢于尝试。

七、入门书

入门可以通过啃书，但书本上的东西很多都已经过时了，在啃书的同时，也要持续关注技术的新动态。这里推几本我觉着不错的书：

《Java开发Script高级编程》：可以作为入门书籍，但同时也是高级书籍，可以快速吸收基础，等到提升再回来重新看

《Java开发Script权威指南》：不太适合入门，但是必备，不理解的地方就去查阅一下，很有帮助

《编写可维护的Java开发Script》和：

《Node.js开发指南》：不错的Nodejs入门书籍

《深入浅出Node.js》：Nodejs进阶书籍，必备

《Java开发Script异步编程》：理解JS异步的编程理念

《Java开发Script模式》和《Java开发Script设计模式》：Java开发Script的代码模式和设计模式，将开发思维转变到Java开发Script，非常好的书

《Java开发Script框架设计》：在用轮子同时，应当知道轮子是怎么转起来的，讲解很详细，从源码级别讲解框架的各个部分的实现，配合一个现有框架阅读，可以学到很多东西

《Dont make me think》：网页设计的理念，了解用户行为，非常不错

《CSS禅意花园》：经久不衰的一部著作，同样传递了网页设计中的理念以及设计中需要注意的问题

《高性能Java开发Script》和《高性能HTML5》：强调性能的书，其中不只是性能优化，还有很多原理层面的东西值得学习

《HTML5 Canvas核心技术》：我正在读的一本书，对于canvas的使用，动画的实现，以及动画框架的开发都非常有帮助

《HTTP权威指南》：HTTP协议相关必备，Web前端开发调试的时候也会经常涉及到其中的知识

《响应式Web设计》：技术本身不难，重要的是响应式网页的设计理念，以及移动先行的思想

《Java开发Script语言精粹》：老道的书，也是普及Java开发Script的开发思维的一本好书，非常适合入门

八、一些不错的网站

github：没啥好说的，多阅读别人的源码，多上传自己的源码，向世界各地的大牛学习

codepen：感受Web前端开发之美的必选之地，里面有很多酷炫的效果和优秀的插件

echojs：快速了解js新资讯的网站

stackoverflow和segmentfault：基本上各种问题都能在上面获得解答

google Web fundamentals：每篇文章都适合仔细阅读

static files：开放的CDN，很好用

iconfont：阿里的矢量图标库，非常不错，支持CDN而且支持项目

html5 rocks: 一个不错的网站，很多浏览器的新特性以及前沿的技术，都能在这上面找到文章

css tricks：如何活用CSS，以及了解CSS新特性，这里可以满足你

Java开发Script 秘密花园 Java开发Script初学必看，非常不错

w3cplus：一个Web前端开发学习的网站，里面的文章质量都挺不错的

node school：一个不错的node学习网站

learn git branch：一个git学习网站，交互很棒

Web前端开发乱炖：一个Web前端开发文章分享的社区，有很多优秀文章

正则表达式：一个正则表达式入门教程，非常值得一看

各路大牛的博客：这个太多了，就不贴了，知乎上有很全的

各种规范的官方网站，不懂得时候读规范

九、Web前端开发的定位

Web前端开发的定位关乎到你需要吸收什么样的知识和技能，决定在技术世界里你对什么需要格外敏感。如果你认为Web前端开发仅仅停留在切页面，实现交互和视觉的要求，那你对Web前端开发的认识还停留在初级阶段。

阿里终面的时候我问了考官这么个问题：Web前端开发技术日新月异，范围越扩越宽，标准越来越丰富，似乎任何一个触角都能伸出很远。怎么给Web前端开发一个合适的定位?考官给我分析了半天，然后总结成一句话，就是用户和网站的联结者，用户体验的创造者(原话不是这样，但大体是这个意思)。

也就是说Web前端开发的终极目标其实就是创造用户体验，提升用户体验，以用户体验为中心。不管你是从交互设计上下手，还是从性能优化出发，或者改进工作流提升工作流效率，最终都是为了创造和提升用户体验，最终都要体现到用户体验这一点上来。我认为这个总结非常有道理(当然“用户体验”这个词太宽泛了，并且不仅仅是Web前端开发工程师的范畴，比如开发后台的时候对一个数据处理过程进行优化，提升了整体性能，这也是对用户体验的一个提升)。

现在的Web前端开发工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题，比如Web前端开发自动化、图像编程、性能优化等等，再往后推一点就是PHP/JSP/ASP/nodeJs，过去后端模板一般属于后端的范畴，现在随着Web前端开发架构的演进，可能会让你去写后端模板的代码，需要用到后端语言(PHP/Java开发/C#等)，这就是所谓大Web前端开发(然而这与Web前端开发的定位并不是相背离的，大Web前端开发处理的依然是与用户接触的部分，仍然是对用户体验的优化)。

可能最常见或者被谈论最多的就是node，其实这几种技术选型都可以，bat三家据说百度用PHP比较多，阿里用node比较多。

以上就是小T今天为大家分享的关于0基础新手如何学Web前端开发的文章，希望本篇文章能够对正在从事Web前端开发工作的小伙伴们有所帮助。想要了解更多Web前端开发相关知识记得关注IT培训网Web培训官网。最后祝愿小伙伴们顺利学成Web前端开发技术，成为一名优秀的Web前端开发工程师！

转载自：https://github.com/qiu-deqing/FE-learning，部分内容有删减。

【免责声明：部分网站内容转载网络，部分内容由会员所发，如有侵权，请先查看是否是自己所发，如不是，之后联系本站客服删除。】

文章出自：http://qh.itpxw.cn/peixun/web/202185484.html

文章标题：0基础新手如何学Web前端开发？从小白到Web前端开发大神的晋级之路!



免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉

(责任编辑：深圳学历教育网)