一、Coursera

https://coursera.與全球一流大學(xué)和機構(gòu)合作提供在線課程，課程偏向概念和理論，包含一些ux設(shè)計、交互設(shè)計、圖形設(shè)計；

二、Lynda

https://lynda/

包羅萬象的學(xué)習(xí)網(wǎng)站；商學(xué)、軟件、技術(shù)等，為不同的用戶提供不同的設(shè)計基礎(chǔ)和設(shè)計工具方面的課程；

三、Skillshare

https://skillshare/

這個網(wǎng)站更加注重工具技能的共享，這里有提供創(chuàng)意和開發(fā)教育方面的課程。網(wǎng)站里還提供眾多設(shè)計師和設(shè)計創(chuàng)意的短視頻；

四、Envato

https://envato/

較純粹的設(shè)計教學(xué)網(wǎng)站，注重一步一步的教會用戶學(xué)習(xí)使用設(shè)計工具；

五、HH Design

https://hhdesign-la/

這是一個設(shè)計反饋網(wǎng)站，可以讓眾多設(shè)計師交流自己的看法，并且有很多網(wǎng)絡(luò)社區(qū)可以供設(shè)計師們使用，可以說是一個功能相當(dāng)豐富的軟件了；

近幾年Web前端框架層出不窮，比如 React, Vue, AngulaJS等吸引了大量的注意力，前端技術(shù)發(fā)展勢頭迅猛，各大互聯(lián)網(wǎng)公司也越來越重視前端開發(fā)，前端開發(fā)再也不是過去那種按照設(shè)計圖做靜態(tài)網(wǎng)頁，再隨便寫點jQuery的職位了?，F(xiàn)在，市場上對于前端開發(fā)的需求越來越大，我們經(jīng)常聽說前端開發(fā)入門難度低，但學(xué)習(xí)前端開發(fā)究竟需要多長時間呢？學(xué)多長時間就能找到工作賺到錢？結(jié)合了周邊同事和自身的經(jīng)驗來談?wù)剬W(xué)習(xí)網(wǎng)頁開發(fā)到底需要花多長時間。

Note：一定要下定決心，并且要堅持。

1. 網(wǎng)頁設(shè)計的基本概念和理論知識（10天）

在學(xué)習(xí)制作網(wǎng)頁之前，必須掌握網(wǎng)頁設(shè)計的基本概念和理論知識。什么是靜態(tài)網(wǎng)頁？什么是動態(tài)網(wǎng)頁？網(wǎng)頁的整體布局是什么？網(wǎng)頁設(shè)計的原則是什么？網(wǎng)頁基本構(gòu)成要素是哪些？基礎(chǔ)的網(wǎng)頁設(shè)計概念都不了解，那么對于之后要制作網(wǎng)頁更是難上加難。我認為利用10天時間了解網(wǎng)頁設(shè)計的基本概念和理論是必不可少的，時代在不斷變化，網(wǎng)頁設(shè)計也會更新?lián)Q代。所以了解基礎(chǔ)知識是為了之后設(shè)計制作打好基礎(chǔ)。當(dāng)然，還需要了解基礎(chǔ)的SEO知識。網(wǎng)上的視頻教程個人建議還是少看，一本好的書絕對讓你受益匪淺。推薦幾本好書供大家學(xué)習(xí)：

制作網(wǎng)頁設(shè)計

1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT

如何讓網(wǎng)頁設(shè)計更加功能化

2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT

前端開發(fā)

3. LEARNING WEB DESIGN: A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINS

可用性：

4.DON’T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG

2. CSS+HTML+JavaScript（1個月）

相對來說， HTML是最簡單的，只是標(biāo)簽語言， 格式規(guī)范; CSS相對來說復(fù)雜一些, 有瀏覽器的兼容問題等。但二者組合就能實現(xiàn)很多頁面效果, 里面涉及的變化太多了。如果你只會基礎(chǔ)語法, 而沒有實際去寫過, 那樣是很難真正掌握的。我在這里說說我的經(jīng)驗吧，我一開始學(xué)習(xí)的Bootstrap，簡單點說，就是給現(xiàn)有電商項目套上Bootstrap做的響應(yīng)式皮膚。Bootstrap確實挺好上手，靠著官網(wǎng)的手冊，基本上遇到的問題都能自己解決。

JavaScript 也沒有那么難，你要知道Brendan Eich創(chuàng)建JavaScript語言一共就用了10天時間，所以它的語法并不復(fù)雜，相信你很快就能掌握基本語法。你可能還需要學(xué)習(xí)一些常見的庫的API，這個可以根據(jù)你的需求來安排，你要用到什么庫，就學(xué)習(xí)它的文檔。

我覺得最好的網(wǎng)頁開發(fā)學(xué)習(xí)資料就是 Mozilla Developer Network(https://developer.mozilla.org)的文檔了，涵蓋了HTML, CSS, JavaScript的方方面面，不論是初學(xué)還是老手查閱都是非常有用的，推薦給大家。

3. 開始制作網(wǎng)站（1個月）

了解了基本的知識，做了一些小練習(xí)之后，我認為最重要的是盡早參與實際項目，這樣才能得到真正的鍛煉。使用 Jekyll + GitHub Pages 為自己搭建一個靜態(tài)博客是一個很好的開始，只需要簡單的配置，不需要任何后臺開發(fā)，幾乎完全是前端開發(fā)。

建站的時間取決你自己對網(wǎng)站完成的滿意度，如果參考模板， 那么幾個小時內(nèi)就可以搞定了；如果是要獨立開發(fā)一個新的網(wǎng)站又要內(nèi)容全面好看，1個月是跑不掉的，甚至需要更長時間。

4. 工具軟件學(xué)習(xí)（半個月）

工具的掌握程度完全靠個人的領(lǐng)悟能力和學(xué)習(xí)，網(wǎng)上有很多關(guān)于以下這些工具的教學(xué)視頻，跟著學(xué)會事半功倍的。需要學(xué)習(xí)的基本軟件：

編輯器：Sublime Text

初學(xué)者我不建議立即使用強大的 IDE，先使用編輯器有利于學(xué)習(xí)。Sublime Text 是一款我個人非常喜歡的編輯器，界面優(yōu)雅，操作流暢，自動支持語法高亮，還有豐富的插件，你也可以試試。

設(shè)計出圖、切片：Photoshop

Adobe Photoshop，簡稱“PS”，是由Adobe開發(fā)和發(fā)行的圖像處理軟件，Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像，使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作，PS有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。Photoshop非常專業(yè)，也稍顯復(fù)雜，是專業(yè)的平面圖片設(shè)計人員必須掌握的一款工具。作為前端開發(fā)，你需要跟設(shè)計師緊密配合，學(xué)習(xí)一些 PS 知識會對你之后的開發(fā)更有幫助。

原型設(shè)計：Mockplus（時間成本最低）

是一款上手非常簡單的網(wǎng)頁原型設(shè)計工具，通過拖拽就你完成一個簡單的交互，項目類型諸多，有自由項目，網(wǎng)頁項目，自定義項目，當(dāng)然還有APP項目。網(wǎng)頁項目最大的尺寸為3000*6000，你可以任意設(shè)計都沒問題。200個封裝組件和3000個圖標(biāo)可供使用，最近新出的格子功能更是方便使用，減少了很多重復(fù)設(shè)計的時間。

掌握一些原型設(shè)計知識絕對非常有必要，這是我投入最少卻收益最多的事情之一，我強烈建議你嘗試一下Mockplus，對之后在團隊工作的溝通會非常有幫助。

5. 學(xué)習(xí)設(shè)計知識（持續(xù)）

前端開發(fā)是一個直接面向用戶的職位，跟后端開發(fā)不一樣，你的成果是用戶直接可以看到的，我認為提高自己的審美，多掌握一些設(shè)計方面的知識，把握當(dāng)下流行趨勢和動向也是很有必要的。而這一過程是不能用具體時間來衡量的，需要不斷持續(xù)吸收新的東西才能設(shè)計出理想的網(wǎng)站。這里有15個最好的網(wǎng)頁設(shè)計博客資源可供大家每日閱讀，我個人還是最喜歡medium。UI設(shè)計資源網(wǎng)站相信大家都了解了，dribbble和behance等都是每日必逛，必定是受益良多。

總結(jié)：

軟件開發(fā)是一個需要持續(xù)學(xué)習(xí)的過程，盡管前端開發(fā)入門難度低，但是近幾年來前端開發(fā)的復(fù)雜度越來越高，對個人素質(zhì)的要求也越來越高。本文只是針對想要入門前端開發(fā)而找不到方向的人，經(jīng)過這個過程后，你可以找到一個初級的開發(fā)職位了。不論做什么事情，學(xué)習(xí)是根本，希望這篇文章能幫助到新手。

如何自學(xué)網(wǎng)頁設(shè)計？在眾多行業(yè)中選擇什么非常重要。想轉(zhuǎn)業(yè)的朋友未必全都會下決心去學(xué)習(xí)一兩個月然后馬上轉(zhuǎn)行。很多都是要先自學(xué)入門，覺得適合自己，然后，才敢繼續(xù)下去。

如何自學(xué)網(wǎng)頁設(shè)計？網(wǎng)頁設(shè)計要學(xué)什么？

小編來告訴你：

一、首先。PS及FLASH是必須學(xué)的了。

這個毫無疑問。教程網(wǎng)上也很多。

二、其次。無論你將來用什么語言做網(wǎng)頁，都要先學(xué)習(xí)HTML。

一種很簡單的語言，也是網(wǎng)頁設(shè)計的基礎(chǔ)，找本自己能看懂的教材，瀏覽為主，不用記住所有的概念，只要記住使用原理就行了，這一階段，估計得一個星期，當(dāng)然，有老師教的話應(yīng)該很快了。

這就包括了網(wǎng)頁切圖和p+css，css是網(wǎng)頁制作人員必備的工具，經(jīng)驗是否豐富直接決定你能否勝任網(wǎng)頁前段設(shè)計師的工作。CSS教程也可以在大部分網(wǎng)站中找到。

三、Dreamweaver。

掌握HTML以后，其實你就可以設(shè)計一些簡單的靜態(tài)頁面了，再接下來就是學(xué)習(xí)可視化設(shè)計軟件，有些東西?？梢杂每梢暬缑?，代碼由軟件代替你自動生成，可以大幅提高效率。

------------------------------------------

熱門職業(yè)測試丨30秒測試你適不適合學(xué)網(wǎng)頁設(shè)計：

http://tianhujy/list-93-1.html?wm=tt_ljj_uizg (可復(fù)制到瀏覽器打開)

如何自學(xué)網(wǎng)頁設(shè)計？當(dāng)然，學(xué)習(xí)網(wǎng)頁設(shè)計還是需要掌握一些小小技巧的。小編也順便透露一下，如何學(xué)呢？

一、首先是合適的時間

對于經(jīng)驗的人來說非常的重要。如果一件需要花時間的學(xué)習(xí)任務(wù)超出了你的時間成本，你就不應(yīng)該去碰它，或者換一個更好的方式。轉(zhuǎn)行要考慮目前的狀況及時間成本。比如，你現(xiàn)在一直在學(xué)網(wǎng)頁設(shè)計，不去接觸移動端，但是，很快移動端已經(jīng)覆蓋了大部分用戶了，你之前所學(xué)的電腦端的知識，能比得上人家現(xiàn)在直接學(xué)移動端來的快么？

二、其次是正確的方法是重要的

這個就不多說了，學(xué)習(xí)什么都需要正確的方法。方法不僅是你練習(xí)的方式，還有思考問題的方式，這里強調(diào)的是設(shè)計師快速發(fā)現(xiàn)問題的能力。

三、再著是起跑的地點

理念比軟件操作更加重要。比如：你想自學(xué)網(wǎng)頁設(shè)計，并把網(wǎng)頁視覺設(shè)計師作為自己的職業(yè)發(fā)展，你就應(yīng)該首先了解，一個網(wǎng)站的基本結(jié)構(gòu)，每個結(jié)構(gòu)需要哪些工作崗位，他們的職責(zé)有 何不同，一個網(wǎng)站視覺設(shè)計師應(yīng)該干什么，抓住重點。

四、設(shè)計需要一些小技巧

良好的網(wǎng)頁設(shè)計是件很難實現(xiàn)的事情。一個好的網(wǎng)頁設(shè)計，不僅吸引眼球，也是實用的、直觀的、層級簡單卻足夠復(fù)雜到保持用戶的興趣。字體、色彩、空白與內(nèi)容間的完美平衡可以構(gòu)成一個非常好看的設(shè)計，你的用戶也會再次回來。因此，好的設(shè)計很重要哦?？纯匆恍┬⌒〉募记砂?。

1、要有足夠的空白

空白可以說是設(shè)計中最重要的一部分。它有助于防止用戶在瀏覽網(wǎng)站時變得疲憊，它可以在內(nèi)容中劃出距離，而且它本身也看上去不錯?？瞻撞皇潜仨氂冒咨模?，它僅僅是為其他設(shè)計元素提供間隔和緩沖的空間。

2、不要有太多的字體及色彩

一般一個簡單的網(wǎng)頁設(shè)計，一般字體不超過3種。多則亂。

多重 漸變、幾種鮮艷的色彩和大量有鮮明對比的色調(diào)及飽和度，會破壞你網(wǎng)站的層次和空白概念。

嘗試限制自己只用一種鮮艷的色調(diào)（如藍色），再搭配反相的單色（白、灰、黑）以獲得一個漂亮的搭配。這里強調(diào)下豆瓣的配色。也是我喜歡的顏色搭配。

3、要考慮用戶的分辨率

你的屏幕 分辨率有2560像素，這非常好。但很多人還在屏幕上用1024像素的分率，有些還在用640*480或800*600。雖然這種分辨率的顯示器正在減少，但采用更小的分辨率的手機設(shè)備也來了。

5、要有足夠的文字間距

與空白有關(guān)，文字間距有兩個部分，一個是字距（這個不能用CSS直接調(diào)整，可以通過一些高級技術(shù)解決），關(guān)系到字母之間的空白。一個是行距，可以用CSS直接調(diào)整，關(guān)系到兩行文字之間的距離。這些有助于區(qū)分行與段落，使用戶更容易閱讀文字。

6、網(wǎng)頁色調(diào)，大小之類的不一致

一致性是網(wǎng)頁設(shè)計的關(guān)鍵。它是把網(wǎng)頁設(shè)計組織在一起的方式，可以創(chuàng)造一種緊密結(jié)合的感覺。在網(wǎng)站頁面互相鏈接的情況下，它可以幫助用戶把所有頁面都聯(lián)系在一起。如果你在整個網(wǎng)站持續(xù)改變字體、大小和色彩，用戶很快會覺得不知所措。

---------------------------------THE END-----------------------------------------

如何自學(xué)網(wǎng)頁設(shè)計？給自己制定個學(xué)習(xí)規(guī)劃，會讓你事半功倍：

http://tianhujy/tg-81.html?wm=tt_ljj_wysj