學習前端出來社會上就是大概率從事寫代碼工作的了，如果你是一個前端初學者，你可能對前端應用在什么地方感到疑惑。除了“馬里奧”“貪吃蛇”等經典游戲，其他領域好像也找不到前端的蹤跡，那么前端究竟能做什么，下面詳細說說。

第一，企業官方網站的開發與維護。這個應該是最簡單的了，基本上是純靜態頁面的展示，就算有交互模塊，應該也是比較簡單的那種，甚至純 js 使用類似于 oop 的方式就能夠很輕松完成，基礎好的話，甚至可以不依賴 jquery 或者 zepto。

第二，門戶類型網站的開發與維護。例如像搜狐一樣的門戶網站，但是我不確定這種業務線是否還在招人，相對來說也不難，但是如果想開發得好，實現高可維護性和擴展性，還是很考驗開發人員的抽象能力。可以留意看看，這種網站一般分成很多個模塊，每個模塊的展現結構是非常類似的。如何做到可復用性強，對產品需求變更迭代時更加友好，那就很考驗開發人員前端三大語言的設計模式了。

第三，電商網站。例如京東和淘寶，里面不僅有對用戶友好的展現方式，合乎邏輯的交互方式，還會涉及到網站、商品的色彩設計、排版設計、交互設計，雖然可能都由設計師來出方案，但是前端開發同學可以從中學到很多東西。此外，除了單純的展現，你需要考慮更多的東西了。例如，不同端的字體展現，響應式布局，圖片大小，靜態資源緩存，CDN部署，ajax動態數據交互。這些還都是偏純展現的。還會有涉及到個人信息填寫、支付款項、密碼輸入等等，會涉及到一系列的前端安全問題，這部分也是很鍛煉人的。

第四，后臺管理系統。一般這個是給內部人員使用的，所以可以不用考慮太多的兼容性，直接要求統一使用谷歌瀏覽器或者火狐。這時候要考慮更多地是如何與后端進行數據交互的問題。小公司還好，后臺基本沒有精力做微服務，API的設計也不會趨近于原子粒度，基本前端需要什么數據，那就有后臺的API統一提供，前端只管展現，而且將交互做得好一點就行了。如果是大公司又不一樣了，如果后臺做了微服務，而且API的設計粒度很小，那前端為了保持接口的統一，可能就需要加一塊 node 中間層，來聚合不同接口的數據，然后統一返回給前端。還有就是會涉及到敏感權限校驗、角色權限控制、接口讀寫權限分離與控制等等，也是一大塊的學問。

第五，H5的活動營銷頁、紅包落地頁、明星投票頁等等一系列與營銷活動相關的移動端頁面。這些需要你的 CSS 功底非常扎實，常常要寫一些動態效果、動畫效果，越生動越吸引用戶參與。另外同樣考驗你對不同機型不同移動瀏覽器的兼容性問題，還有響應式布局。數據交互層面的話，一般不會太多，但是一定會有打點上報，用來分析頁面性能。還有一些要根據不同的營銷參數、渠道參數來展現不同的內容，或者上報不同的數據，這里就要對 url 、緩存的處理有相應的能力。當然了，這塊頁面是很注重頁面白屏時間和性能的，有能力的團隊會考慮SSR直出頁面。

第六，移動端視頻播放頁面。最近短視頻崛起，但是很多短視頻 app 中的頁面是 web 前端頁面，這樣做的原因是 app 過審麻煩且時間周期長，業務需要快速迭代和修復的情況下，前端責無旁貸。那么這時候考驗的是你對視頻的操作能力，對流式播放技術和能力的掌握。此外，視頻掛件、貼紙、彈幕、互動、美顏、變老挑戰等等，都是現在短視頻必備的能力。

第七，微信小程序。噢，不，應該是小程序。微信、支付寶、百度等大企業，先后推出了小程序，當然身為前端開發的我們是必須掌握的一門技巧，雖然不是新的語言，但代碼組織方式、調試方式、底層原理，也是值得關注和學習。

第八，造輪子寫工具、寫框架，搭建基礎設施。公司逐漸發展壯大以后，會面臨一個問題，那就是如何將前端基礎設施做起來。基礎設施對前端的工程搭建與發展來說，太重要了。技術的選型、代碼風格的制定，代碼模塊的積累沉淀，項目的打包構建與部署，持續集成與持續交付，單元測試與UI自動化測試，錯誤日志上報與可視化，打點日志上報與可視化，成員間代碼協作與代碼評審等等。這些對一個業務步入正軌的公司或者團隊來說，太重要了。這是前端工程的基石，業務快速迭代的奠基，必須重視起來。

首先前端相比之下確實比較好學... 另一方面，前端的需求很大，基本上所有的公司一定是要有前端程序員的，有很多公司現在的技術棧已經很落后了，甚至有一些公司還沒有用現在流行的框架，還在用jq，你只要會基本的HTML和css，然后學一下jq的API找到一份前端的工作是很容易的，但是工資水平就不說了。

稍微好一點的程序員，應該是有一定的框架項目經驗，然后對css和js的運用有一定的心得。框架已經改變了前端目前的生態，熟練使用之后前端的開發已經變得非常容易了，你需要注意類似狀態管理，生命流程管理之類的事情。另外就是類似webpack之類的工具，了解一下先慢慢就上手了。

然后前端經常會說全棧這種說法，js的發展趨勢非常迅猛，至少了解一下node的相關知識，這樣會對你前端工作有一定幫助。

能想起來的（其他的以后再補），html+css你要做到：

布局(flex,grid)->樣式(css3)->CSS動畫->適配->

js方面個人

熟悉各種神奇的方法，比如：

體會js里面萬物皆為對象的思想，了解原型鏈這個神經的設計，了解js里面獨特的神奇的數組。

《JavaScript語言精粹》是一本不錯的書，很薄的一本書但是內容比較有啟發性，建議可以讀一讀。

之外的，算法一定要學的，然后瀏覽器的各種video，audio，canvas要了解的，最好深入至少一種API，一技傍身很有好處的。

綜上，看你想做什么程度的前端程序員了，中間的收入差距能差一個數量級...

一定要養成良好的代碼習慣，寫注釋。

學習路線

一、HTML、CSS基礎、JavaScript語法基礎。學完基礎后，可以仿照電商網站（例如京東、小米）做首頁的布局。

二、JavaScript語法進階。包括：作用域和閉包、this和對象原型等。相信我，JS語法，永遠是面試中最重要的部分。

三、jQuery、Ajax等。jQuery沒有過時，它仍然是前端基礎的一部分。

四、ES6語法。這部分屬于JS新增的語法，面試必問。其中，關于 promise、async 等內容要尤其關注。

五、HTML5和CSS3。要熟悉其中的新特性。

六、canvas。面試時，有的公司不一定會問canvas，靠運氣。如果時間不夠，這部分的內容可以先不學。但如果你會，絕對屬于加分項。

七、移動Web開發、Bootstrap等。要注意移動開發中的適配

Web 開發又名網站開發，一個網站在開發時會分為前端、后端兩大部分。

Web 前端：用戶在瀏覽器中所能看到的網站頁面及頁面之間的交互效果都是由前端完成的。

Web 后端：后端更多的是與數據庫進行交互以處理相應的業務邏輯。需要考慮的是如何實現功能、數據的存取、平臺的穩定性與性能等。