大多數(shù)野生程序員最棘手的問題就是如何依靠技術(shù)解決溫飽，通俗來講就是技術(shù)折現(xiàn)的問題。

如果是單純出于興趣，或者只是為了突擊某一階段或者某一項(xiàng)目技術(shù)壁壘，不跟就業(yè)掛鉤的自學(xué)倒也是無(wú)關(guān)痛癢。但是當(dāng)上崗成為自學(xué)的終極目標(biāo)和結(jié)果時(shí)，一切都就另當(dāng)別論了。

前端自學(xué)者存在的學(xué)習(xí)誤區(qū)：

1、所學(xué)東西可能已過時(shí)

奉為經(jīng)典的東西可能已經(jīng)過時(shí)，或者已經(jīng)有了更好的替代者，而你獲取信息的渠道有限，消息滯后，導(dǎo)致學(xué)習(xí)的內(nèi)容也相對(duì)滯后。

2、學(xué)習(xí)方法盲目。

看書看不懂就找視頻類教程學(xué)習(xí)，覺得教程跟自己的口味不符就另尋他法，因?yàn)樽约喝鄙賹?duì)資源的辨識(shí)能力，總是在沒有清晰規(guī)劃學(xué)習(xí)線路的情況就盲目學(xué)習(xí)，導(dǎo)致無(wú)效學(xué)習(xí)時(shí)間過長(zhǎng)而收獲寥寥。

3、只有理論，缺乏真實(shí)項(xiàng)目鍛煉。

對(duì)技術(shù)的理解停留在理論層次，而缺乏真實(shí)企業(yè)項(xiàng)目的歷練，如果沒有相關(guān)實(shí)習(xí)或工作經(jīng)歷，對(duì)前端崗位具體的責(zé)任劃分和工作流程了解不充分。

學(xué)前端需要掌握哪些技能，才能去工作？

所以，自學(xué)前端需要達(dá)到什么水平才能去工作？我結(jié)合了知識(shí)點(diǎn)和現(xiàn)在前端主流崗位需求，列舉了一些，希望對(duì)大家的學(xué)習(xí)有幫助~

PC端網(wǎng)站布局：HTML基礎(chǔ)，CSS基礎(chǔ)，CSS核心屬性，CSS樣式層疊，繼承，盒模型，容器，溢出及元素類型，瀏覽器兼容與寬高自適度，定位，錨點(diǎn)與透明，圖片整合，表格，CSS屬性與濾鏡等。

HTML5+CSS3基礎(chǔ)：HTML5新增的元素與屬性，表單域增強(qiáng)元素，CSS3選擇器，文字字體相關(guān)樣式，CSS3位移與變形處理，CSS3 2D轉(zhuǎn)換與過度動(dòng)畫，CSS3 3D轉(zhuǎn)換與關(guān)鍵幀動(dòng)畫，彈性盒模型，媒體查詢，響應(yīng)式設(shè)計(jì)等。

WebApp頁(yè)面布局：移動(dòng)端頁(yè)面設(shè)計(jì)規(guī)范，移動(dòng)端切圖，文字流式/控件彈性/圖片等比例/特殊設(shè)計(jì)的100%布局，等比縮放布局，viewport/meta，rem/vw的使用，flexbox詳解，移動(dòng)web特別樣式處理等。

原生JavaScript交互功能開發(fā)：基本語(yǔ)法，循環(huán)語(yǔ)句，函數(shù)與數(shù)組，String與Date，BOM與DOM，事件，拖拽效果，cookie存儲(chǔ)，正則表達(dá)式，Ajax，面向?qū)ο蠡A(chǔ)，運(yùn)動(dòng)與游戲開發(fā)等。

面向?qū)ο筮M(jìn)階與ES5/ES6應(yīng)用：Promise/A+，設(shè)計(jì)模式（觀察者模式等），原型鏈，構(gòu)造函數(shù)，執(zhí)行上下文棧與執(zhí)行上下文，變量對(duì)象與活動(dòng)對(duì)象，作用域鏈，閉包，this，ES5，ES6等。

JavaScript工具庫(kù)自主研發(fā)：DOM庫(kù)，事件庫(kù)，AJAX庫(kù)，原型和繼承庫(kù)，MVVM核心庫(kù)，基于SPA的路由庫(kù)等。

jQuery經(jīng)典交互特效：時(shí)間軸特效，tab頁(yè)面切換效果，網(wǎng)頁(yè)定位導(dǎo)航特效，滑動(dòng)門特效，焦點(diǎn)圖輪播特效，導(dǎo)航條菜單效果，瀑布流特效，彈出層效果，倒計(jì)時(shí)效果等。

PHP+MySQL后端基礎(chǔ)：PHP，MySQL，HTTP(s)協(xié)議詳解，Ajax進(jìn)階、跨域與Defered，Apache與Nginx 環(huán)境搭建與配置，接口的定義，Mock數(shù)據(jù)，Restful，前后端聯(lián)調(diào)，前端安全(XSS,CSRF,JSON注入)等。

前端工程化與模塊化應(yīng)用：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模塊化等。

PC端全棧開發(fā)：大首頁(yè)、列表頁(yè)與詳情頁(yè)展示與交互特效、搜索、登錄與注冊(cè)、購(gòu)物車、jQueryUI 與 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平臺(tái)系統(tǒng)前端等。

應(yīng)用Vue.js開發(fā)WebApp：Vue.js基礎(chǔ)，模塊化，單文件組件，路由，與服務(wù)器通信，狀態(tài)管理，單元測(cè)試與生產(chǎn)發(fā)布，服務(wù)端渲染SSR與Nuxt.js，基于Vue.js企業(yè)級(jí)項(xiàng)目開發(fā)等。

應(yīng)用React.js開發(fā)WebApp：ReactJS基礎(chǔ)，JSX語(yǔ)法，組件，flux+Redux，React，Router路由，動(dòng)畫效果，基于React 企業(yè)級(jí)項(xiàng)目研發(fā)等。

應(yīng)用Angular開發(fā)WebApp：TypeScript 基礎(chǔ)與進(jìn)階，開發(fā)環(huán)境配置，Hello World，架構(gòu)、模塊與組件，模板，元數(shù)據(jù)、數(shù)據(jù)綁定與數(shù)據(jù)顯示，表單，服務(wù)與指令，依賴注入，路由，Ionic 3 MUI框架等。

微信公眾號(hào)開發(fā)：初識(shí)微信公眾號(hào)，訂閱號(hào)的基本功能，使用百度BAE實(shí)現(xiàn)代碼的快速上線，使用Git完成線上代碼部署，公眾號(hào)開發(fā)權(quán)限及功能接入，微信JSSDK接口API，微信場(chǎng)景項(xiàng)目開發(fā)與接入等。

微信小程序開發(fā)：微信小程序初探，小程序入門必學(xué)，小程序組件體驗(yàn)，小程序大功能，項(xiàng)目實(shí)戰(zhàn)等。

React Native：React Native 初探，React Native 項(xiàng)目導(dǎo)航，React Native 項(xiàng)目文本框，React Native 項(xiàng)目滾動(dòng)分頁(yè)，React Native 項(xiàng)目第三方登錄，React Native其他組件等。

各類混合應(yīng)用開發(fā)：自主原生Navtive Hybrid，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架等。

自學(xué)前端時(shí)的加分項(xiàng)

哦，對(duì)了還有加分項(xiàng)，大數(shù)據(jù)可視化！

建議大家從一些知識(shí)細(xì)節(jié)入手，數(shù)據(jù)可視化入門，數(shù)據(jù)可視化基礎(chǔ)，零編程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau，D3.js詳解，D3.js 入門，D3.js 高級(jí)應(yīng)用，D3.js 應(yīng)用工具：NVD3、n3，charts，Highcharts，F(xiàn)usionCharts，Polymaps等。

自學(xué)其實(shí)就是一種手段，至于具體的學(xué)習(xí)效果，其實(shí)全在于個(gè)人，這種入門前端的方法基本是屬于最慢的，如果學(xué)習(xí)方法和方向不對(duì)，很可能是做無(wú)用功。

如果是想轉(zhuǎn)行前端或者是想要進(jìn)入前端這個(gè)行業(yè)，以此為職業(yè)的話，建議還是系統(tǒng)的培訓(xùn)學(xué)習(xí)吧，因?yàn)椴粌H能節(jié)約時(shí)間，還能了解到最新的前端技術(shù)和技能，也有行業(yè)內(nèi)的專業(yè)人士幫你找到最快捷的學(xué)習(xí)入門方法，不至于白學(xué)或者走彎路。這只是個(gè)人的一點(diǎn)建議，僅供參考，不喜勿噴！

免費(fèi)獲取：點(diǎn)贊+評(píng)論111