Web前端开发:我希望得到的编程学习路线图

对于一些没有编程经验的人来说,一开始就学习web开发会让人觉得非常困难。因为你的能力处于初始阶段(你根本不知道你缺少哪方面的知识),所以在你能够建立一个任意复杂的网站之前,你可能会认为你需要大概几个月的时间来夯实计算机方面的基础知识。

其实并非如此!web开发和CS是不同的,你完全可以在没有太多计算机基础的情况下开发学习web开发。我这样说,完全是根据我自己的经验。

六个月前,当我开始学习web开发时,我还是一个法律学校的在读学生,而且几乎不懂任何关于编程的东西—仅仅在开始学习的前几个小时了解过一些基本知识。四个月后,我收到了来自Pivotal Labs的offer,接着我离开了法律学校,搬到了旧金山。我非常的幸运地遇到了一位极为优秀导师(从黑客学校获得的收获绝对不能忽视),所以我不认为我的故事非常具有代表性。但是我认为这很清楚的表明那些没有计算机背景的人同样可以成为web开发者,而且它所花费的时间可能比你想像的要少。

这篇博文是为了尝试帮助那些刚开始学习web开发的人们。这里展示了一个大概流程,这个路线图会“告诉你在最初的几月里需要做什么”,它也是我最开始编码所遵循的路线。

写这样一篇博文的想法已经在我脑海里有一段时间了,只是我认为自己知之甚少,所以始终没有提笔。在写这篇文章时我还是觉得自己知道的不限,所以如果你在下面的文章中发现任何错误与不正确的地方,请一定帮我指正。

点击链接加入群【Web前端开发学习】:https://jq.qq.com/

四个部分

这里大致列出了长短不一的四个部分知识要点,在你学习的前几个月里你需要掌握这些要点。

1)  web框架的基础知识(如Ruby on Rails),又名“包含网站模块及它们之间连接结构”。

2)  前端开发,又名“如何使内容出现在正确的位置上,而且在浏览器中表现得好看”。

3)  版本控制,又名“如何使用免费易用的软件,使程序员能够有组织地保存他们的程序版本。这样他们就不用担心修改代码所带来的版本混乱,同时也能够很好地与其它程序员协同开发”。

4)  部署,又名“如何真正地将你的网站放到互联网上”。

我把这几个部分标记为1到4,但这并不意味着它们之间存在任何特定的顺序。你可以同时学习这些东西。

第一部分:选择一种web框架,并开始学习它

在这个部分所需要花费的时间很像这种模式,即“选择一种web框架”=>“大概10分钟之内”。“学习这种框架”=>“很多很多个(快乐的)小时”。

现在有很多的web框架可供选择。而我要讨论的是Ruby on Rails,它是我所知道的最好的框架,因为到处都有关于它的优秀的资源。

那么,什么是web框架?我的理解是这样的:有框架之前,人们在决定做一个新的网站时,往往每次都需要添加一些相同的东西到新的网站。由于这些都是一些重复无聊的工作,所以程序员开发出了框架(例如Rails),这些框架能够把很多重复性的工作移到web开发之外。人们喜欢说,Rails代表“约定优于配置”。它的意思是,假如你想按照约定的方式开发,那么Rails会使web开发变得简单。

相关的资源:

我刻意只选择了无数Rails/Ruby资源的一小部分来说,因为可选择的资源实在太多了。

I、阅读Michael Hartl’s精彩且免费的确Rails教程。一个提示:Hartl的教程虽然非常的清晰全面,但你也不可能轻松的完全理解里面的所有内容。细细地去品味它,一旦你发现一些不能理解的东西时,你一定要弄清楚。如果你发现自己只是盲目地去复制/粘贴它的代码,只是为了完成而完成教程,那么请你停下来。当遇到不懂的知识点时,立即去下面的资源中查找:

● Google。有些人在博客或论坛上写的内容可能正是你想知道的东西。当你遇到任何问题时首先去查找Google。

Stack Overflow。在那里程序员回答问题的速度绝对让人吃惊(我的问题往往都在一个小时内得到答案)。

Railscasts。Ryan Bates拥有超过300与Rails相关的线上直播主题。非常惊人的资源。

Rails Guides。这些真正的专业指南是由Rails的核心团队成员所写。这些里面的东西需要时间去消化理解(因为里面的大多数内容都是给有经验的程序员准备的),但是还是有一些介绍性的东西可以拿来学习。

II、在进行I学习的同时,Hartl将告诉你Rails的工作原理。但是如果你不懂Ruby,那么太多的Rails会让你觉得像在变魔术。这里列出了你在学习Ruby时应该用到的一些资源,你应该按照资源列出的顺序来学习它们:

● 前往Codecademy学习编程的基本元素(循环,数据结构)。目前Codecademy教程是用Javascript讲的,不过没关系—反正无论如何你也是要学Javascript的,况且现在的重点主要是熟悉编码的基本要素。(强烈建议:如果你想让学习更有挑战,登录projecteuler.net,然后用自己所学的东西来解决上面的一些问题)。

● 阅读浏览这个优秀的Ruby教程。当你阅读它时,打开你的终端(如Mac上的iterm),打开irb(the interactive ruby shell),并立即开始实践你正在学习的语法。(搜索“terminal”和“irb”,如果你压根不知道它们是什么。)

● 在做上述工作的同时,下载并阅读Ruby Koas。它是一系列丰富有趣的练习,这些练习涵盖了大多数Ruby的基础知识。

● 最后,阅读Eloquent Ruby。Eloquent Ruby适合那些对编程已经达到某种程度的人,所以在你读完Koans和Ruby教程之前不要去读它。Eloquent Ruby将不仅告诉你Ruby的工作原理,还会告诉你应该如何使用Ruby(例如,Ruby程序员决定的方式就是最好的实践方式)。

第二部分:学习前端的东西

对于“前端”和“后端”不完整/不准确的定义可能会是这样的:web开发中的“后端”是指你存储和组织网站数据的地方。例如Yelp这样的网站要存储很多东西:它的用户和用户的个人资料、大量的餐厅信息、哪个用户对一个特别的餐厅做了什么评价,等等。

Yelp把这些信息存储在服务器上,这些服务器就是分布在不同地方的大型计算机。当你搜索“Pizza in San Francisco”,你的计算机会发送一个请求到Yelp的服务器,Yelp服务器收到后回发HTML形式的请求信息(Yelp每次都以这种方式来指示服务器的行为方式)到你的浏览器,浏览器会被渲染(例如:将HTML分离成文本和图片,然后让这些图片和文本在浏览器窗口中以正确的方式显示出来)。这后面的一部分—有关数据应该如何出现在用户窗口的指令(而不是什么数据应该被回送)—就是“前端”。

相关的资源:

● 在w3schools上学习HTML和CSS。编注:谢谢下面的一些评论者指出了w3schools的不足。大家可以转到w3Fools获取一些更好的资源列表。HTML是一种标记语言,用来管理页面的结构。例如,需要有一个页头,后面要跟一个段落。CSS则决定这个页面显示出来的样式。例如,页头的字体大小为18,跟着的段落中文字内容为蓝色。

● 学习Javascript。Javascript决定了页面上的元素如何表现。例如,页头开始时会被隐藏,但当用户点击某个按钮时又会渐渐地显示在页面上。这里有一个非常优秀的Javascript框架称之为jQuery,它基本上适合每个人使用,而且学习起来有趣直观。这里有一个小型的教程,


点击链接加入群【Web前端开发学习】:https://jq.qq.com/

第三部分:学习版本控制(如:Git)

大致地说,版本控制系统使程序员能够在任何时间点及时的保存(正式说法是“commit”)他们的代码。当一个项目结束时,一个程序员可能已经积累了数百或数千份这样的代码备份。

我之前并没有意识到版本控制的重要性。当我在写一篇文章时,我并没有把我对文章做的每一次修改保存到Word文档中。当我写代码时,情况会有所不同吗?

事实证明,答案至少是两方面的。首先,程序员写代码时往往会导致意想不到的问题。当问题发生时,我们可以很轻松地回滚到上一个正常工作的代码版本。然后,程序员经常工作于同一个项目中。在这种情况下,他们需要能够很轻松地合并他们的代码。类似Git这样的版本控制系统(目前最流行的)可以很容易地做到以上两点。

相关的资源:

Hartl会向你介绍Git,但他不会解释得太多。要了解更多,去这里:

● Git介绍:由Github的人员建立(这是一个了不起的网站,它让程序员很容易地共享代码并协同工作—你应该最先访问Github去学习)。

● Git进阶:感谢评论者Polygonchorus提供的这个网站,看起来真的很棒。

● Git指南:新颖且简单。在这里可以学习基本的命令。

● Git的社区图书:一个很好的参考资料,你可能不需要从头到尾的通篇阅读它。

第四部分:学习如何部署(如Heroku)

当你开发网站时,绝大多数时间你都会在你的开发环境中去验证检查—换句话说,就是在你自己的电脑上,而不是在互联网上。

拥有这样一个开发环境的理由很简单:将你的代码上载到一个远程服务器需要一定的时间(例如,上载到互联网中一个实际的服务器上)。由于你的网站正处于开发阶段,你需要不断地检查你的网站,而每次当你上载新的代码时,你都需要20-30秒去等待服务器的响应,然后才能看到新代码运行的效果,这确实很烦人。

当你觉得准备好了,你可以很容易地使用Heroku来部署你的代码(Hartl说明了怎样去部署)。这里是在Rails3环境下设置Heroku的相关信息:

关于此路线图的一些重要想法

以上的这个资源足够你学习几个月的,但它们不会带你走得更远。我只是希望,在学习过那么多知识之后,你能够从自己建立的项目中学习提高。下面是一些离别的想法:

选择一个能激发你兴趣的想法,并在你觉得准备好之前就付诸于实践。我甚至建议你在完成Hartl教程之前就开始你自己的项目。工作于自己的项目,是让你迷上web开发最容易的方法。

我在这里提到了一些优秀的学习资源,当你要建立一个自己的网站时,这些资源只涵盖了很小一部分知识。时刻保持查阅未知知识点的习惯,不用担心—即使是最好的程序员也需要这样做。

你会经常地遇到bug和其它一些问题。这可能会让人沮丧,但你要尽量保持冷静,并系统地去思考。记住实践是解决问题的最佳方法,同时记录下那些经常出现的bug。当问题出现时,思考问题出现的可能路径(类似这样的推理过程:OK,我的用户无法正确登录。这可能由什么原因造成?嗯…这可能是A、B或C造成的。如果是A,我可能会想到…)。写出来或者大声说出来,如果这样有帮助的话。千万不要只是坐在那里,盯着代码,并希望能够顿悟。

与其它程序员一起工作,并向他们学习。与其他人一起编码并讨论代码,我觉得这是最快最有趣的学习方式(我非常推荐结对编程)。

祝你好运!

—————————————-

有些评论指出,由于web开发只是编程的一个子集,本文标题用“学习web开发”取代“学习编程”可能更好。他们的观点非常对,所以我希望本文的标题不会误导人们认为web开发就是编程的全部(其实还有很多,很多我们不懂的东西)。这么理解吧,web开发仍然是编程的一个子集,所以那些学习web开发的人同时也在学习如何编程。

想学好前端的可以来我们晚上的课堂听课,每天晚上都会讲一个小案例或小项目或分析前端面试以及工作和发展,更多的是谈一些学习路线和方法,加web前端开发学习qq群:617327703(这些都是免费的,每天都有)给你课堂地址。群里还会不定时的传些资料

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

推荐阅读更多精彩内容

  • 一、异同对比选择1、Python和ruby的相同点: * 都强调语法简单,都具有更一般的表达方式。python是缩...
    沃伦盖茨阅读 4,142评论 2 24
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,006评论 25 707
  • 蝶恋花·桃花 蝶恋花·桃花(一) 什川四月花烂漫。 风光旖旎,客游桃梨园。 双桥耸峙花锦簇, 岸边垂柳醉春烟。 梨...
    魏周全阅读 708评论 0 0
  • 《豫章喻氏宗谱源流序》 古人锡土赐姓,帝王元制也。别其氏族,乃诸侯之制也。若夫大夫有家,以大史掌...
    雨后嘉茗阅读 4,227评论 4 7
  • 关 注“武 汉 IT 行 业 指 南”掌 握 第 一 手 IT 情 报 你 就 是 下 一 个 IT 之 王 01...
    IT行业情报局阅读 335评论 0 0