來自：知乎
鏈接：http://www.zhihu.com/question/19834302
A：學(xué)習(xí)背景
開始網(wǎng)站開發(fā)，起先是從手機(jī)網(wǎng)站的UBB語法開始的，也因此有了深入學(xué)習(xí)的興趣。為了讓學(xué)習(xí)的熱情膨脹，我有意的培養(yǎng)這一愛好 ，定位了自己要成為一名優(yōu)秀的網(wǎng)站開發(fā)員的目標(biāo)。
作為一名只有高中水平的零基礎(chǔ)初學(xué)者，周圍也沒有掌握相關(guān)知識(shí)的朋友，打算自學(xué)的我只有通過google,baidu來了解要學(xué)習(xí)網(wǎng)站開發(fā)所需要的知識(shí)點(diǎn)。
目前掌握的知識(shí)點(diǎn)
了解到網(wǎng)站分為前端和后端。
前端方面：由于我是從UBB語法上開始的，我一開始就選擇了學(xué)習(xí)的XML，后來學(xué)到，schema的一知半解，到后來的DOM就出現(xiàn)了瓶頸，于是放下這個(gè)開始學(xué)習(xí)HTML，CSS,可是一直都覺得簡單，也就當(dāng)看電影一樣一氣呵成，便開始了學(xué)習(xí)Javascript，一直堅(jiān)持到了自己能編寫一些簡單的效果，也在這里進(jìn)一步的了解了DOM，此時(shí)我覺得可以進(jìn)行一些進(jìn)階級(jí)的網(wǎng)站效果設(shè)計(jì)，可是忽然發(fā)現(xiàn)我對(duì)HTML+CSS原來是如此不堪，我并不能很好的用它們?nèi)ゾ幣艃?nèi)容，更或者說我連從哪下手去設(shè)計(jì)都不知……為此我迷茫了很久，又回過頭來學(xué)習(xí)一遍，我才發(fā)現(xiàn)自己腦子里的知識(shí)點(diǎn)是一片混亂！
由于我是斷網(wǎng)自學(xué)（手機(jī)上網(wǎng)看文字的內(nèi)容還是很方便的），原因是為了不讓自己在網(wǎng)絡(luò)上分散了學(xué)習(xí)上的那份專注。所以對(duì)于圖片等素材是很是欠缺的。我也知道前端對(duì)于熟悉PS，AI，F(xiàn)lash等圖行工具很重要，可是我看了這么多教程，就是找不到學(xué)習(xí)的竊門，只能對(duì)圖片進(jìn)行一些簡單處理，F(xiàn)lash更是難點(diǎn)重重，我就一直想不明白，用鼠標(biāo)鍵盤怎么畫出那么好看的動(dòng)畫。。。。。。
后端方面：我選擇了PHP，MySQL。由于前面學(xué)Javascript的經(jīng)驗(yàn)，學(xué)PHP也不是很難，學(xué)完了一些基礎(chǔ)語法，MySQL也了解了建庫建表，可就是一直沒用過，這也是因?yàn)榍懊娴闹R(shí)點(diǎn)一直沒找到突破口，所以也就沒打算怎么去深入學(xué)習(xí)后臺(tái)知識(shí)。
B：問題
一、怎樣編寫標(biāo)準(zhǔn)的HTML+CSS，對(duì)于這些規(guī)范的標(biāo)準(zhǔn)很是不解，對(duì)于編寫代碼(包括js，php)有哪些好的習(xí)慣?我一直沒有給自己寫的代碼注釋，也許是目前自己寫的都是太簡單了。
二、從Javascript , xml 上我都對(duì)DOM這一知識(shí)點(diǎn)上了解不深，是不是一種面向?qū)ο蟮闹R(shí)，我該怎么去形象通俗的了解面向?qū)ο螅?/p>
三、我該如何去系統(tǒng)的整合我現(xiàn)在的HTML+CSS+Javascript+xml+PHP+MySQL的知識(shí)，或者說是如何系統(tǒng)的學(xué)習(xí)，作為一名單獨(dú)的自學(xué)者，我很是迷茫這一點(diǎn)！???
四、圖形工具（PS,AI,Flash）方面，有沒有一個(gè)好的學(xué)習(xí)建議或竅門？
五、從未來的互聯(lián)網(wǎng)發(fā)展趨勢來看，還有哪些知識(shí)點(diǎn)是網(wǎng)站開發(fā)者需要掌握的?
C：后記
個(gè)人對(duì)自己的點(diǎn)評(píng)：1）可能是約束力不夠，搞得知識(shí)面混雜。2)有點(diǎn)好高騖遠(yuǎn)了，基礎(chǔ)沒勞固就想開發(fā)？3)急功求成，對(duì)于一個(gè)23歲沒收入的青年來說，如果不能早日學(xué)成，是個(gè)很可怕的事，壓力?。?/p>
在此我也講講發(fā)這一篇像博文般問題的原由，知乎作為中國首家專注社交問答類的網(wǎng)站，我認(rèn)為這必然有它的出彩之處。這里牛人前輩也是特別的多，所以我想單純的提出問題，還不如上百度算了，這里提倡社交式的問答，問題問的不止是要答案，還要是著重于社交這一點(diǎn)，所以我加入了對(duì)問題背景的產(chǎn)生，更好的讓人了解了我的現(xiàn)狀，對(duì)回答應(yīng)該有所幫助。
同時(shí)我也是想著能否找到一些與我一樣的初學(xué)者，相互提高；或者是偏重圖形工具的人能與我形成互補(bǔ)，希望以后能有合作的機(jī)會(huì)。
------------------2014年9月22日----------------
坐在一個(gè)完全與編程無關(guān)的職位上，我對(duì)著電腦，想了好久，這個(gè)問題的發(fā)出兩年多了，讓我認(rèn)識(shí)了好多朋友，大部分都是在校的學(xué)生，你們都正當(dāng)年，我很開心看到你們這么熱情的學(xué)習(xí)心態(tài)，同時(shí)我也想讓其它更多看到這個(gè)問題的人，好好珍惜學(xué)習(xí)的機(jī)會(huì)。我是沒有適當(dāng)?shù)臈l件的，我沒有在編程開發(fā)這條路上堅(jiān)持到我成長成為一個(gè)工程師?，F(xiàn)在的我依然感到有點(diǎn)惋惜，因?yàn)?，我即將開始一場屬于自己的事業(yè)，必然的選擇了與互聯(lián)網(wǎng)，網(wǎng)站開發(fā)建設(shè)有關(guān)，呵呵，大家也別笑我沒這能力還去搞這玩意，具體我做什么的就不在這里表露了;。
順便說一下，有心找我學(xué)習(xí)編程知識(shí)，共同進(jìn)步的人，可能要失望了，但是，這些都不會(huì)阻礙我們能成為朋友，而且從社會(huì)經(jīng)驗(yàn)來講，我這草根人物，很多經(jīng)驗(yàn)會(huì)適合很多人，有興趣的不妨也可以問一下。聯(lián)系我郵箱就行。
在此最后，真心感謝用心回答這個(gè)問題的答主們，您們辛苦了！感謝您們?yōu)檫@么多迷茫在這條路上的學(xué)習(xí)者提供了這么好指引，聲明，我不是來驕情式的感恩，我是誠心的，沒有餓過的人，永遠(yuǎn)無法知道饑餓者對(duì)給他們一塊面包的人那種感恩的心。
還有一些回復(fù)，一些點(diǎn)贊的事，我就不錦上添花了，希望能理解。謝謝。
網(wǎng)站開發(fā)開發(fā)大致分為前端和后端，前端主要負(fù)責(zé)實(shí)現(xiàn)視覺和交互效果，以及與服務(wù)器通信，完成業(yè)務(wù)邏輯。其核心價(jià)值在于對(duì)用戶體驗(yàn)的追求?？梢园慈缦滤悸穼W(xué)習(xí)系統(tǒng)學(xué)習(xí)：
基礎(chǔ)知識(shí)：
1、html + css 這部分建議在 w3school 在線教程 上學(xué)習(xí)，邊學(xué)邊練，每章后還有小測試。 之后可以模仿一些網(wǎng)站做些頁面。2、javascript 要學(xué)的內(nèi)容實(shí)在很多，如果沒有其他編程語言的基礎(chǔ)的話，學(xué)起來可能要費(fèi)些力，還是建議先在 w3school上學(xué)習(xí)。之后建議馬上看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區(qū)分哪些是語言的精華，哪些是糟粕，對(duì)于語言精華，應(yīng)該深入學(xué)習(xí)。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。
進(jìn)階：
有了以上基礎(chǔ)，就可以進(jìn)行一般的靜態(tài)網(wǎng)頁設(shè)計(jì)，不過對(duì)于復(fù)雜的頁面還需要進(jìn)一步學(xué)習(xí)。d) dom編程，這個(gè)web前端工程師的核心技能之一。必讀《dom編程藝術(shù)》，另外《高性能javascript》這本書中關(guān)于dom編程的部分講的也很好。
e) ajax編程，這是另一核心技術(shù)。ajax建議在網(wǎng)上查些資料，了解這個(gè)概念的來龍去脈，百度百科，維基百科上的內(nèi)容就足夠了。真正編程是很容易的，如今幾乎所有框架都對(duì)ajax有良好的封裝，編程并不復(fù)雜。
f) es5, es6。現(xiàn)在開發(fā)js大部分基于es5的，ie8以下通過es5-shim。但利用一些工具，現(xiàn)在已經(jīng)可以直接寫es6代碼了，尤其在reactjs，nodejs類型的項(xiàng)目中。對(duì)于從es5，es6每個(gè)階段js發(fā)生了哪些變化都需要系統(tǒng)學(xué)習(xí)，學(xué)習(xí)順序建議是 JavaScript基礎(chǔ) -> es5 -> es6，越靠前的越重要。一些參考鏈接：ECMAScript 5 compatibility tableECMAScript 6入門ES5 ? 張鑫旭
3、html5。需要了解html都提供了哪些api，然后項(xiàng)目中用起來。這部分沒有什么難理解的，關(guān)鍵在于能用html5解決業(yè)務(wù)問題。
再進(jìn)一階 · 代碼層面：
有了以上知識(shí)，對(duì)于大多數(shù)小型網(wǎng)站，你應(yīng)該已經(jīng)可以寫出能夠工作的代碼了。但要想成為更專業(yè)的前端，你還需繼續(xù)努力。更高的要求大概還有四方面：1易維護(hù)，2可測試，3高性能，4低流量（移動(dòng)端）。
1、易維護(hù)。對(duì)于頁面你該理解‘樣式’，‘?dāng)?shù)據(jù)’，‘行為’三者分離，對(duì)應(yīng)的當(dāng)然就是css,html,js。對(duì)于js代碼，你最好了解設(shè)計(jì)模式，重構(gòu)，MVC等內(nèi)容。
2. 可測性。
3. 高性能。必讀《高性能javascript》4. 低流量。移動(dòng)端關(guān)注比較多。
再進(jìn)一階 · 工程層面：
前端項(xiàng)目同樣面臨軟件生命周期的各個(gè)環(huán)節(jié)，首先是代碼管理，你必須學(xué)會(huì)使用svn和git。其次是代碼的構(gòu)建，如今前端代碼構(gòu)建已經(jīng)不是簡單的壓縮一下了，需要進(jìn)行依賴管理、模塊合并、各種編譯，比需要學(xué)會(huì)使用grunt、gulp等前端構(gòu)建工具。
然后呢？
以上內(nèi)容只是簡單說了前端學(xué)習(xí)的順序。前端工程師應(yīng)該有的知識(shí)結(jié)構(gòu)請(qǐng)參考這里：JacksonTian/fks · GitHub
補(bǔ)充：
對(duì)于前段開發(fā)，基本內(nèi)容就這些了，可以根據(jù)自己的興趣愛好選擇性學(xué)習(xí)以下內(nèi)容。2、后端。應(yīng)該說前段工程師必須至少了解一門后端語言，不過如果愛好也可深入學(xué)習(xí)，入手難度比較低的應(yīng)該是php了。這部分由可分為基于頁面，基于框架兩種。大型項(xiàng)目都是基于框架開發(fā)的，建議至少了解一個(gè)MVC框架，比如php的ci, yii, yaf 等，好還框架的設(shè)計(jì)思想都大同小異。如今NodeJs在大公司已經(jīng)得到普遍的使用，推薦大家使用在Node上使用Express框架做一些后端服務(wù)的開發(fā)。
3、Android和ios開發(fā)。時(shí)至今日，前端的工作領(lǐng)域已經(jīng)非常廣泛，native的界面開發(fā)本質(zhì)上也是前端開發(fā)，個(gè)大公司都面臨著Native環(huán)境和web環(huán)境頁面同時(shí)維護(hù)的問題，如果能夠在技術(shù)上得到統(tǒng)一，將會(huì)有巨大的價(jià)值。對(duì)于學(xué)有余力的同學(xué)，應(yīng)該了解Native開發(fā)的基本流程，至少了解到界面構(gòu)建的技術(shù)。
如果你以上內(nèi)容你都已掌握，想加入一個(gè)牛B的前端團(tuán)隊(duì)，可以私信我。坐標(biāo)：杭州·天貓·前端首先你已經(jīng)不是零基礎(chǔ)了。
其實(shí)這種事情沒有什么捷徑，親自動(dòng)手，一步一步來即可，不能好高騖遠(yuǎn)。
Step 1：用 HTML + CSS 模仿幾個(gè)漂亮的靜態(tài)頁面。當(dāng)你看到現(xiàn)在大部分的網(wǎng)頁都覺得能大概猜到怎樣做，并且花時(shí)間真的能做出來的時(shí)候，即可進(jìn)入下一步。注意，這個(gè)時(shí)候請(qǐng)你不要管瀏覽器兼容性或者太過注意代碼的優(yōu)雅結(jié)構(gòu)，因?yàn)闆]必要。做到能兼容現(xiàn)代瀏覽器，內(nèi)容和樣式基本完全分離即可。這大概需要半個(gè)月到一個(gè)月的學(xué)習(xí)時(shí)間。
Step 2：用 HTML + CSS + JS 寫幾個(gè)有交互的頁面。例如，你可以寫一個(gè)漂亮的注冊(cè)頁面，它能夠驗(yàn)證各種輸入是否符合條件并且有一個(gè)用原生 JS 實(shí)現(xiàn)的日期選擇器（Date Picker）?；蛘?，寫一個(gè)漂亮的，有動(dòng)畫的相冊(cè)。注意，這個(gè)階段請(qǐng)使用原生 JavaScript。同樣的，兼容現(xiàn)代瀏覽器即可。這大概需要半個(gè)月的學(xué)習(xí)時(shí)間。
Step 3：入門一門后端語言。按照你的情況，就 php 吧。有了上面的經(jīng)驗(yàn)，php 入門之后，相信你能夠做一個(gè)漂亮的無用戶留言版了。請(qǐng)把數(shù)據(jù)存貯在文件中，因?yàn)槟氵€沒有學(xué)習(xí) SQL 嘛。這大概需要半個(gè)月的時(shí)間，如果你學(xué)習(xí)能力強(qiáng)，一個(gè)星期也不是沒有可能。
Step 4：入門一個(gè)關(guān)系數(shù)據(jù)庫。比如說 MySQL。DDL 和 CRUD ，請(qǐng)一定要熟練。恩，這個(gè)階段不要談什么優(yōu)化，那是扯淡?，F(xiàn)在，你大概可以做一個(gè)多用戶的博客程序了。這大概需要半個(gè)月的時(shí)間。
你看，兩個(gè)半月不到你就可以成為一個(gè)初級(jí)的 Web 開發(fā)者了。博客做好之后，你可以嘗試造更多的輪子。比如：帶簡單的用戶權(quán)限的論壇程序、簡單的記賬工具，等等，做你喜歡做的任何小程序都行。在這個(gè)過程中，你會(huì)變成一個(gè)熟練的初級(jí)程序員，或者，你為了偷懶，會(huì)學(xué)會(huì) jQuery，Smarty 等框架。
有一天，你發(fā)現(xiàn)你靠寫小程序提高不了水平了。接下來就要學(xué)習(xí)真正的干貨了。
學(xué)習(xí) C 語言。別問我為什么，我就是覺得一個(gè)程序員應(yīng)該要學(xué)過 C 語言，牛逼不牛逼是另外一會(huì)事兒，況且很多書都是用的 C 語言描述。別光學(xué)語法，弄清編譯是什么，鏈接是什么，指針是又怎么一會(huì)事兒。
學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)和簡單的算法。你看，你學(xué)完 C 語言就能學(xué)數(shù)據(jù)結(jié)構(gòu)和算法了，我難以想象用 php 來描述數(shù)據(jù)結(jié)構(gòu)和算法會(huì)有多么地奇怪。如果你覺得學(xué)了之后還是不知道數(shù)據(jù)結(jié)構(gòu)究竟是什么，有什么用，那證明你還沒有真的學(xué)到。
學(xué)習(xí)一門面向?qū)ο蟮撵o態(tài)編程語言。推薦 Java。學(xué)得有多好，就看你花了多少時(shí)間了。請(qǐng)務(wù)必仔細(xì)閱讀各類相關(guān)書籍，深刻領(lǐng)會(huì)面向?qū)ο蟮闹匾幊趟枷耄ú贿^，切忌迷信面向?qū)ο缶幊蹋?br>
學(xué)習(xí)操作系統(tǒng)和計(jì)算機(jī)網(wǎng)絡(luò)。至少一些基本的概念需要弄清楚，具體的細(xì)節(jié)，沒有必要過于糾結(jié)。
Okay...以上都可劃為「不求甚解」的階段，接下來就可以選一個(gè)方向（前端，或者后端）「求甚解」了。在「求甚解」的階段里，我這里就不細(xì)說了，也沒法兒細(xì)說，并且你到了這個(gè)階段，一般是不需要?jiǎng)e人告訴你需要學(xué)什么了。所以，我只說在進(jìn)入這個(gè)階段之前，或者剛剛進(jìn)入這個(gè)階段時(shí)，最好去做的一些事情：
看書或文檔拋棄中文譯本，借助各種工具閱讀英文原版。
學(xué)習(xí)使用 Unix-like 系統(tǒng)。
學(xué)會(huì)提問[1]。
訂閱科技博客，了解業(yè)界正在發(fā)生什么事情。
Happy hacking！
[1] 提問的智慧：http://www.wapm.cn/smart-questions/smart-questions-zh.html
其實(shí)前端我接觸的并不多，但現(xiàn)在不是提倡Full Stack全棧工程師嘛。如果你掌握下面的會(huì)讓你如魚得水，不需要被UI,UE人員優(yōu)先級(jí)而影響。
Ruby on Rails：在web2.0時(shí)代，RoR一下子獲得很多創(chuàng)業(yè)公司的青睞，開發(fā)者將Rails作為一個(gè)框架來創(chuàng)建數(shù)據(jù)庫支持的Web應(yīng)用，它本身是一個(gè)完整的解決方案，通過默認(rèn)的標(biāo)準(zhǔn)實(shí)踐（convention）可以很大的加快開發(fā)效率，無縫的整合所有子組件以提供給開發(fā)者一個(gè)統(tǒng)一的接口。當(dāng)時(shí)Twitter早期也是用這個(gè)框架寫的，但這個(gè)也是雙刃劍，在性能和內(nèi)部機(jī)制上很難調(diào)節(jié)。
Django：Python的前端管理框架，直接生成管理頁面。有人經(jīng)常那上面的作為PK相比于 Django、Pylon 等 Python 框架，Ruby on Rails 是否有很大的技術(shù)優(yōu)勢？
Smarty：PHP的一種模板語言，很容易上手。
Bootstrap：Twitter提出的HTML，CSS和JS框架，讓你的web app容易適配到各種平臺(tái)，比如手機(jī)上。
JQuery：Javascript的最流行的庫，可以做一些Ajax調(diào)用。
HTML5：就是下一代的HTML標(biāo)準(zhǔn)，增加了一些兼容的便簽，使得在手機(jī)和瀏覽器中閱讀效果一致。對(duì)應(yīng)的是Native APP，就是原生的從底層開始寫的APP。當(dāng)年Facebook是走HTML5的路，發(fā)現(xiàn)不對(duì)勁，性能很差，體驗(yàn)糟糕。趕緊轉(zhuǎn)變成Native APP才讓它重新贏得市場。
Node.js：js寫的后端服務(wù)器，處理高并發(fā)場景性能佳，使用 Node.js 的優(yōu)勢和劣勢都有哪些？ 特別適合移動(dòng)的服務(wù)器端。 Socket.IO是其中一個(gè)組件，為了在瀏覽器和移動(dòng)設(shè)備上創(chuàng)建實(shí)時(shí)應(yīng)用而產(chǎn)生的，它可以模糊不同傳輸機(jī)制之間的差異
D3：各種可視化的效果，確實(shí)非常酷。
Impress：js基于CSS3轉(zhuǎn)換和過渡、工作于現(xiàn)代瀏覽器、并受prezi.com的理念啟發(fā)的演示工具。
Backbone.js：前端的MVC，為復(fù)雜Javascript應(yīng)用程序提供模型(models)、集合(collections)、視圖(views)的結(jié)構(gòu)。
Meteor：一個(gè)構(gòu)建在 Node.js 之上的平臺(tái)，用來開發(fā)實(shí)時(shí)網(wǎng)頁程序。Meteor 位于程序數(shù)據(jù)庫和用戶界面之間，保持二者之間的數(shù)據(jù)同步更新。因?yàn)?Meteor 是基于 Node.js 開發(fā)的，所以在戶端和服務(wù)器端都使用 JavaScript 作為開發(fā)語言。而且，Meteor 程序的代碼還能在前后兩端共用。
聯(lián)系客服
