? ? ? 從我自學(xué)前端以來找都，并從事web前端工作坟奥。很大一部分來源于“興趣”+“堅持”鸯绿。相信現(xiàn)在還有很多小伙伴在自學(xué)前端的路上摸索著，接下來我分享下我的學(xué)習(xí)路線昂儒、學(xué)習(xí)方法與推薦的書籍沟使，希望對自學(xué)的你們有幫助~
前端必備基礎(chǔ)
HTML5
? ? ? 主要學(xué)會基本的HTML標(biāo)簽骨架、HTML書寫規(guī)范渊跋、理解行內(nèi)元素塊級元素以及語義化的正確使用腊嗡。另外就是學(xué)習(xí)一些新特性，例如：
用于繪畫的 canvas 元素
用于媒介播放的Video和Audio元素
改良后的input表單控件等
CSS3
? ? ? ?這個主要用于網(wǎng)頁的樣式拾酝，也是前端中重要的一部分燕少，雖說簡單，其實(shí)很重要蒿囤，個人覺得比較重要的幾個模塊：
選擇器客们，掌握并學(xué)會適當(dāng)運(yùn)用
盒模型、理解彈性盒子模型&普通盒子模型
文字特效蟋软、漸變顏色镶摘、陰影的使用
2D/3D的動畫轉(zhuǎn)換
flex布局，自適應(yīng)布局岳守，多列布局等
重點(diǎn)凄敢，是處理瀏覽器之間的樣式兼容
Javascript
? ? ? ? 重點(diǎn)學(xué)習(xí)javascript，因為前面掌握html+css基本就是制作靜態(tài)網(wǎng)頁湿痢，這時候就需要讓頁面動起來涝缝。最好是學(xué)習(xí)原生js，初學(xué)者不建議直接學(xué)習(xí)框架譬重。我認(rèn)為js中比較重要的幾個知識點(diǎn)：
掌握基本的語法拒逮，類型，表達(dá)式臀规，DOM高級操作等
深入理解對象滩援，函數(shù)，作用域塔嬉，閉包玩徊，函數(shù)構(gòu)造，this指向等相關(guān)知識
接著學(xué)習(xí)jquery谨究，利用jquery插件恩袱，特效，可以方便快速開發(fā)
深入理解js事件的異步處理胶哲，阻塞概念畔塔，設(shè)計模式、正則表達(dá)式
學(xué)習(xí)ajax數(shù)據(jù)交互，與JSON數(shù)據(jù)處理澈吨，http協(xié)議等
推薦書籍:《JavaScript高級程序設(shè)計(第3版)》《Javascript權(quán)威指南》《鋒利的jquery》
★★重點(diǎn)★★
? ? ? ?學(xué)完原生js把敢，就可以學(xué)習(xí)ES6語法了，??由于目前許多框架都用了ES6語法棚辽，所以掌握ES6是必須的技竟。ES6的新特性挺多的，努力掌握其實(shí)常用的有幾個：
let屈藐、const的變量聲明榔组，并理解與var的區(qū)別
模板字符串
箭頭函數(shù)
class的基本語法
Promise對象、處理異步操作
其他的ES6知識點(diǎn)拓展可以上網(wǎng)查
工具
? ? ? 初學(xué)者联逻，一般用Sublime Text 3搓扯，工作以后用webStorm，甚至是用VS code包归，工欲善其事锨推，必先利其器！所以有必要將多種工具使用熟悉公壤。
ps切圖技能也是必備的
學(xué)習(xí)方法：
? ? ? ?學(xué)習(xí)以上三部分换可，除了做些小例子掌握與使用，剛開始都是模仿網(wǎng)站厦幅，看看別人的語法規(guī)范等沾鳄，嘗試做一些比較完整的網(wǎng)頁，有利于對自己掌握的技能查漏補(bǔ)缺确憨，及時補(bǔ)充译荞！后來，覺得更重要的是理解概念休弃，深入挖掘其中的奧妙吞歼。初學(xué)者可以看看網(wǎng)絡(luò)上的視頻教程入門，而知識精華是需要從書去汲取的塔猾。
進(jìn)階技能
Node.js
? ? ? ? 當(dāng)我掌握基本的必備知識篙骡，就可以學(xué)node，Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境丈甸。 目前許多框架也是配合著node.js來應(yīng)用医增，所以這個也是必須會的。
推薦書籍:《深入淺出node.js》
前端工業(yè)化
????基本技能：學(xué)會使用gulp老虫，grunt等對js、css茫多、html壓縮祈匙，less、sass處理css
????深入掌握：webpack打包工具的使用
web安全與性能
學(xué)習(xí)“雅虎軍規(guī)”
這個主要可以學(xué)習(xí)XSS和csrf的原理和防范，SQL防注入等夺欲。
目前流行框架
? ? ? ?學(xué)習(xí)Vue跪帝、React、Angular框架是相當(dāng)有必要的些阅，掌握理解模塊化和組件化伞剑。三者之間也是有明顯區(qū)別，可以在網(wǎng)上找資料對比總結(jié)市埋。
微信小程序
? ? ? ?有了以上的基礎(chǔ)黎泣，結(jié)合目前的就業(yè)形勢，掌握微信小程序缤谎，對自己是非常有幫助的抒倚。這方面的學(xué)習(xí)，看看微信官方的小程序開發(fā)文檔坷澡，即可很好的入門托呕，并可以嘗試做些小案例~
找工作，積累經(jīng)驗
? ? ? 之后我找到前端開發(fā)的工作频敛，開始了我前端生涯项郊。我的前端學(xué)習(xí)路線差不多就這些，前端博大精深斟赚，隨著技術(shù)的不斷更新着降，我們也需要跟隨技術(shù)的腳步，當(dāng)然有些時候不是越新越新汁展，最基本的東西掌握了鹊碍，其他的就可以很好理解了。
