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

Codecademy

作為一款非?？岬脑诰€編程學習網站，它向用戶提供了一種全新的學習方式。在基于網絡互動編程教程的基礎之上，手把手幫助用戶了解編程的基本原理，體味Codecademy的趣味性學習。

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

CodePlayer

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

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

Codepen

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

CSSdeck

和CodePen差不多的一個站。

RunJS

國內的類似站。

CodeDrops

優秀的英文教程站。

NetTut+

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

W3CPlus

國內的優秀教程站。

HTML5Rock

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

Red Team Design

Hakim

（自備梯子）

WebStuffShare

（自備梯子）

SitePoint

Tutorialzine

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

CSS Wizardry

Script Tutorials

Gotoandlearn

（自備梯子）

一個不錯的視頻教程站。

幫你進步提高的在線學習加油網站合集！

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

了解業內趨勢，學習最新技術的10個好去處！
《精挑細選！值得設計師天天看的10個設計類網站》

想變得優秀，就跟著他們混！
《知己知彼百戰不殆！程序員常去的14個頂級開發社區》

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

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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