个人前端入门经历

前言

大体想来，接触前端已有两年左右的时间，也曾迷茫过，所幸坚持了下来，也终于入门了。两年来看过很多书，接触过很多新技术，随着知识边界的不断扩展，也愈来愈感受到本身的不足，还有更多的知识点须要掌握。平时，有很多人问我怎么学习前端的，通常我是不回复这类问题，不是不肯意，而是回答不了。由于本身也才刚入门，没有什么能力指导别人，还有就是不一样的人有不一样的知识储备和编程基础，总的来讲就是各有各的状况，个人学习方法或许只适合我本人。这篇文章并非为了指引其余小伙伴入门，仅仅是一个我的的阶段性回顾。

初始接触

最初接触前端仍是本科时候，是大二仍是大三业已忘记，学了一些HTML/CSS，并无深刻了解，毕竟年轻嘛！不知道学什么，什么又都想了解一点。只是感受，本身能够用程序写出来一张页面是很酷的事情，作页面远比写C++代码有趣多了。硕士阶段，一个项目须要一个完整登录模块，那个网站是ASP.NET作的，为此就学习了两个月左右的ASP，作了一个完整的登录注册模块，算是对web开发有了一个粗浅的认识。一位师兄是前端方向的，导师也让跟着他学点东西，看他拿到了网易的offer，就感受到前端仍是颇有前途的，就转向了前端。当时也没想着毕业后从事前端工做，仅仅是为了学点东西而已，对于将来择业仍是偏向于事业单位或研究所。没想到接触的越多，了解的越多，越就喜欢从事这个行业。

知识储备

本人接触或学习一门知识或者技术，通常先把背景知识了解后，知道其应用场景及意义后才会进行系统学习，学习前端知识也是这样。先去w3school学习了前端包括的几大核心知识HTML/CSS/JavaScript，固然也把网站上全部的知识点都浏览了一遍，包括PHP、XML等等。对web开发有了一个大概认知以后，就开始系统的学习前端知识。

在学习基础的知识的过程当中，并无忘记拓展本身的知识边界，也看了很多其余相关书籍。下面是一些书籍列表：

• 《JavaScript基础教程》
• 《JavaScript基础与实例教程》
• 《Head First HTML与CSS》
• 《HTM5与CSS3权威指南》
• 《响应式Web设计 :HTML5和CSS3实战》
• 《网页设计与配色经典案例解析》
• 《超人气网站是这样建成的》
• 《网站设计解构 :有效的交互设计框架和模式》
• 《Web 2.0界面设计模式》
• 《CSS创意课 :全球优秀交互页面设计》
• 《响应式Web图形设计》
• 《Sass与Compass实战》

在学习的过程当中，为了练习网站布局，大体重构了HTML5中国、京东等网站的网页。

在掌握了必定的前端基本知识后，感受JavaScript是前端里面最核心的一部分，就把学习重心放在了JavaScript上，看了下列书籍：

• 《JavaScript高级程序设计》
• 《JavaScript启示录》
• 《高性能JavaScript》

高级程序设计本书无疑是一本经典之做，讲解的很是全面、细致，但我的感受并不适合初学者，由于里面有很多知识点并非初学者能够深入理解的。同一句话的含义对于资深程序猿和菜鸟程序猿是不一样的，高级程序设计本书适合有必定基础的人阅读，最好读多遍，这样才能深入理解JavaScript语言本质。

对高质量代码的不懈追求是一个优秀工程师必备的素质，要想写出高质量的代码就须要对web性能优化相关知识有必定的了解，我就阅读了如下书目：

• 《高性能网站建设进阶指南 :Web开发者性能优化最佳实践》
• 《JavaScript设计模式》
• 《编写可维护的JavaScript》
• 《JavaScript函数式编程》
• 《WEB性能权威指南》
• 《WebKit核心技术揭秘》
• 《Web前端黑客技术揭秘》

不少招聘前端工程师的职位要求每每都会对后端知识储备有所要求，LAMP是不少公司的后台技术选型搭配，就学习了最好的语言--PHP，看了：

• 《PHP与MySql程序设计》

代码是写出来的，只有多写代码，才能养成良好的编程习惯，写出高质量、可维护的代码，在储备知识的过程当中不要忘记动手实践，只有在不断的实践才能不断的提升本身的编程水平。

项目实践

对于大部分在校学生来讲，并无多少好的项目让你去作，没有项目作也就不能积累项目经验。很多人作的第一个项目就是本身的我的博客，我也不例外。下面就是关于这个我的博客的一些经验：

这是一个闲来无事练手之做，也是对本身长时间学习前端知识的一个检验。从需求的分析、页面的设计，再到概要设计及编程实现，以及上线和测试，一个完整的流程走下来，对软件开发有了更深入的认识，收获了不少。由后台管理系统和用户浏览页面两个部分构成。下面就详细的叙述一下这个博客所用到的一些编程语言和框架类库及收获。   

• 前端实现

JavaScript/HTML/CSS毫无疑问是必不可少的，在写JavaScript代码时用的jQuery库，它是轻量级的js库，兼容CSS3和各类浏览器，jQuery使用户能更方便地处理HTML、events、实现动画效果，而且方便地为网站提供AJAX交互。jQuery给开发者提供了很大的便利，固然若是写的是一个复杂的应用或者调用很频繁的程序，最好仍是用原生的JS写，毕竟最高效的仍是原生的。推特的开源框架 BootStrap是一款很流行的前端框架，Bootstrap 让前端开发更快速、简单，本博客也使用了它。为对HTML进行更新时简化代码，提升代码利用率，还使用百度前端团队开发JS模板引擎。为了使博客的界面更加的漂亮，为博客注入一丝活力，也使用了粒子跟随插件。为了更好的管理博客，使用Datatables插件，以及一个所见即所得的基于BootStrap的富文本编辑器。

• 后端实现

关于后端，原本准备学一点Node.js，把博客放在咱们实验室本身的服务器上，但一想离开后就不容易维护了，就选择了PHP和MYSQL，这样方便在新浪SAE上发布。之前也看过一些PHP的教程，但没怎么使用过，很快也就把知识还给做者了。因此为了搭建后台，就选择了一款轻量级的框架-CodeIgniter。简单易学，很快就能够上手，对于新浪SAE上也有专门的优化。CodeIgniter 是一个小巧但功能强大的 PHP 框架，做为一个简单而“优雅”的工具包，它能够为 PHP 程序员创建功能完善的 Web 应用程序。这个框架很容易上手，想本身作一些网站的小伙伴能够学习一下，在学习以前最好对PHP和MYSQL有一些了解，从w3school能够了解一些基础知识。磨刀不误砍柴工，对基础知识有必定的了解以后，能够快捷高效的使用CodeIgniter框架，也能够避免一些低级错误。新浪SAE上的MYSQL版本较低，你在本地上建立的数据库可能不能够直接导入到SAE平台数据库中，这时候你就得本身动手重新建立了。 

还作一些其余的项目练手，好比老年卫视，钟表式日历插件，故事续写网站等。

新技术

一入前端深似海，有太多的知识须要学习，也有很多的新技术、新概念不断涌现。学习或者了解过less/sass、angular、node、react、grunt等，但于学生的我来讲缺乏一些应用场景，也仅仅停留在学过而已，只对其概念有所了解。

我的感受对于新技术不要盲目，打好基础才是王道，不管是什么样的技术只有结合具体项目才有用武之地，不能人云亦云，蜂拥而上。咱们要随着项目实践不断拓展本身的知识边界，而不是闭门造车。