前端开发应该怎么学（含CSS布局练习源码）

题图

版权申明：
此文章首发于公众号程序员在深圳，搜索 studycode 即可关注
本文无需授权即可转载，转载时请务必注明作者

1. 价值

我是一个对后端有一定经验的程序员，一直从事相关的工作，不过我对前端也挺感兴趣的，总想学点前端的技术，做点东西来玩玩，比如做个写周报的页面，这样就不需要花时间去整理周报内容；再比如利用这些知识定制开源的监控页面，让它更贴近我们的需求，或者利用前端做一些运维自动化工作。当然目前想到的这些对自身的改变都不大，无非是多学习一种程序语言，但我心里一直笃信，如果能够同时掌握前端技术，对我整个人的价值提升是无法想象的。

前后端原本是不分家的，一个公司刚开始的时候，不管前端还是后端代码，应该是一个人，或少数几个人一起做出来的，只是随着公司发展过程中管理的需要和分工协作的原因，前后端分离这件事才越来越明显，导致现在许多人一进入公司，就只会做前端，或另一部分只会做后端，而且保持十几年不变，在我看来，作为一个后端程序员，如果不了解前端，属于技能上的缺失，不仅无法独立完成一个完整的产品，而且在思维上不会站在前端程序员的位置上思考，即将来如果成为一个系统设计师，设计出来的软件也很有可能存在缺陷，反之亦然。这也是为什么整个行业越来越鼓吹全栈工程师，这个概念并不是虚幻不实际的，而是企业对人才的一种实实在在的需求，即人们常说的复合人才的一种，全栈工程师对于一个企业来说价值巨大。

2. 失败经历

我学习前端开发断断续续也有几年时间，总是想着自己有不错的基础，应该不费吹灰之力就可以学会，有一两次还做了些计划，例如每天跟着w3school学半个小时，相信自己十几天之内就可以掌握，但一方面因为自己工作比较忙，另一方面因为计划不太实际，没有收到相应的成效，最终都以从入门到放弃告终。最近花了些时间学习学习的方法，再次总结之前的失败原因，发现以前失败主要是因为自己的重视程度不高，加上前端技术栈确实庞大，如果随随便便就可以学到的技能，那其实本身它的含金量就不高；学习任何一个新技能都应该注重它的学习过程，首先要分析这个技能的主要框架，然后针对框架的每一个知识点，做大量的实践及练习，这样你才能够’快速’学会一门新技能。

曾经有过这样的经验，公司要开发一个云存储系统，为了完成这个需求，我引进了一个开源的云存储项目，并将其进行修改，让它符合公司的需求，这个开源的项目自带一些运维可视化的工具，是用AngularJs和BootStrap做成的，当时我也花了些时间看懂了这些代码，以为自己以后就会使用这些技术来做可视化了；但真正要开发新的项目时，我并不能很快利用AngularJs和BootStrap为我所用，即便花很多时间做得和以前一模一样，我也很难在上面添砖加瓦，或做得比以前更好。根本原因在于我没有了解前端开发的全貌，不知道某些技术的主要用途是怎样的，只看代码而不实践也是无法让技术成为自身技能的。

3. 领悟

直到最近，我在github上发现了free code camp社区，全世界最大的学习前端开发的社区，我同时也鼓励零基础的老婆在上面学习，希望有一天她可以通过学习一门编程语言体会到成长的乐趣。在fcc中国社区，作为自愿者，给他们翻译了几篇前端学习的入门文章：

1. Things you probably didn’t know you could do with Chrome’s Developer Console
2. I finally made sense of front end build tools. You can, too.
3. From Zero to Front-end Hero (Part 1)
4. From Zero to Front-end Hero (Part 2)

在翻译的过程中，其实对我帮助比较大的是英语能力的提升，让我专门腾出时间来利用英语进行翻译工作。其中最后两个翻译的文章，是点击量最多的，反映了翻译水平比以前有了提升，同时这两篇本身质量也非常高。其原因在于文章给初学者规划出了一个版图，读者拿着这个版图，对每个版图分别进行实践，就可以把其中的知识据为己有，注意，如果你只看文章而不实践，是没有用的，知识不会因为你看了文章而自动钻到你的脑袋里。

所以，说到这里，最佳的学习前端的方式是实践，而最佳的实践其实文章中已经说了：依葫芦画瓢，即把例子原封不动的克隆一遍。当然尽量不要ctrlC + ctrlV。

From Zero to Front-end Hero系列真的不错，我现在已经按照文中的路线在练习，从布局开始，已经学会了基本的布局方式，以及知道了平时看到的一些交互式页面，其实是通过CSS的技术做出来的，例如Media Query技术可以自动适应pc浏览器和移动端浏览器。关于布局的练习，我把它保留在了我自己的CodePen中，里面都有源码，还等什么，赶紧动手把，相信你也可以做到，原布局练习教程在这里。

本文没有提到科学上网、英语能力等，这些不是必要的，但它们确实会带来很大的帮助。

希望本文可以给你带来帮助，如果你喜欢这篇文章，可以将其分享到社交网络中，如果你有任何问题，可以在文章后留言，或者通过社交网站找到我。

欢迎您扫一扫上面的微信公众号，订阅我的文章！