國內外有哪些好的前端實戰網站？

12-07

本人最近在學習前端，目前僅僅是在HTML CSS起步階段。想了解一些綜合性強的網站提供學習。w3school這些都已經有了。有沒有實戰綜合性強點的？求推薦，比如一個效果，他會給你提供源代碼以及DEMO演示學習。或者說有好的素材供你學習！坐等答案

last update: 2015/3/28
最新更新的會放到最上面

Learn to Code HTML amp; CSS

Learn to Code Advanced HTML amp; CSS

NavNav - 90+ Responsive Navigation Bar Menu Tutorials, Examples, and Demos (CSS, jQuery, JavaScript)

http://codyhouse.co/library

Gibbon - Playlists for Learning

這個站是我在下面的 http://lesslinks.com 里找到的，我覺得這個站很好所以特意列出來。

http://www.lesslinks.com/

Queness - Design Inspirations, jQuery Tutorials and Web Design amp; Development Community

How to keep up to date on Front-End Technologies

這裡面有個 2. Find the best resources 有很多前端站，我懶得列重複大家自己進去看吧。

CodePlayer: http://thecodeplayer.com/

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

（有評論說這個形式挺好的，但是代碼規範不是很好，不太推薦新手。我把他說的在這裡備註一下。這個請自己分辨，我也沒法去一個個看然後評論是否「符合規範」）

Codepen: http://codepen.io/

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

CSSdeck: http://cssdeck.com/

和CodePen差不多的一個站..

RunJS： http://runjs.cn/square

國內的類似站

CodeDrops: http://tympanus.net/codrops/

優秀的英文教程站

NetTut+: http://net.tutsplus.com/

這個站有很多很棒的教程和資訊，強烈推薦

W3CPlus: http://www.w3cplus.com/

國內的優秀教程站

HTML5Rock: http://www.html5rocks.com/zh/tutorials/

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

Red Team Design: http://www.red-team-design.com/

Hakim: http://hakim.se/experiments

WebStuffShare: http://www.webstuffshare.com/

SitePoint: http://www.sitepoint.com/

Tutorialzine: http://tutorialzine.com/

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

Home – CSS Wizardry

Script Tutorials

gotoandlearn.com

一個不錯的視頻教程站

平時收集的一些有關UED的團隊和個人博客
/*********************************這次真的是搬運工，原文轉載自藍色理想********************/

前端團隊推薦
百度fex FEX 做最專業的前端
阿里巴巴 UED -- 我們設計的界面，並沒有幾十億的流量，但每天來自上百個國家的百萬商人在使用著。
阿里巴巴中國站UED -- 阿里巴巴中國站UED成立於1999年，全稱是用戶體驗設計部（User Experience Design Department），是阿里巴巴集團最資深的部門之一。
支付寶前端開發 -- 支付寶前端開發車間。
淘寶UED -- 淘寶網用戶體驗團隊。
淘寶MED -- MED(Marketing Experience Design). 是淘寶營銷體驗設計部門，為淘寶網的營銷產品做體驗設計。
口碑UED -- UED(User Experience Design) 中文意思就是用戶體驗設計。
百度MUX -- MUX(Mobile User Experience) 百度無線用戶體驗部。
百度泛用戶體驗 -- 泛用戶體驗平台，是以"用戶體驗"為核心的跨專業分享平台。
百度聯盟用戶體驗中心 -- 百度聯盟事業部用戶體驗團隊官方博客。
盛大遊戲UED -- 專註用戶體驗，改變生活，讓互動娛樂更精彩。
攜程旅遊UED -- 這是一個血液中流淌著創意和活力的團隊，在越來越關注嚴謹和靈活的過程中成長起來，我們對前端的需求如此強烈
騰訊CDC -- 全稱是Customer Research User Experience Design Center（即用戶研究與體驗設計中心）作為騰訊的核心部門之一.
騰訊ISD -- ISD Webteam是一個設計團隊,即騰訊互聯網業務系統網站組。
騰訊ISUX -- 騰訊 ISUX 全稱騰訊互聯網用戶體驗設計部 (Internet Service User Experience)，於2011年3月8日正式成立，前身為 ISD Webteam 網站組。
騰訊WSD -- 騰訊用戶體驗設計團隊. 設計無線,快樂無限。
騰訊Flash Team -- 這裡有一群可愛的Flash娃，他們熱愛ActionScript開發～
騰訊soso團隊博客 -- soso更懂你。
財付通TID -- Tenpay Innovation Design, 財付通設計中心。
5173 UED -- 5173用戶體驗設計團隊（User Experience Design），簡稱UED，成立於2009年。
19樓UED -- 19樓 UED團隊。
人人FED -- 我們來自人人網，FED是"Front End Develop and Design"的縮寫。
網易郵箱UI團隊 -- 網易郵箱UI團隊。
網易UED -- 我們的團隊博客，關注用戶體驗設計、關注web前端開發。
網易UEDC -- 網易用戶體驗設計中心（User Experience Design Center），簡稱"設計中心（UEDC）"，成立於2008年底。
搜狐UED -- Sohu UED Team就聚集著這樣一群人，執著於為用戶提供更好的產品和體驗，哪怕是對一點點小細節的精益求精。
新浪UED -- 一個關注用戶體驗、關注工作流、關注作品質量的有愛團隊。
愛詞霸UED -- 愛詞霸用戶體驗團隊博客，有關用戶體驗設計和研究的經驗分享。

其它團隊
淘寶搜索 -- 淘寶搜索技術blog
Alibaba DBA Team -- 這裡記錄著阿里巴巴資料庫團隊成員的點點滴滴
淘寶Data -- 淘寶數據平台與產品部，是淘寶核心的數據平台技術和數據產品研發團隊
淘寶DBA Team -- 淘寶資料庫技術團隊
淘寶JAVA中間件團隊 -- 我們是淘寶JAVA中間件團隊。我們為淘寶網構建JAVA底層架構和基礎服務。
Taobao QA Team -- 做測試的行業標準
淘寶核心系統團隊 -- 淘寶核心系統團隊隸屬於淘寶產品技術部，負責淘寶應用基礎平台的研發和搭建
阿里巴巴Data Warehouse -- 阿里巴巴數據倉庫部門主要收集公司內外部所有數據
騰訊TGideas -- TGideas是騰訊遊戲的專業設計團隊
騰訊GDC -- GDC的前身叫GDT(QQGAME DESIGN TEAM),QQ遊戲產品設計中心

個人博客
Kejun -- 就職於豆瓣
Donkey(倔倔) -- 就職於豆瓣
蒙晨(波希米亞) -- 就職於豆瓣
greengnn(老卡) -- 就職於豆瓣
糖伴西紅柿 -- 就職於豆瓣
Fenng -- 曾就職於支付寶
sofish -- 就職於支付寶
白鴉 -- 就職於支付寶
62mm -- 就職於支付寶
伯約(老魚) -- 就職於支付寶
懌飛(圓心,Blank) -- 就職於淘寶
玉伯(lifesinger) -- 就職於淘寶
明城(mingcheng) -- 就職於淘寶
Der(崇志) -- 就職於淘寶
黑妞HAHA -- 就職於淘寶
飛長 -- 就職於淘寶
Vilic -- 曾實習於淘寶(很有前途的90後)
秦歌(Kaven) -- 就職於口碑網
Emu(Stone) -- 就職於騰訊
Ghost -- 就職於騰訊
Yuguo -- 就職於騰訊
臭魚 -- 曾就職於騰訊
艾文王 -- 就職於騰訊
Danger -- 就職於騰訊
神飛 -- 就職於騰訊
pufen(飄飄) -- 就職於騰訊
屈超 -- 就職於騰訊
米隨隨 -- 就職於騰訊
大貓 -- 就職於騰訊
AVENIR(鄭煥義) -- 就職於騰訊
李振文 -- 就職於騰訊
OnLing -- 就職於騰訊
Xiaoxiao -- 就職於騰訊
Seven -- 就職於騰訊
Lerroy -- 就職於騰訊
小李刀刀 -- 就職於騰訊
飛魚 -- 就職於騰訊
Jeanne -- 就職於騰訊
小JOE -- 就職於騰訊
偷米飯 -- 曾就職於騰訊
愚人碼頭 -- 就職於搜道網
子鼠,秀才 -- 就職於百姓網
Adam Lu -- 就職於新浪
林小志 -- 就職於攜程
小灰灰 -- 就職於攜程
smallni -- 就職於攜程
彬Go -- 就職於人人
Rokey -- 曾就職於微軟,網易,金山軟體
Evance(布拉格) -- 就職於阿里巴巴日本
深空 -- 就職於騰訊
代碼人(tomie) -- 就職於騰訊
小爝(龍嘯) -- 就職於淘寶
Aether -- 就職於土豆網
一葉千鳥 -- 曾就職於盛大
7月 -- 就職於Adobe
周裕波 -- 就職於盛大創新院
崔凱 -- 就職於傲遊
勾三股四 -- 就職於傲遊
welefen -- 就職於百度
kent.zhu -- 就職於百度
aoao(嗷嗷) -- 就職於百度
JerryQu -- 就職於百度
胡曉 -- 就職於網易
5key -- 就職於阿里巴巴
yaohaixiao -- 就職於阿里巴巴
Adam -- 就職於Yahoo
slj(申力軍) -- 就職於趕集

推薦前端周刊，原因如下：

收錄了最新的前端技術、教程、實驗、工具；
支持周刊訂閱和在線瀏覽多種方式，做了響應式設計；
採用類似PostRank演算法對內容進行排序，方便瀏覽到最精彩的內容；
對於有熱情投遞內容的同學開發了Chrome瀏覽器插件。

http://webplatform.org
國外的。

http://Lynda.com
各類教程都有，缺點是沒有中文字幕，而且是付費的，不掛VPN或者GAE速度比較慢。不過挺全的，講的也細，能聽懂的話提高特別快。

5iweb網頁特效庫-專註於HTML5、CSS3、js、jQuery、手機移動端等網頁特效的手機與分享。
: 網頁特效庫-html5 css3動畫-banner特效-jquery特效代碼

jQuery插件庫-收集最全最新最好的jQuery插件
jQuery插件庫-收集最全最新最好的jQuery插件

jQuery之家-自由分享jQuery、html5、css3的插件庫
jQuery之家-自由分享jQuery、html5、css3的插件庫
jquery特效,jquery插件庫,jquery代碼,收集最全的jquery插件特效_懶人之家
jquery特效,jquery插件庫,jquery代碼,收集最全的jquery插件特效_懶人之家
jQuery_入門精通教程_w3cplus
jQuery_入門精通教程_w3cplus

Bootstrap後台模板,管理模板,響應式模板,手機模板,jquery特效,微信小遊戲源碼 - jQueryfuns
Bootstrap後台模板,管理模板,響應式模板,手機模板,jquery特效,jquery - jQueryfuns

CodeDrops: http://tympanus.net/codrops/ 強烈推薦

學習 | Codecademy

我也是在起步階段，對HTML，CSS了解一點點，但還有非常多的地方並不理解。
對於我們這些菜鳥級愛好者，選擇一個跟著步驟慢慢來的教程可能會更合適。

在codecademy上，算是複習了一遍HTML和CSS後，現在正在學習JavaScript，進度不斷增加，16%—18%—32%，不知不覺中就把一次練習做完了，挺有成就感的。

建議練習的時候做點筆記，存在evernote上或是其他自己喜歡用的工具上，有空時可以回顧。
忙的時候沒時間練習時，也可以把筆記翻出來看看，也算是複習啦。

HTML JavaScript CSS Snippets | CodeTea.com

百度前端學院

推薦http://www.jscssshare.com，可以在線調試js和css,也可分享給其他人

占坑

codeschool啊，推薦強烈推薦給題主，另外lynda也不錯

辣雞，還不如用http://jsrun.net

慕課網，http://www.imooc.com

我記得日本有一個類似於codepen的網站，很多日本人在上面寫各種效果，記不得名字了，誰知道，麻煩告訴我一聲，謝謝。