① web前端怎麼入門學習
隨著移動互聯網的發展，web前端逐漸受到企業的重視，前端開發人員的薪資也水漲船高，越來越多的人看好前端行業的發展，想要轉行加入。下面，給大家分享一份web前端學習路線，希望閉拆對初學者有所幫助。
在整個技術領域，Web前端開發永遠站在一線直面用戶體驗，已成為當下互聯網行業緊俏的高端技術崗位。目前Web前端薪資水平高，職業前景廣闊，崗位缺口大，就業口徑寬，想通過學習Web前端開發，想進入到該行業工作的人越來越多。Web前端入門相對簡單，但是學習後期會越來越難，也無法掌握Web前端的精髓，這就需要專業的老師對其系統知識的傳授與點撥。
對於零基礎的人而言，要怎麼學習web前端呢？
1、 前端頁面重構。主要內容為PC端網站布局、Photoshop 工具及切圖、H5移動端網頁布局、HTML5CSS3新特性與交互。學習目標是完成PC端網站布局，可實現響應式布局，一套代碼適配 PC 端、移轎瞎棗動端、平板設備等。
2、 前後端網頁交互。主要內容為JavaScript語法全面進階、ES6 到 ES10 新語法實踐、jQuery 應用及插件神鎮使用、設計模式及插件編寫、封裝JS工具庫及Web APIS、AJAXPHPMySQL前後端交互、前端工程化與模塊化應用以及PC 端全棧開發項目等。學習目標是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建項目及開發項目。
3、 Node.js前端框架。主要內容為Node.js 全面進階、Koa2MongoDB搭建服務、Vue.js 框架、React.js 框架、小程序雲開發與小程序框架、原生APP與混合APP、數據可視化與桌面應用等。學習目標是掌握桌面應用及可視化大數據，實現復雜數據展示類項目，能夠獨立完成前後台相關功能，勝任HTML5全棧開發工程師職位。
很多學習web前端的朋友都希望在學成後能找到一份滿意的工作，所以我們在學習過程中一定要注意實戰經驗的積累，如果你所學的東西對企業沒有用，那你所做的一切都是無用功。
互聯網的發展，使得Web前端開發工程師對於大多數人來說是個全新的職業，在國內乃至國際上真正開始受到關注和發展的時間不到10年。Web前端開發作為網頁製作的一個細分行業，在名稱上有很明顯的時代特徵。
② 前端開發設計
1.用於UI設計的Sketch app
Sketch正在迅速取代Photoshop，用於從低保真線框到高保真模型和設計圖標的所有的UI設計任務。
Sketch app是一個專為web和移動設計人員製作的Mac應用程序。它的功能，靈活性和速度滿足了你對於一個輕量級，易於使用的軟體包的想像。有了這個app，你就可以專注於創作最佳的設計了。
它提供了一個順暢的工作環境，為任何界面提供工藝化的矢量元素，而且還有你想從Photoshop得到的許多功能，瞎蘆如文本效果和圖層樣式。
如果Sketch能夠繼續提供最佳的UI設計體驗，那麼它在2016年及以後必然還會繼續保持輝煌。
2.基於瀏覽器的IDE
桌面IDE已經存在了幾十年，從Notepad到Xcode和visual Studio。IDE通過提供建議和語法高亮等功能使得我們可以卜燃更容易地編寫代碼。在IDE中寫代碼非常簡單，而且很易於閱讀。
但傳統的IDE是作為桌面應用程序發布的。從過去的幾年裡，基於瀏覽器的雲IDE發生了戲劇性的變化。除了web瀏覽器，我們不再需要任何軟體，因為瀏覽器型神虛允許設備操作來自於任何有互聯網接入的計算機的代碼。
雲IDE的功能更像是web應用程序，你可以保存代碼到你的帳戶進行共享或個人存儲。CodePen是目前最流行的IDE，支持HTML/ CSS/JS，具備像Jade/Haml 和LESS/SCSS一樣自定義的預處理。
CodePen主攻web前端。它可以顯示你最近的創造，並從其他網路資源上得到反饋。為惱人的bug建立一個測試案例。你還可以從CodePen上為你的項目找到設計模式和靈感。
3.card layouts（卡片布局）
網站的卡片布局在幾年前通過Pinterest而普及，從此成為了內容繁多網頁的趨勢。免費插件，如jQuery Masonry可用來模仿這種布局風格，它的動畫卡片可適應不同的高度和寬度。
卡片布局最適合用在信息很多卻又希望能被瀏覽的頁面。Google Now就使用卡片布局來為它的app做廣告。
你可以將卡片式布局看成是很多動態的網格，網格中只呈現最簡明的重要內容，這些內容條目組合在一起就形成了基本的列表。在線雜志就是完美的例子，如UGSMAG和The Next Web，就使用了卡片布局來展示其最新懂得帖子和內容。
4.自定義的解說視頻
形狀各異的組織都趨向於自定義解說視頻。使用動畫，例如Crazy Egg來製作這些視頻。即使如此，不同的視頻依賴於真正的鏡頭，例如Instagram Direct。
解說視頻的目的是說明產品或服務是如何工作的。訪問者有可能在瀏覽了一系列功能之後，依然不知道如何操作這個產品。而可視化的視頻則可以在短短幾分鍾的時間內一一說明功能，並涵蓋所有重要的內容。最關鍵的是人們喜歡觀看視頻而不怎麼喜歡閱讀文章。他們可以很容易地從視頻中明白你想表達什麼。
如果你想自己嘗試做一個自定義的解說視頻，那麼可以閱讀Udemy課程。這是一個側重登陸頁面設計視頻講解的深入學習課程。Udemy課程不僅僅說明了如何使用動畫視頻軟體，它也會告訴你如何使用視頻來吸引和隱蔽訪問者。
5.實況產品預覽
登陸頁面設計因網路速度的提高和瀏覽器功能的擴大，而發生了令人難以置信的改變。我注意到一個重要趨勢是，就是主頁或自定義登陸頁面增加了實時產品預覽。
以Slack的產品頁面作為例子。一個視頻演示和矢量圖形覆蓋了它的界面。這些產品預覽是讓潛在用戶第一眼就知道產品是如何操作的。
不只是消息，所有的文件，圖像，PDF文件，文檔和電子表格都可以放到Slack，和你想要分享的任何人共享。你可以添加註釋，標注星號供以後參考，這一切完全都是可以搜索的。
6.自動化任務運行器
前端開發的世界，隨著一堆針對網站創新而出現的新的最佳實踐，發生了巨大的改變。任務運行器/構建系統，例如Gulp和Grunt，替代了以前事先需要大量手動去完成的任務，越來越被我們廣泛使用。
自動化是快速周轉和高質量代碼的命脈。眾所周知，機器不會出錯，所以自動化程度越高，產生的問題越少。
這些工具基本上運行的是JS代碼，可以自動化實現部分工作流程——無論是自定義的JS代碼還是其他人寫的腳本。
7.用於設計的協作工具
即時消息和群聊已經出現了十多年。人們喜歡這個功能，並在今後他們可以繼續使用此功能。然而，這些資源在傳統上依賴於純文本附加文件的一些功能。
但是，我們在討論的是未來，未來一個新出現的趨勢是，在聊天應用程序中共享實時設計文檔。Notable就是其中一個例子，創新和注釋可以被分層在文檔的頂部。通過快速迭代它提供了更好的界面。從草圖到完全編碼的網頁，Notable讓團隊在設計過程的每一步得到更快的反饋。
Slack是當下最流行的聊天應用程序，支持許多類似的功能。
8.響應式前端框架
前端框架，例如Bootstrap，已經存在了相當長的時間，並將繼續展現其價值。響應式設計，受其成為框架方式的制約，可以成為前端代碼，而不是僅僅只是後端（Django，Laravel，等等）。
邁入2016年，我認為我們會閱讀到更多關於響應式前端框架以及它們在web項目中的價值的內容。並且在接下來的一年時間里，可能會發布很多前端框架的app，比現在的功能更強大。許多設備正在急切等待Foundation 6以及Bootstrap4公共V1版本的發布。
9.更關注UX設計
UX設計是通過改進可用性，可訪問性，以及用戶和產品之間互動產生的愉悅感來加強用戶滿意度的過程。
用戶體驗設計領域將隨著更多設計師和開發者的關注而繼續快速增長。UI設計是UX設計的一部分，但不是最終目標。UI是手段而不是目的，最終目的是提供一個夢幻般的用戶體驗。
目前，針對這些目的的資源有UX Stack Exchange和free UX ebooks。如果你還沒有涉獵用戶體驗，那麼現在是學習和了解UX原則如何應用到所有數字界面窗口的最佳時機。
10.支持觸摸的網站功能
智能手機瀏覽器，支持所有站點的觸摸功能，以保持reverse similarity。我們也可以看到更多的插件和自定義元素添至站點，關注觸摸事件的特定對象。
我們希望網站可以實現觸摸功能。而且這種網站也會因為其獨特的功能而提升訪問量。如Photoswipe和Dragend.js等內置的插件可以處理觸摸屏上的滑動和點擊手勢。web開發人員不僅要會構建響應式網站，還得能構建具備觸摸功能的網站。
這些插件提供了觸摸功能，但是網站還需要具備其他的手勢功能。如果你多搜索一下的話，你會發現一些真正令人印象深刻的，針對web的，內置的，純粹依靠觸摸事件的功能。
這些就是3.0時代的Web設計趨勢，它們的到來和發展將使得構建網站變得更容易和更簡單。