前端工程師必備收藏：學習資源全網羅

　　前言：

　　站在巨人的肩膀上，确實能讓我們看得更遠。而我認為學習的不二法門就是不斷模仿，但是一定要有自己的思考。拿來主義如果少了思考，就會變得毫無意義。以下列出一些前端優秀網站，大家自行取其精華，批判吸收。

　　

　  學習站點資源

• Adobe出的，Adobe其實是html5非常忠實的擁抱者。官方社群有非常多的html5資源 http://beta.theexpressiveweb.com/
• can i use，非常好，誰用誰知道 http://caniuse.com/
• 前端觀察站，騰訊的前端技術，挺有含金量 http://www.qianduan.net/
• html5和css3開發，還是Adobe http://www.adobe.com/cn/devnet/html5.html
• MDN，mozilla官方出品的HTML5資料庫，我認為是地球上最好的前端資料庫 https://developer.mozilla.org/zh-CN/
• css3參考手冊線上版，很全 http://css.doyoe.com/
• 前端網（W3Cfuns） - 前端開發工程師互動平台 http://www.w3cfuns.com/
• 站酷 (ZCOOL) - 設計師互動平 http://www.zcool.com.cn/
• 優設-UISDC: 優秀網頁設計聯盟-SDC-網頁設計師交流平台-聽講座，聊設計，找素材，盡在優設網 http://www.uisdc.com/

　 CSS3媒體查詢（Media Query）

• css3媒體查詢官方文檔 http://www.w3.org/TR/css3-mediaqueries/
• css3媒體查詢官方中文文檔 http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2
• 前端觀察站的文章 http://www.qianduan.net/media-type-and-media-query.html

　 CSS3彈性盒模型（伸縮盒）

• 使用CSS彈性盒MDN https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_flexible_boxes
• 官方的CSS彈性盒模型 http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans

　 viewport與裝置自适應

• CSS Device Adaptation官方文檔 http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule
• ATA技術社群，viewport筆記 http://www.atatech.org/article/detail/12233/786

　 CSS3動畫

• CSS3 Animation http://www.w3cplus.com/content/css3-animation
• CSS3動畫線上測試工具（騰訊團隊弄的）http://ecd.tencent.com/css3/tools.html
• CSS3 Transitions, Transforms和Animation使用簡介與應用展示 http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms%E5%92%8Canimation%E4%BD%BF%E7%94%A8%E7%AE%80%E4%BB%8B%E4%B8%8E%E5%BA%94%E7%94%A8%E5%B1%95%E7%A4%BA/

　 JavaScript性能優化

• Javascript高性能動畫與頁面渲染 http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering
• 前端工程打開速度優化的循序漸進總結 http://www.cnblogs.com/zhengyun_ustc/archive/2013/05/09/frontendoptimize.html

　  使用者體驗

• DIVCSS5 - DIV+CSS布局教程學習與CSS資源分享平台 http://www.divcss5.com/
• FEX 做最專業的前端 http://fex.baidu.com/
• GMU - mobile UI http://gmu.baidu.com/
• IXDC－國際體驗設計協會 | 引領中國互動設計行業發展 http://ixdc.org/
• UEhtml設計師交流平台 網頁設計 界面設計 http://www.uehtml.com/
• UI設計_UI_UI設計師-Uimaker-專注UI設計 http://www.uimaker.com/
• UI中國-專業界面設計平台 www.ui.cn/
• 暢遊視覺設計中心 http://vc.changyou.com/

　工具類

• 線上工具 —— 開源中國社群 view-source:http://tool.oschina.net/
• Placehold.it-圖檔占位符 http://placehold.it/
• CSS 圖檔拼合生成器-css_sprite http://cn.spritegen.website-performance.org/

　 阿裡

• Iconfont-阿裡巴巴矢量圖示庫 http://iconfont.cn/
• 阿裡巴巴（中國站）使用者體驗設計部部落格 http://www.aliued.cn/
• TaoBaoUED | 做地球上最好的 UED http://ued.taobao.org/blog/
• 一淘-UX-使用者體驗中心 http://ued.alimama.com/

　 百度

• 百度MUX http://mux.baidu.com/
• 百度搜尋使用者體驗中心 | 建立搜尋引擎的極緻使用者體驗 http://vc.changyou.com/index.shtml

　　 

　 騰訊 

• TGideas-騰訊遊戲官方設計團隊 http://tgideas.qq.com/
• 騰訊CDC http://cdc.tencent.com/
• 騰訊ecd – 電商使用者體驗設計部 E-Commerce User Experience http://ecd.tencent.com/
• 騰訊ISUX – 社交使用者體驗設計 – Better Experience Through Design http://isux.tencent.com/
• 騰訊MXD移動網際網路設計中心 http://mxd.tencent.com/
• 騰訊alloyteam http://www.alloyteam.com/

　 網易

• 網易使用者體驗設計中心 http://uedc.163.com/
• 網易nec-更好的CSS樣式解決方案 http://nec.netease.com/

　 新浪

• 新浪UED | 一個關注使用者體驗、關注工作流、關注作品品質的有愛團隊 http://ued.sina.com/
• 微網誌UDC | 讓設計無“微”不至 http://udc.weibo.com/

　 最後是我強烈推薦的部落格！

• 張鑫旭的個人部落格_web前端技術文章 http://www.zhangxinxu.com/wordpress/ （讓我學到了很多很多）
• 海玉 http://www.hicss.net/

 　　也歡迎把好的網站 & 個人blog推薦給我。