一篇总结得超全的前端进阶文章！入门、技巧、方法、书籍、网站...一步到位！

结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。

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

学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作带来方便。

必备基础技能

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

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

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

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

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

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

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

基本开发工具

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

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

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

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

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

FQ工具：lantern, 壁虎漫步

学习方法和学习目标

方法：

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

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

阅读HTML，CSS，Javascript标准全面完善知识点。

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

善用搜索引擎。

目标：

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

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

入门之路

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

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

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

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

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

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

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

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

继续提高

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

Grunt：前端自动化工具，提高工作效率

less css：优秀的CSS预处理器

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

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

Node.js：JavaScript也可以做后台，前端工程师地位更上一步

AngularJS：做Single Page Application的好工具

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

Javascript内存管理：SPA长期运行需要注意内存泄露的问题

High Performance JavaScript(Build Faster Web Application Interfaces)

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

语言基础

JavaScript：

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

原型链、继承

NodeJS基础和常用API

CSS：

选择器

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

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

CSS 3，如animation、gradient、等等

HTML：

语义化标签

其他

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

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

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

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

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

本人是一个从事前端开发6年的程序员，在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流秋裙：六零三九八五九九三 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

入门书

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

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

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

《编写可维护的JavaScript》和：

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

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

《JavaScript异步编程》：理解JS异步的编程理念

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

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

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

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

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

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

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

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

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

一些不错的网站

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

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

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

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

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

static files：开放的CDN，很好用

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

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

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

JavaScript 秘密花园 JavaScript初学必看，非常不错

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

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

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

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

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

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

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

前端的定位

前端的定位关乎到你需要吸收什么样的知识和技能，决定在技术世界里你对什么需要格外敏感。如果你认为前端仅仅停留在切页面，实现交互和视觉的要求，那你对前端的认识还停留在初级阶段。阿里终面的时候我问了考官这么个问题：前端技术日新月异，范围越扩越宽，标准越来越丰富，似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位？考官给我分析了半天，然后总结成一句话，就是用户和网站的联结者，用户体验的创造者（原话不是这样，但大体是这个意思）。也就是说前端的终极目标其实就是创造用户体验，提升用户体验，以用户体验为中心。不管你是从交互设计上下手，还是从性能优化出发，或者改进工作流提升工作流效率，最终都是为了创造和提升用户体验，最终都要体现到用户体验这一点上来。我认为这个总结非常有道理（当然“用户体验”这个词太宽泛了，并且不仅仅是前端工程师的范畴，比如开发后台的时候对一个数据处理过程进行优化，提升了整体性能，这也是对用户体验的一个提升）。

现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题，比如前端自动化、图像编程、性能优化等等，再往后推一点就是PHP/JSP/ASP/nodeJs，过去后端模板一般属于后端的范畴，现在随着前端架构的演进，可能会让你去写后端模板的代码，需要用到后端语言（PHP/Java/C#等），这就是所谓大前端（然而这与前端的定位并不是相背离的，大前端处理的依然是与用户接触的部分，仍然是对用户体验的优化）。可能最常见或者被谈论最多的就是node，其实这几种技术选型都可以，bat三家据说百度用PHP比较多，阿里用node比较多。

以上是我对前端以及衍生出来的技术路线的一些浅薄理解，学习一个领域掌握它的整体上的走向和趋势还是挺重要的。

一篇总结得超全的前端进阶文章！入门、技巧、方法、书籍、网站...一步到位！相关推荐

CSS超全笔记（适合新手入门）
CSS CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等 ...
超全的PHP进阶知识点
目录前文基础知识 static关键字预定义常量引号区别字符串函数数组进阶函数进阶变量作用域类进阶 PHP超级全局变量文件处理文件属性获取目录操作正则表达式 phpstorm报错 ...
Android-技术的下半场，这里有份超全Android体系化进阶学习图谱
移动端真正进入下半场了吗?于我看来并没有,最多说"Android技术的探索"进入了下半场,而整个市场还是乐观的.以前是BAT的天下,而近两年出来越来越多的独角兽:头条.抖音.拼多多 ...
学霸大佬整理，超全 Python 学习路线图（附工具+视频+书籍+面试）
已经加小詹领取过的朋友,不需要重复领取哦! Python 有多火?据了解,Python 已经入驻小学生教材,未来不学 Python 不仅知识会脱节,可能与小朋友都没有了共同话题-- 不少读者总说想学 ...
超全的12种数组去重的方法
前言数组去重,可以说是一个比较常见的面试题,今天来盘点一下都有哪些方法可以实现数组去重. 方法1.双重for循环这是一个最笨的方法,双重循环. var arr = [1, 2, 3,4 ,5,6, ...
Java开发自学教程！这里有份超全Java体系化进阶学习图谱
二.面试题面:考你几个红黑树的知识点?? 红黑树的数据结构都用在哪些场景,有什么好处? 红黑树的时间复杂度是多少? 红黑树中插入新的节点时怎么保持平衡? 面:2-3树都是不没看,回去等消息吧! 三. ...
web前端网页设计作业_网页前端设计快速入门技巧
我最近收到部分在校学生的邮件,很多在临近毕业实习这段时间,面临着找工作,表示压力非常大,也不知道如何去选择,大多数都是处于迷茫期,问我怎么办?也有想学前端的,问我怎么才能够快速的入门? 先说我自己吧, ...
怎么样装修好阿里巴巴国际站产品边框进度条环绕围绕效果动态gif制作代码全屏展示图片首页装修技巧方法教程视频全球旺铺阿里旺铺自定义内容装修模板模块设置内容
如何运营好阿里巴巴国际站店铺呢,首先先要让自己店铺美观起来,好比如自己门店一样.需要装修起来才有更有吸引力或者让用户停留在页面当中. 阿里巴巴国际站装修代码产品首页产品边框进度条环绕围绕移动效果首页动 ...
前端开发从入门到进阶完全指南，不用再迷茫前端要怎么学啦！
我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域.每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题. 作为程序员, ...

一篇总结得超全的前端进阶文章！入门、技巧、方法、书籍、网站...一步到位！

一篇总结得超全的前端进阶文章！入门、技巧、方法、书籍、网站...一步到位！相关推荐

最新文章

热门文章