編者按：學習前端知識太過乏味木有挑戰(zhàn)？整天對著w3school打瞌睡？有一個很棒的觀點與你分享：學習一門技術(shù)最佳的方法就是把它用起來！如果你已經(jīng)有了一點前端基礎(chǔ)知識，但缺少實戰(zhàn)經(jīng)驗，今天這組網(wǎng)站就太合適了，全都是集實戰(zhàn)與教學為一體的綜合性前端學習網(wǎng)站，收藏起來！

Codecademy

作為一款非常酷的在線編程學習網(wǎng)站，它向用戶提供了一種全新的學習方式。在基于網(wǎng)絡互動編程教程的基礎(chǔ)之上，手把手幫助用戶了解編程的基本原理，體味Codecademy的趣味性學習。

不僅如此，它還支持JavaScript、HTML和CSS、Python這四種語言呦，超贊的！

CodePlayer

它的優(yōu)點是你可以看到作者是怎樣一個個字母把代碼打出來的。

有可以看高手寫代碼的網(wǎng)站，就有可以看高手一筆一劃創(chuàng)作的網(wǎng)站！《超贊！有哪些很少為人所知，但是很有意思的網(wǎng)站？》

Codepen

這里面有很多很酷的特效，而且你還能看到它們的源代碼。

CSSdeck

和CodePen差不多的一個站。

RunJS

國內(nèi)的類似站。

CodeDrops

優(yōu)秀的英文教程站。

NetTut+

這個站不僅有很多很棒的教程，還有關(guān)于前端最新的資訊，強烈推薦！

W3CPlus

國內(nèi)的優(yōu)秀教程站。

HTML5Rock

也是一個非常棒的前端教程網(wǎng)站, 有些文章還有中文版的哦。

Red Team Design

Hakim

（自備梯子）

WebStuffShare

（自備梯子）

SitePoint

Tutorialzine

這個站的教程也非常好，同樣強烈推薦。

CSS Wizardry

Script Tutorials

Gotoandlearn

（自備梯子）

一個不錯的視頻教程站。

幫你進步提高的在線學習加油網(wǎng)站合集！

網(wǎng)站精選！自學設(shè)計的十佳站點！
《自學加油站！免費在線學習平面設(shè)計的頂尖網(wǎng)站TOP 10》

了解業(yè)內(nèi)趨勢，學習最新技術(shù)的10個好去處！
《精挑細選！值得設(shè)計師天天看的10個設(shè)計類網(wǎng)站》

想變得優(yōu)秀，就跟著他們混！
《知己知彼百戰(zhàn)不殆！程序員常去的14個頂級開發(fā)社區(qū)》

原文地址：zhihu
作者：@糖醋陳皮

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量83萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：