1. HTML&CSS
HTML和CSS是Web開發(fā)最基礎的部分晴股，其中HTML構(gòu)成了網(wǎng)頁的“骨架”，CSS為網(wǎng)頁添加了顏色樣式，是網(wǎng)頁的“皮膚”部服。網(wǎng)頁上所看到的文本、圖片以及花花綠綠的樣式都是通過HTML和CSS實現(xiàn)的拗慨，因此學習Web開發(fā)首先要學的就是HTML和CSS編碼廓八。HTML和CSS比較簡單厦酬，學習起來只需幾周就好。
只要掌握了HTML和CSS你就可以將設計圖轉(zhuǎn)換成靜態(tài)頁面了瘫想，但是遠遠不能滿足如今網(wǎng)頁變幻莫測的需求仗阅。
2. JavaScript
JavaScript給網(wǎng)頁增加了很多的動作和功能。利用JavaScript可以給網(wǎng)頁元素添加很多交互国夜，例如按鈕點擊减噪、網(wǎng)頁游戲或百度地圖中可以根據(jù)拖拽實時更新地圖等功能。如果你覺得一個網(wǎng)頁交互很舒服很友好车吹，基本上都是采用了大量的JavaScript筹裕，例如Pinterest。另外窄驹，JavaScript承擔了網(wǎng)站前后端數(shù)據(jù)交換的重要角色朝卒。
其次，拋開前端開發(fā)乐埠，JavaScript是世界上最受歡迎的語言之一抗斤，所以單單是語言本身也是非常值得學習的。
3. jQuery
JavaScript的語法有很多冗長和反復使用的地方丈咐，因此jQuery就應運而生了瑞眼。jQuery 是一個JavaScript庫，它包含了眾多的插件和擴展棵逊，簡化了JavaScript的語法伤疙，使開發(fā)者可以使用已經(jīng)封裝好的元素，只在必要的時候辆影、需要個性化定制的時候徒像，使用原生的JS語法。但即便有了jQuery這樣的工具蛙讥，學好JS基礎仍然很重要锯蛀。
4. JavaScript 框架
JavaScript框架在開發(fā)過程中提供了一個已經(jīng)構(gòu)建好的JavaScript代碼結(jié)構(gòu)，常用的框架有：AngularJS键菱，VueJS谬墙，ReactJS，BackboneJS经备，EmberJS等拭抬。不同的框架擅長不同的應用場景。這些框架大大提升了開發(fā)的效率侵蒙，并且能夠和一些JS庫如jQuery配合使用盡量減少原生JS編碼造虎。會使用至少一種JavaScript框架已經(jīng)成為前端學習者的必會技能之一。
5. 前端框架
這里說的前端框架主要是指CSS框架纷闺，如最受歡迎的Bootstrap算凿。由于各種項目中常常出現(xiàn)相同的元素份蝴，例如導航條、表單等氓轰，因此將這些常用的元素的不同樣式定義在同一個框架中會有很大的價值婚夫。大部分的前端開發(fā)工作都會要求對這些框架熟悉并且了解他們的原理。
參考：http://www.bootcss.com/
6. CSS預處理器
CSS預處理器是另外一種可以大大提升CSS編碼速度的工具署鸡。CSS預處理器給CSS添加了額外的功能從而使CSS編碼更具擴展性案糙。CSS預處理器會在代碼發(fā)布到網(wǎng)站上之前對編碼進行預處理，并將源碼處理成兼容性比較好且結(jié)構(gòu)清晰的CSS代碼靴庆。SASS和LESS是在前端工作職位要求中最常被要求的兩種CSS預處理器时捌。
參考：https://www.sass.hk/
7. RESTful API
以前的網(wǎng)站都是前后端融合在一起，但隨著現(xiàn)在客戶端的多樣化炉抒，Web開發(fā)多采用前后端分離奢讨，前端負責渲染和附帶處理簡單的商務邏輯。前端和后端通過API進行交互焰薄，RESTful API?應運而生拿诸。
REST 的全稱是REpresentational State Transfer，其實是資源的表現(xiàn)狀態(tài)轉(zhuǎn)化（雖然也聽不懂）蛤奥。設計規(guī)范就是URL中只使用名詞來指定資源佳镜，原則上不使用動詞僚稿，而通過HTTP動詞來實現(xiàn)資源的狀態(tài)扭轉(zhuǎn)凡桥，例如：GET 用來獲取資源，POST 用來新建資源（也可以用于更新資源）蚀同，PUT 用來更新資源缅刽，DELETE 用來刪除資源。
更多：http://www.ruanyifeng.com/blog/2014/05/restful_api.html
8. 響應式布局和移動端設計
隨著移動設備的普及蠢络，越來越多的人會在移動設備上瀏覽網(wǎng)頁衰猛，甚至逐漸超過了在電腦上瀏覽的次數(shù)。所以毫無疑問的是刹孔，響應式布局和移動端設計技能對于前端工作人員來說也是非常重要的啡省。響應式布局就是頁面根據(jù)屏幕寬度的大小和設備的類型進行布局甚至內(nèi)容上的調(diào)整。
例如髓霞，一個網(wǎng)頁在電腦上瀏覽時卦睹，由于屏幕比較寬，因此可能會出現(xiàn)圖標元素的多列并排方库，但是如果是手機等寬度較小的屏幕结序，則需要適當調(diào)整列數(shù)，從而使人們在移動端上也能正常舒適地瀏覽內(nèi)容纵潦。這樣的布局就是響應式布局徐鹤。
移動端設計包含了響應式布局垃环，但也包含了設計單獨的移動端。在有些場合我們希望用戶在移動端所看到的內(nèi)容和電腦端所看到的可能會完全不同返敬，例如國內(nèi)支付寶的電腦端和移動端完全不一樣遂庄。電腦端因為其屏幕大可以看見更詳細的信息，但移動端因為屏幕版面的限制劲赠，要求展示必須簡單清晰涧团。
參考：https://skillcrush.com/2015/04/07/8-secrets-to-mobile-design/
9. 跨瀏覽器開發(fā)
前端代碼運行在瀏覽器中，目前主流的瀏覽器也有很多種经磅，不同的渲染機制導致同樣的代碼在不同的瀏覽器下顯示效果會不同泌绣。雖然現(xiàn)在的主流瀏覽器在網(wǎng)頁的統(tǒng)一展示方面做得越來越好，但在能夠完全一致地顯示之前预厌，學習如何兼容各種瀏覽器還是比較重要的一項技能阿迈。
10. 測試和調(diào)試
在Web開發(fā)過程中不可避免bug的產(chǎn)生，熟練測試和調(diào)試是非常重要的轧叽。
單元測試是測試單獨的源代碼塊的過程苗沧，單元測試框架提供了單元測試的具體方法和結(jié)構(gòu)。
另外一種常見的測試類型是UI測試炭晒，主要用來檢查網(wǎng)頁在用戶交互的時候是否能夠正常反應待逞。你可以寫一些測試用例在網(wǎng)頁上尋找某些特定的東西，例如測試當用戶忘記填寫一個網(wǎng)頁的表單時网严，錯誤提示框是否正確地彈出识樱。
調(diào)試簡單來講就是找出bug的原因，并且修復的過程震束。
11. Git（SVN）和版本管理器
寫代碼的過程中怜庸，版本控制是非常重要的。常用的版本控制器有Git等垢村。版本控制器可以跟蹤代碼修改記錄割疾，如果一不小心把代碼改壞了還可以回滾到之前的版本。在團隊合作過程中嘉栓，版本控制更加重要宏榕。Git是目前最常用的版本控制系統(tǒng)，因此熟練掌握Git對開發(fā)職位來說非常重要侵佃。
12. 解決問題的技能
拋開崗位要求明確標注的技能以外麻昼，另外一項非常重要的技能應該就是解決問題的技能了。思考如何能夠更好地實現(xiàn)設計稿的效果趣钱，如何能夠更好地和后端對接等涌献。
假如你將前端頁面寫好了，在與后端開發(fā)人員對接的時候首有，前端的很大部分的功能全部失效了燕垃。此時一個好的前端會將此看做一個亟待解決的問題和調(diào)招而不是一場災難枢劝。當然一個優(yōu)秀的前端會在剛開始的時候就考慮周全避免此類事情的發(fā)生。
