Zi 字媒體

那麼如果高效優雅的學習web呢？註：以下純屬個人觀點，如果不當請指出第一階段、html(5)+css(3)Html和css是基礎中的基礎，但對於很多html標籤和css屬性是平常開發中很難用到的，如果系統的學真的不知道學到猴年馬月，所以學會一些常用的就好了，這些基礎就不用買書了。推薦跟著慕課網在線敲一下代碼，它那裡講的都是一些常用的東西http://www.imooc.com/learn/9第二階段、Javascript Dom在這個階段，你可以學會怎麼用js寫一些網頁特效啊、交互啊之類的。註：這是js裡面最簡單最低級的功能，並不是學會了寫特效就學會了js。推薦書籍：《Javascript DOM 編程藝術》網站資源推薦：http://www.imooc.com/course/list?c=javascript慕課網上有很多小效果的實現，可以跟著熟悉js的語法規則第三階段、Jquery什麼是jquery？Jquery是一個js的庫。以前有朋友問我，為什麼有jquery還要學js，這裡大家要搞清楚，jq只是一個庫，它把一些常用的繁瑣的js方法用自己的方式封裝好，便於我們使用，它強大的地方在瀏覽器兼容，既然提高了兼容性，那麼內部肯定有繁瑣的條件判斷，所以jq的性能會比較偏低。分享之前我還是要推薦下我自己的前端學習群：180-442-230，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，送給大家，歡迎初學和進階中的小夥伴jq的插件有很多，可以實現很多效果。所以jquery也是我們學習的基礎之一。推薦書籍《鋒利的jquery》第四階段、一個UI-庫(bootstrap or other)既然javascript有庫（jquery），那麼css呢？沒錯，一般css的庫叫做ui庫，或者叫做css框架，比如bootstrap，以下簡稱bs，我們學習bs的目的是什麼？1．學習優雅的css命名規範2．學習什麼是可復用的web組件，為什麼要復用這些組件3．提高開發效率Bootstrap中文文檔：學完這些，你也應該入門前端了。學完以上四個部分你應該會：1) 高度還原psd設計稿；（簡稱切圖）附上切圖教程：2) 會熟練使用瀏覽器調試工具Web調試工具：http://www.imooc.com/learn/1373) 看的懂別人寫的網頁，會修修改改如果這些你都會，4k+月薪沒問題進階（以下知識點不分前後）l 移動端頁面製作會寫pc端頁面還遠遠不夠，我們還得會寫移動端頁面：稍微複雜點的flex布局、響應式布局和移動端基礎知識：http://www.imooc.com/learn/494很簡單的rem布局：http://caibaojian.com/flexible-js.htmll 混合APP開發什麼是混合app開發？原生的android、ios應用我們稱之為nativeApp。運行在網頁的app我們稱之為webapp，比如淘寶觸屏版。混合App其實就是原生態App與Web App的結合，簡單說混合App擁有原生App的外殼，內部的展現都是通過Web App的H5技術實現，在通俗點就是可以用html5技術寫一個可以安裝在手機上的應用，這個應用可以擴展一些js功能，比如訪問手機硬體等等。H5+與mui：http://www.dcloud.io/l Javascript高級部分我們之前說過js遠不是寫寫特效那麼簡單，這裡我們學習：a.Ajax什麼是ajax？Ajax就是前端與後台交互，實現數據獲取、非同步請求等等。這方面知識百度很多b.Canvas什麼是canvas？HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像，可以實現很多炫酷的效果，有興趣的同學可以學一學c.H5新特性離線儲存、視頻、音頻。。。等等d.Js面向對象與原型這方面內容很重要，得好好學一學。了解js的原型機制。推薦書籍《jsvascript面向對象編程》《你不知道的javascript》e.Js設計模式如果想深學，可以看一看，推薦書籍《javascript 設計模式與開發實踐》l Nodejs與npm什麼是nodejs？首先，nodejs是一門後台語言，對，後台語言！在node上，我們可以用js語言進行後台的開發。相比較php，node的優點是非阻塞IO處理，採用事件驅動的非同步編程，對前端開發人員很友好，做前端的很容易上手什麼是npm？Npm是nodejs里的一個包管理器，首先得理解模塊化，類似java的package。這些剛開始可以不必深學，但是得知道是幹啥的：Nodejs中文網：http://nodejs.cn/慕課網nodejs視頻：http://www.imooc.com/learn/348l ECMAScript2015ECMAScript2015，也稱es6，下一代javascript語言，雖說是下一代，但是我已經用了好一陣子了。^-^ES6加了很多js新特性，比如解構賦值，promise對象，模塊，塊作用域等等等等。。。一般現有瀏覽器對es6還不是全面支持，但是可以通過一些預編譯，編譯成es5語法格式，讓瀏覽器支持它。阮一峰--《ECMAScript6入門》:http://es6.ruanyifeng.coml 前端自動化又是nodejs這個傢伙，nodejs不僅將前端帶到了後端，也在前端掀起了自動化的浪潮。為什麼要自動化。電腦能完成的為什麼要手動完成，可以實現：圖片無損壓縮Sass，less等css預編譯的編譯與壓縮Js文件壓縮合併自動檢測文件變化，開發時網頁自動刷新對各個模塊的管理......常見的自動化工具有grunt，glup，還有後起只秀webpack。這裡我強烈推薦學習webpack，學成之後你會真正感受到什麼是酸爽。l 前端MVC框架重頭戲來了，會一個mvc框架，是現在前端招聘高級技術人員的基本條件。為什麼我要把這個放在後面，因為學起來並不是很難，繁瑣的是一開始的各種node配置或者文檔的es6語法看不懂，所以的先了解node與es6.現在主流的框架有angular ，react ，vue。Angular和react的社區背景很龐大，一個是谷歌，一個是facebook。而我更佩服的是vue，vuejs的作者是人，名叫尤雨溪，從他的個人項目，到github三萬+star。附上尤大美照一張簡直提高了程序員的平均顏值相比於ng和react，vue更加輕量，更易於學習。當然每個框架都有自己的優點和缺點，具體怎麼學習，自己選擇吧。l Github 和 git如果你是學了幾年計算機專業的學生，連github都不知道的話，那麼我真的不知道你整天在看些啥。Github是最大的開源代碼託管平台，你可以在github上查看一些開源項目，你可以給一個項目貢獻自己的代碼（當然得符合開發規範），你也可以將自己的代碼開源供他人使用。Git是一個分散式的版本控制系統，相比於svn，git可以在離線的狀態下在本地commit做一個版本，當有網的時候在一併push到倉庫。關於git和github的內容可以自行百度