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