2015年4月22日更新：
寫這篇文章的初衷并不是讓設(shè)計(jì)師去當(dāng)程序員，也沒有說設(shè)計(jì)師可以替代程序員，這篇文章完全是給設(shè)計(jì)師提供一個(gè)了解網(wǎng)頁前端代碼的入門途徑，前提是：設(shè)計(jì)師本身對(duì)這個(gè)有興趣。
希望大家發(fā)表一些意見／偏見／建議之前，閱讀一下文章前三段，可以避免不必要的爭(zhēng)執(zhí)。
感謝大家對(duì)這篇文章的鼓勵(lì)！:D
——————————————————————————————————————————
兩年前我在豆瓣寫了一篇給自己看的日記：
http://www.douban.com/note/257552951/ 寫這篇日記的初衷源于當(dāng)時(shí)非常風(fēng)靡的一萬小時(shí)定律，如果一個(gè)人每天致力于某件事8小時(shí)，每周5天，那么你成為這個(gè)領(lǐng)域的專家需要五年時(shí)間（一萬個(gè)小時(shí)）。我當(dāng)時(shí)一看五年就嚇尿了，我平時(shí)連鍛煉身體做做深蹲都是三天捕魚兩天曬網(wǎng)，五年豈不要了我老命，我相當(dāng)有自知之明地直接把一萬小時(shí)縮減到十分之一，于是就有了那篇文章。
兩年過去了，一千小時(shí)的目標(biāo)還遠(yuǎn)遠(yuǎn)沒有達(dá)到，可能只完成了十分之一，也就是說是一萬小時(shí)的一百分之一，但是我在自學(xué)前端代碼的這條路上繼續(xù)緩慢前進(jìn)著，支撐著我的兩個(gè)原因分別是：1.暗戀了兩年的基友是碼農(nóng)（也是當(dāng)年開始學(xué)習(xí)的原因之一）；2.升級(jí)技能（想轉(zhuǎn)行想多賺點(diǎn)錢）。
如果你是（平面／UIUX／其他）設(shè)計(jì)師，并且想自學(xué)前端代碼的，可以看一下我是如何開始的。如果你還在疑惑為什么要學(xué)習(xí)代碼，這里有一篇不錯(cuò)的短文可以讀一下：
http://e-r-h.tumblr.com/post/98944147852/should-designers-learn-to-code （《設(shè)計(jì)師應(yīng)該學(xué)習(xí)代碼嗎》希望讀完能對(duì)你有所啟發(fā)。）作為設(shè)計(jì)師，可以不會(huì)寫，但是一定要對(duì)其有所了解，和學(xué)習(xí)一門外語的道理是一樣的。當(dāng)然我只是個(gè)半瓶水晃蕩的初級(jí)小白，這篇文章是寫給想入門的朋友們的，專業(yè)級(jí)的讀者請(qǐng)不要嘲笑我。
最基本的一點(diǎn)也是最重要的一點(diǎn)：你需要有一個(gè)project。也就是說首先你有一個(gè)想要實(shí)現(xiàn)的東西，為了實(shí)現(xiàn)這個(gè)作品，學(xué)習(xí)的動(dòng)力就會(huì)來。和很多人一樣，我最初是想給自己建一個(gè)作品集網(wǎng)站，我當(dāng)時(shí)還在用cargocollective，挺好用的，干凈簡(jiǎn)潔，缺點(diǎn)是很多人都用一樣的模版，那個(gè)時(shí)候cargocollective還沒有developers feature，沒有辦法上傳自己的代碼，只能改模版，對(duì)于設(shè)計(jì)師來說，和別人做得一樣應(yīng)該是很多人想要盡量避免的一點(diǎn)。有了建作品集網(wǎng)站的想法之后，我就開始學(xué)習(xí)寫靜態(tài)網(wǎng)頁的代碼，HTML+CSS嚴(yán)格來說不算是編程語言，只是網(wǎng)站結(jié)構(gòu)與樣式表而已，上手不難，這里我推薦這本書
http://book.douban.com/subject/21338365/， Jon Duckett的HTML+CSS，國(guó)內(nèi)的翻譯速度真是令我吃驚，此書沒出多久就有了中文翻譯版，非常適合入門，推薦零代碼基礎(chǔ)的新手使用，絕對(duì)手把手，邊讀邊寫，按照順序一頁一頁讀完之后你的第一個(gè)靜態(tài)網(wǎng)站差不多也寫出來了，基本能保證你的代碼是相對(duì)干凈整潔的（符合代碼界的dry principle），以及各種tag的正確使用（雖然前端看上去一樣，但是碼有不同的寫法），簡(jiǎn)言之就是專業(yè)碼農(nóng)看到不會(huì)大撇嘴的那種。我第一個(gè)網(wǎng)站寫完發(fā)給碼農(nóng)好基友看的時(shí)候，還是被他指出了tag錯(cuò)誤，通俗地說就是咱們說英語的時(shí)候詞匯運(yùn)用不當(dāng)，雖然老外能理解咱的意思。所以這事真要做得完美，也得多練，多給專業(yè)人士檢查。
利用暑假時(shí)間做完個(gè)人網(wǎng)站以后，我就投入了正常學(xué)業(yè)的懷抱，平時(shí)有空的時(shí)候看看人家的網(wǎng)站，都是動(dòng)態(tài)的酷炫帥，加上好基友偶爾的指點(diǎn)，我開始inspect人家的代碼（使用瀏覽器的developer>view source功能，或者chrome右鍵點(diǎn)擊inspect element），這個(gè)時(shí)候你就會(huì)發(fā)現(xiàn)Javascript/jQuery等，雖然js屬于前端的代碼語言，但是相比較html/css，難度真不是一個(gè)檔次的，如果想大致了解js是什么，推薦一個(gè)現(xiàn)在很火的在線代碼學(xué)習(xí)網(wǎng)站codecademy.com，這個(gè)網(wǎng)站能幫你有個(gè)初步了解，但是要真的學(xué)會(huì)，我可以很負(fù)責(zé)任的告訴你——不可能。哈哈哈，不要傷心，我真不知道這個(gè)網(wǎng)站為啥這么火呀。鑒于我的智商＋能力水平，我目前只能復(fù)制黏貼別人的js/jquery代碼，小作修改（針對(duì)指向html的部分），買了Jon Duckett的Javascript and jQuery
http://book.douban.com/subject/20022383/，和我上面推薦的書是一個(gè)系列，我還沒有讀完，不做評(píng)價(jià)。建議大家對(duì)Javascript和jQuery稍作了解，這樣至少能讀懂別人的代碼，能復(fù)制黏貼。對(duì)于大部分不想當(dāng)碼農(nóng)的設(shè)計(jì)師來說，能復(fù)制黏貼＋微改，已經(jīng)足夠了。
前面說了我是三天打漁兩天曬網(wǎng)，Javascript還沒懂呢我又開始學(xué)習(xí)WordPress/PHP，學(xué)習(xí)WordPress的主要原因是自己硬寫的代碼更新內(nèi)容不方便，用PHP和CMS (Content Management System)的好處就是避免重復(fù)改碼＋更新方便。WordPress屬于主流CMS，雖然后臺(tái)很難看，但是適合上手，畢竟系統(tǒng)成熟，相關(guān)教程資源多，很多新興的CMS相對(duì)資源少，自學(xué)有難度。現(xiàn)階段的我各種關(guān)于前端代碼的小文章/小竅門都會(huì)看一看，當(dāng)然是有空的時(shí)候，每天不會(huì)超過兩小時(shí)，推薦一個(gè)付費(fèi)線上代碼＋設(shè)計(jì)學(xué)習(xí)網(wǎng)站Treehouse
http://teamtreehouse.com/ ，不知道國(guó)內(nèi)能不能使用，付費(fèi)的還是比較有用，WordPress的學(xué)習(xí)速度比我之前自己在WP官網(wǎng)上找教程要快得多。而且我逐漸意識(shí)到難度稍高的東西，想要高效學(xué)習(xí)，還是需要上課，有專業(yè)老師指導(dǎo)是最好的，所以我過不久會(huì)去報(bào)班學(xué)習(xí)。。當(dāng)然html+css我建議有時(shí)間的讀者完全可以自學(xué)起來，因?yàn)檫@個(gè)真的不難！
樓主建議想要把基礎(chǔ)打扎實(shí)的自學(xué)最好是買一本書系統(tǒng)學(xué)習(xí)，有一個(gè)粗淺卻較整體的認(rèn)知，然后再采用網(wǎng)絡(luò)提問或者搜索的方法，對(duì)想解決的具體問題各個(gè)擊破（比如網(wǎng)頁背景顏色的動(dòng)態(tài)變化，比如給網(wǎng)頁加一個(gè)自定義滾動(dòng)欄或鼠標(biāo)等等）。因?yàn)槭侨腴T，我們的問題一般網(wǎng)上都已經(jīng)有人提問并解決了，所以擅用谷歌也是一大技能。現(xiàn)在學(xué)代碼已經(jīng)比以前容易了，資源各種多，目測(cè)會(huì)越來越傻瓜，能否學(xué)會(huì)的關(guān)鍵在于能否持之以恒。當(dāng)然只看書不實(shí)踐是不行的，此文章寫的時(shí)候是默認(rèn)你邊看教程邊實(shí)踐的。
附錄A
最后，給有一點(diǎn)前端代碼基礎(chǔ)的朋友們貼上一些實(shí)用的編寫／修改網(wǎng)站代碼的小竅門：
http://type-scale.com/ 測(cè)試網(wǎng)頁字體大小的
http://kerningjs.com/ 調(diào)整字距的Javascript
http://basehold.it/ 調(diào)整行距的Javascript
http://entitycode.com/ 特殊字符的html代碼
http://css-tricks.com/ CSS竅門
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ responsive design
http://www.w3schools.com/ 教程
https://typekit.com/ Adobe出的web字體，付年費(fèi)，出租。附注：各種設(shè)計(jì)工作室的web字體成百上千，水很深喲，有錢淫可以直接買喜歡的web字體。
http://chengyinliu.com/whatfont.html 瀏覽器插件，用來偷窺別人網(wǎng)站字體的。
https://wappalyzer.com/ Wappalyzer瀏覽器插件，用來偷窺別人網(wǎng)站代碼語言的。想要進(jìn)一步深入學(xué)習(xí)代碼的朋友們推薦使用。
http://zh-h.info/100phrases/ http://zh-h.info/ 附兩個(gè)自己手動(dòng)碼的網(wǎng)站，各位一定比我碼得好
附錄B 文中提到的書籍、網(wǎng)絡(luò)教材
入門教材，強(qiáng)烈推薦：
|
HTML&CSS, JAVASCRIPT&JQUERY |
在線教程，推薦：
查閱相關(guān)信息的好地方：
提問的好地方：
—————————————————會(huì)持續(xù)更新的分割線—————————————————
樓主的背景是平面設(shè)計(jì)出身，文章以我自己的觀點(diǎn)和背景出發(fā)，此文包涵的內(nèi)容絕逼是冰山一角，有任何建議和經(jīng)驗(yàn)的豆友們請(qǐng)留言交流！祝大家學(xué)習(xí)愉快！
—————————————————2015.5.26更新———————————————————
其他關(guān)于網(wǎng)頁設(shè)計(jì)的鏈接有興趣可以戳：
http://www.douban.com/note/498772964/—————————————————2015.10.18更新———————————————————
很多人都會(huì)質(zhì)疑為什么設(shè)計(jì)師要學(xué)代碼，程序員為什么要學(xué)視覺設(shè)計(jì)？請(qǐng)看下圖。
“懂藝術(shù)的程序員和會(huì)編程的美術(shù)師造就了Monument Valley?！?
