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

题图

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中,里面都有源码,还等什么,赶紧动手把,相信你也可以做到,原布局练习教程在这里

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容