结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能

结合个人经验总结的前端入门方法，总结从零基础到基础前端技能的道路、学习方法和资料。由于能力有限前端自动化是什么意思，不能保证包罗万象。仅供初学者参考，让初学者少走弯路。

随着互联网的飞速发展和激烈的竞争，用户体验已经成为一个重要的关注点，导致专业的前端工程师成为热门职业。各大公司对前端工程师的需求量很大，而且要求也越来越高。优秀的前端工程师更是稀缺。个人感觉前端入门还是比较容易的，但也需要系统仔细的研究。打好基础后，成为优秀的前端工程师只是时间问题。

学习任何知识最重要的是兴趣。如果学习一段时间后不喜欢，强迫自己学习可能会很痛苦前端自动化是什么意思，效果也不会好。毕竟，这很可能是未来许多年的生存技能。但是随着互联网行业的发展，前端肯定是web开发者需要学习的知识，而且有时候也没有专业的前端工程师配合，所以就算不做专门的前端- 前端工程师，掌握基本的前端技能会给你的工作带来方便。

基本基本技能

以下是我认为在起步阶段应该掌握的基本技能：

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

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

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

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

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

掌握了以上基本技能后，可以快速学习到工作中需要的技能。

基本开发工具

合适的工具可以有效提高学习效率，关注知识本身，在出现问题时快速定位和解决问题。以下是我个人认为必要的前端开发工具：

文本编辑器：推荐Sublime Text，支持各种插件、主题、设置，简单易用

浏览器：推荐谷歌浏览器，更新快，对各种前端标准的支持非常好

调试工具：推荐使用Chrome自带的Chrome开发工具，可以方便的查看DOM结构和样式，通过控制台输出调试信息，调试javascript，查看网络等。

辅助工具：PhotoShop编辑图片、取色、烟花大小、AlloyDesigner对比大小，以及之前的Chrome开发工具，

FQ工具：灯笼、壁虎行走

老码农多年发展受益：网页制作、网站开发、网页前端开发，HTML+CSS+JavaScript从最基础开始。jQuery、Ajax、node、Angular框架等都整理到了手机小程序项目实战【视频+工具+电子书+系统路线图】，有需要的小伙伴可以私信我，发“前台- end” 并等待3秒获取地址，给所有对编程感兴趣的人

学习方法和学习目标

方法：

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

有了一定的基础后，可以在网上搜索各种教程和demo，了解各种功能的实际使用方法和常用功能的实现方法。

阅读HTML、CSS、Javascript标准，全面提升知识点。

阅读前端牛人的博客和文章，提高对知识的理解。

善用搜索引擎。

目标：

记住前面知识点中的重要概念，根据自己的学习经验得到自己的理解。

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

入门

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

动手是学习的重要组成部分。书籍侧重于解释知识点，例子可能不够充分。这就需要借助搜索引擎找到一些简单的教程，根据教程实现功能。这里有一些很好的教程网址

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

Native javascript是一项需要掌握的技能。在掌握原生javascript的基础上，建议精通jQuery，在实际工作中非常有用。这方面的书籍包括《学习jQuery》或者去jQuery的官网。

创建一个帐户并保存您平时学习中的各种代码和项目。

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

如果你经常使用谷歌搜索英文资料，你应该经常从中找到高质量的答案。如果遇到问题，可以直接在这里搜索。如果你有精力，注册一个账号为别人答疑解惑，也可以大大提升你的个人能力。

在熟悉了经典书籍之后，您可以打开上面所需基本技能部分的链接。仔细阅读相应标准，全面掌握知识。

继续改进

有了前面的基础，前端基本算是入门了。这个时候，大家心里可能有一些学习方向，如果没有的话。您可以参考上面必备技能部分中提到的两项，并从中选择一些进行开发性学习。以下是一些不错的方面：

Grunt：提高生产力的前端自动化工具

less css：优秀的 CSS 预处理器

bootstrap：优秀的 CSS 框架，非常适合没有设计师的团队，用更少的东西完美地工作

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

Node.js：后台也可以使用JavaScript，前端工程师地位更高

AngularJS：单页应用的好工具

移动端网页开发：智能手机的普及让移动端流量逐渐赶超PC端

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

高性能 JavaScript（构建更快的 Web 应用程序接口）

加快网站速度的最佳实践：重要技能

语言基础

JavaScript：

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

原型链，继承

NodeJS 基础知识和常用 API

CSS：

选择器

浏览器兼容性和常见的黑客攻击

CSS 布局如何以及如何工作（盒子模型、BFC、IFC 等）

CSS 3，如动画、渐变等。

HTML：

语义标签

其他

有些事情不能通过打字测试来完成。参加实习的时候感触良多。这些是我遇到的，也是我觉得自己做得不好的。

思考业务：这方面我很欠缺，所以放在最上面，打字前多思考业务

沟通和沟通技巧：这很重要。前端需要同时处理项目经理、产品、交互和后端。沟通不畅会导致大量无用的工作，延误项目。

知识管理、时间管理：输入与输出的平衡，输出是最好的输入。如何分享、参与社区、良好沟通、保存记录。

渴望新技术，敢于尝试。

介绍书

你可以从看书开始，但是书上的很多东西已经过时了。在看书的同时，一定要不断关注科技的新动向。以下是我认为不错的几本书：

《JavaScript高级编程》：可以作为入门书，但也是进阶书，可以快速吸收基础知识，等你提高后再回来阅读

《JavaScript权威指南》：不适合入门，但有必要。不明白的可以看看，很有帮助

“编写可维护的 JavaScript”和：

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

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

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

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

《JavaScript 框架设计》：在使用轮子的过程中，你应该知道轮子是如何转动的。解释非常详细。从源码层面讲解框架各部分的实现。使用现有框架阅读时，您可以学到很多东西。

《Dont make me think》：网页设计的概念，理解用户行为，很好

《CSS Zen Garden》：一本经久不衰的书，也传达了网页设计中的概念和设计中需要注意的问题

《高性能JavaScript》和《高性能HTML5》：强调性能的书籍，不仅是性能优化，还有很多值得学习的原则

《HTML5 Canvas核心技术》：正在看的一本书，对canvas的使用、动画的实现、动画框架的开发很有帮助

《HTTP权威指南》：HTTP协议必备，前端开发调试经常涉及

《响应式网页设计》：技术本身并不难，重要的是响应式网页的设计理念和移动优先的理念

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

一些不错的网站

github：没什么好说的，多看别人的源码，多上传自己的源码，向全世界的大牛学习

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

echojs：快速了解js新信息的网站

stackoverflow和segmentfault：基本上各种问题都可以在上面回答

谷歌网络基础：每篇文章都值得一读

静态文件：开放CDN，使用方便

iconfont：阿里的矢量图标库，很不错，支持CDN，支持项目

html5 Rocks：一个不错的网站，很多新的浏览器功能和前沿技术，你可以在这里找到文章

CSS技巧：如何使用CSS，了解CSS的新特性，这里可以满足你

JavaScript 秘密花园 JavaScript 初学者必看，很不错

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

节点学校：一个不错的节点学习网站

learn git branch：一个交互性很强的git学习网站

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

正则表达式：正则表达式的入门教程，值得一看

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

各种规格的官网，不知道什么时候看规格

前端定位

前端的定位关系到你需要吸收什么样的知识和技能，决定了你在技术世界中需要对什么格外敏感。如果你认为前端只停留在切页，满足交互和视觉的要求，那么你对前端的理解还处于起步阶段。在阿里面试的最后，我问考官这样一个问题：前端技术日新月异，范围越来越广，标准越来越丰富。似乎任何触手都可以伸到很远的地方。如何给前端一个合适的定位？考官给我分析了半天，然后总结成一句话，就是用户和网站的链接器，用户体验的创造者（原话不是这样的，但大体上是这个意思）。也就是说，前端的终极目标是创造用户体验，提升用户体验，以用户体验为中心。无论是从交互设计入手，还是从性能优化入手，还是改进工作流提高工作流效率，归根结底都是为了创造和提升用户体验，最终还要体现在用户体验上。我觉得这个总结很合理（当然，“用户体验”这个词太宽泛了，也不仅仅属于前端工程师的范畴。比如在开发后端的时候优化一个数据处理流程，提升了整体性能，这也有利于用户体验的提升）。但通常是这个意思）。也就是说，前端的终极目标是创造用户体验，提升用户体验，以用户体验为中心。无论是从交互设计入手，还是从性能优化入手，还是改进工作流提高工作流效率，归根结底都是为了创造和提升用户体验，最终还要体现在用户体验上。我觉得这个总结很合理（当然，“用户体验”这个词太宽泛了，而且不仅仅属于前端工程师的范畴。比如在开发后端的时候优化一个数据处理流程，提升了整体性能，这也有利于用户体验的提升）。但通常是这个意思）。也就是说，前端的终极目标是创造用户体验，提升用户体验，以用户体验为中心。无论是从交互设计入手，还是从性能优化入手，还是改进工作流提高工作流效率，归根结底都是为了创造和提升用户体验，最终还要体现在用户体验上。我觉得这个总结很合理（当然，“用户体验”这个词太宽泛了，也不仅仅属于前端工程师的范畴。比如在开发后端的时候优化一个数据处理流程，提升了整体性能，这也有利于用户体验的提升）。前端的终极目标是创造用户体验，提升用户体验，以用户体验为中心。无论是从交互设计入手，还是从性能优化入手，还是改进工作流提高工作流效率，归根结底都是为了创造和提升用户体验，最终还要体现在用户体验上。我觉得这个总结很合理（当然，“用户体验”这个词太宽泛了，也不仅仅属于前端工程师的范畴。比如在开发后端的时候优化一个数据处理流程，提升了整体性能，这也有利于用户体验的提升）。前端的终极目标是创造用户体验，提升用户体验，以用户体验为中心。无论是从交互设计入手，还是从性能优化入手，还是改进工作流提高工作流效率，归根结底都是为了创造和提升用户体验，最终还要体现在用户体验上。我觉得这个总结很合理（当然，“用户体验”这个词太宽泛了，也不仅仅属于前端工程师的范畴。比如在开发后端的时候优化一个数据处理流程，提升了整体性能，这也有利于用户体验的提升）。或者改进工作流来提高工作流效率，归根结底是创造和改善用户体验，最终要体现在用户体验上。我觉得这个总结很合理（当然，“用户体验”这个词太宽泛了，也不仅仅属于前端工程师的范畴。比如在开发后端的时候优化一个数据处理流程，提升了整体性能，这也有利于用户体验的提升）。或者改进工作流来提高工作流效率，归根结底是创造和改善用户体验，最终要体现在用户体验上。我觉得这个总结很合理（当然，“用户体验”这个词太宽泛了，也不仅仅属于前端工程师的范畴。比如在开发后端的时候优化一个数据处理流程，提升了整体性能，这也有利于用户体验的提升）。在开发后端时优化数据处理过程可以提高整体性能，这对用户也有好处。体验的提升）。在开发后端时优化数据处理过程可以提高整体性能，这对用户也有好处。体验的提升）。

现在的前端工程师难免会遇到比切页、实现视觉需求、实现交互等更深入的问题，比如前端自动化、图像编程、性能优化等JSP/ASP/nodeJs。过去，后端模板一般都属于后端的范畴。现在随着前端架构的演进，可能会要求你写后端模板的代码，这需要后端语言（PHP/Java/C#等），也就是所谓的大前端（不过这并没有偏离前端的定位，大前端还是处理和用户接触的部分，还是用户体验的优化）。可能最常见或谈论最多的是节点。事实上，这些类型的技术都是可以选择的。

以上是我对前端的粗浅理解以及衍生的技术路线。学习一个领域，掌握它的整体趋势和趋势是非常重要的。