前言javascript
一直想着整理一下關於前端的知識體系和資料,工做忙了些,擠擠總會有的,php
資料不少,就看你能不能耐下心堅持去學了,要多學多敲多想,祝你進步~css
學習以前首先要大概瞭解什麼是HTML ,CSS , JS:html
一句話歸納:HTML 是骨骼, CSS是皮膚, JS只是夾在中間的神經組織!前端
細說的話:vue
HTML是由多種骨頭(標籤)組成的骨架。java
HTML5是更多的新骨頭(標籤),同時去掉了之前以爲很差用的骨頭.node
JS控制單個動做。(擡手,張嘴,放下手,擡腿,轉頭,握拳等)mysql
jQuery是把一組經常使用動做編排成了一個招式。
基礎學習
初學者學習文檔[菜鳥教程]
HTML教程適合初學者[薦]
視頻學習
慕課網[薦] HTML+CSS基礎課程
前端入門
書籍推薦
有哪些關於前端開發技術(HTML、CSS、JavaScript 等)值得推薦的書籍?
前端開發
前端規範
前端編碼規範(4)—— CSS 和 Sass (SCSS) 規範
JavaScript 代碼規範 【new】
ES6 代碼規範【new】
CSS 代碼規範【new】
更多代碼規範【new】
資源分享
前端技能彙總 Frontend Knowledge Structure[薦]
提高學習
CSS
CSS RESET
CSS Hack
[建議推行廢棄ie六、七、8瀏覽器]
不一樣瀏覽器(IE6,IE7,IE8,FF)專用標籤 瀏覽器hack
常見css知識點
CSS預處理SCSS入門篇
CSS預處理LESS入門篇
精通CSS+DIV 網頁樣式與佈局 【書籍】
精通CSS:高級Web標準解決方案(第2版)【書籍】
JS
JavaScript教程 【廖雪峯教程】
前端JQuery系列:入門教程 | 源碼剖析 | 框架設計 | 慕課網教程 byJsAaron
jquery學習 jqueryAPI中文文檔 javascript 設計模式
鋒利的jQuery(第2版) 【書籍】
Js知識點
H5
HTML5+CSS3
HTML5從入門到精通【書籍】
SWIPE JS – 移動WEB頁面內容觸摸滑動類庫[插件]
H5視頻
APP-H5
NodeJs
因Nodejs更新太快,遇到問題學會搜索以及查看github上更新的最新文檔介紹,其所依賴的組件的方法以其github上爲準,同時建議使用mac/linux玩node
Node.js 入門 [薦] 一塊兒學 Node.js nodejs新手指南
VueJs
Vue.js 組件編碼規範 【薦】
優秀Vue組件集成庫
Element [PC]
iView - 一套高質量的UI組件庫 [PC]
Vux2 [H5]
Vue書籍
最佳實踐
基於vue.js重寫Cnodejs.org社區的webapp
Vue.js全家桶高還原網易雲音樂(Windows PC版)
Vue 全家桶 + Mint-Ui 打造高仿 QQMusic,搭配詳細說明
Vue全家桶+Socket.io+Koa2打造一個智能聊天室
AngularJs
Angular書籍
ReactJs
微信公共帳號
7天開發Nodejs微信公共號 密碼: k7h8
微信小程序
【騰訊Bugly乾貨分享】微信小程序開發思考總結——騰訊「信用卡還款」項目實踐
微信小程序全面實戰,架構設計 && 躲坑攻略
VR
Krpano 720yun
PWA
開發工具
puer(快速啓動本地服務localhost)
WEB調試工具---Firebug[firefox]
前端自動化
webpack 【薦】
Webpack【自動化】
webpack深刻與實戰 【video】
Git
GitHub
GitHub入門與實踐 【書籍】
MarkDown
網站優化
圖片延遲加載Lazy Load Plugin for jQuery
頁面重構
先後端分離的思考與實踐[薦]
原理探索
[瞭解原理纔是王道]
技術峯會
騰訊前端大會2017 講師PPT (密碼:ElacBe)
前端面試
切圖
iPhone6和iPhone6 plus的iOS8設計尺寸參考指南
教你iOS APP設計一稿支持iPhone5/iPhone6/Plus
iOS 的 APP 在系統中如何適應 iPhone 5s/6/6 Plus 三種屏幕的尺寸?
交互設計
字體圖標
延伸閱讀
[延伸]團隊管理
[延伸]WebSocket
[延伸]SVN
[延伸]WebApp
[延伸]Hybrid App
[延伸]ReactApp
React.JS中文基礎教程 密碼: zhsp
[延伸]IOS學習
The Swift Programming Language 中文版
[延伸]Android學習
[延伸]團隊合做
[延伸]Java學習
[延伸]PHP
Thinkphp學習視頻 密碼: t65d
[延伸]建站
阿里雲ESC服務 推薦碼5D2D05(結算時首次可9折)
[延伸]Ubuntu學習
[延伸]Nginx
[延伸]Cocos2d
一些文章
程序員如何優雅的掙零花錢 【薦】
知乎問答
[知乎前端大神]
vue,angular,avalon這三種MVVM框架之間有什麼優缺點?
vue、react和angular 2.x誰是2016年的主流?
Web建站技術中,HTML、HTML五、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什麼?
HTML、CSS、JavaScript、PHP、 MySQL 的學習順序是什麼?
有哪些常常被誤用的 HTML、JavaScript、CSS 的元素、方法和屬性?
近來國內外有哪些用戶界面、交互體驗設計優秀的產品?優秀在哪裏?
如今網頁設計中的爲何少有人用 11px、13px、15px 等奇數的字體?
爲何 Web 前端開發不拋棄 HTML 和 CSS,用純 JavaScript 開發?
LABjs、RequireJS、SeaJS 哪一個最好用?爲何?
C、C++、Java、JavaScript、PHP、Python、Ruby 這些語言分別主要用來開發什麼?
在今天,利用 HTML5 開發和發佈大型跨平臺網遊,可行性如何?要解決哪些問題?
如何看待 HTML5 開源遊戲引擎 Egret,HTML5 遊戲開發的前景如何?
前端工程師應該對 HTTP 瞭解到什麼程度?從哪些途徑去熟悉更好?
想深刻了解一下 jQuery 的源碼,可是以爲學習曲線有點陡峭,有沒什麼好的方法或者學習資源推薦?
大神博客
(前端成長路上掉過的坑,栽過的溝,翻過的牆。。。)
前端博客 by張克軍 (考慮到github可能被牆,弄到了個人coding)
2016年
2015年
前端的路,一步一步來
[路漫漫其修遠兮,吾將上下而求索]
CSS不能編程?用Less、Sass、Stylus、甚至直接用 Absurd,框架除了Bootstrap還有不少。JS寫多了很麻煩?jQuery。移動開發?Zepto.js。結構很差?找框架,Backbone.js是MVC,AngularJS和Ember.js是MVVM,Twitter還弄了個事件驅動框架Flight。庫多了要優化加載?RequireJS。
代碼質量成問題?Jasmine、QUnit、Mocha作單元測試。各類瀏覽器都要測?用Karma。測試經過了部署還有問題?持續集成,用Travis CI。用戶行爲也要測?用Selenium 。樣式測試還有Viff 。以爲JS都夠麻煩的?用CoffeeScript。
想作動畫?Canvas或SVG還有CSS3幫忙,幹掉Flash。SVG太難畫?用Snap.svg。想開發遊戲?用Canvas。本身寫FPS過低?用框架,CreateJS.。2D太幼稚?three.js幫你用WebGL開發3D,還不夠給力?asm.js讓你在瀏覽器中擁有虛幻3引擎。
這一堆東西都要配置部署,麻煩,用Grunt,庫太多?用Bower管理,項目開始要建立各類文件文件夾?用Yeoman。開源項目太多了,GitHub.上找,不會?學Git。順便用Jekyll託管博客,不是吧還有Ruby這玩意...SASS也是Ruby寫的,等等Sublime Text是Python寫的,要寫插件?也學一下。調試太難?用Chrome開發者工具,一堆API和功能。
光在電腦瀏覽器上跑不給力?移動開發HTML5,離開網絡就渣了?HTML5離線應用。不如原生應用?用PhoneGap。想調用原生API?開發Firefox OS應用吧。瀏覽器應用也得會吧,Chrome Firefox都有本身的文檔。接着是否是把後端甩了,本身來,裝Node.js,因此還得學點服務器知識,想用npm管理node包?linux技巧shell神馬的也得學。想先後端通吃?再看看http協議。Web精通了?node-webkit 讓你能夠寫桌面程序了,繼續學吧。
想學模塊化開發?看看CommonJS和AMD規範。理解JS有誤差?看看ECMA-262,等等不知道何時第6版就要出了。瀏覽器各不相同,弄不清該怎麼兼容?看看W3C標準,HTML寫出來人看的懂,機器讀不懂?要SEO,要支持殘障人士?看HTML語義化,全會了但IE就是不支持?叫不出名字的瀏覽器尼瑪連JS都不知道是啥?漸進加強。想一次把各類設備全搞定?響應式設計。
而後上面這些不過是一些討巧的小技術。公司作什麼業務的?瞭解一下行業信息。面向大衆的產品?交互設計。美工不給力?UI設計。外包和諮詢?設計模式、重構方法、算法、數據結構。知道軟件工程嗎?瞭解一下敏捷開發,或許還能夠試試TDD、ATDD、BDD。
看了這麼多東西,第一反應是否是求中文文檔?學英語去吧。
這些也不過是我目前所能看到的一小部分,並且每段基本都是到了一個邊界,並非沒得學了,而是繼續學又是另外一片天地。真心但願有人能幫我填補知識盲區。另外,我僅把一些知識點串起來,不全或不對的地方請見諒。
關於做者
——add by wwj 2014.7
——update by wwj 2014.9
——update by wwj 2014.12.31
——update by wwj 2015.2.10
——update by wwj 2015.7.26
——update by wwj 2015.10.7
——update by wwj 2016.1.8
——update by wwj 2016.12.8
——update by wwj 2017.01.12
——update by wwj 2017.08.12
下架內容備份區域:
常見Js插件:
性能卓越的 js 模板引擎artTemplate
走進svg的世界 百度腦圖 svg巔峯之做
UI框架:
weui[H5]
aui[H5]
frozen-ui[H5]
Sui[H5]
zui[PC]
Jquery.mobile[H5]
require.js
Sea.js
Avalon.js