個人自學前端之路

      從我自學前端以來，並從事web前端工做。很大一部分來源於「興趣」+「堅持」。相信如今還有不少小夥伴在自學前端的路上摸索着，接下來我分享下個人學習路線、學習方法與推薦的書籍，但願對自學的大家有幫助~

前端必備基礎

HTML5

      主要學會基本的HTML標籤骨架、HTML書寫規範、理解行內元素塊級元素以及語義化的正確使用。另外就是學習一些新特性，例如：

• 用於繪畫的 canvas 元素

• 用於媒介播放的Video和Audio元素

• 改良後的input表單控件等

CSS3

      這個主要用於網頁的樣式，也是前端中重要的一部分，雖然說簡單，其實很重要，我的以爲比較重要的幾個模塊：

• 選擇器，掌握並學會適當運用

• 盒模型、理解彈性盒子模型&普通盒子模型

• 文字特效、漸變顏色、陰影的使用

• 2D/3D的動畫轉換

• flex佈局，自適應佈局，多列布局等

• 重點，是處理瀏覽器之間的樣式兼容

  
  

Javascript

      重點學習javascript，由於前面掌握html+css基本就是製做靜態網頁，這時候就須要讓頁面動起來。最好是學習原生js，初學者不建議直接學習框架。我認爲js中比較重要的幾個知識點：

• 掌握基本的語法，類型，表達式，DOM高級操做等

• 深刻理解對象，函數，做用域，閉包，函數構造，this指向等相關知識

• 接着學習jquery，利用jquery插件，特效，能夠方便快速開發

• 深刻理解js事件的異步處理，阻塞概念，設計模式、正則表達式

• 學習ajax數據交互，與JSON數據處理，http協議等

  推薦書籍:《JavaScript高級程序設計(第3版)》《Javascript權威指南》《鋒利的jquery》

★★重點★★

     學完原生js，就能夠學習ES6語法了， 因爲目前許多框架都用了ES6語法，因此掌握ES6是必須的。ES6的新特性挺多的，努力掌握其實經常使用的有幾個：

• let、const的變量聲明，並理解與var的區別

• 模板字符串

• 箭頭函數

• class的基本語法

• Promise對象、處理異步操做

• 其餘的ES6知識點拓展能夠上網查

工具

• 初學者，通常用Sublime Text 3，工做之後用webStorm，甚至是用VS code，工欲善其事，必先利其器！因此有必要將多種工具使用熟悉。

• ps切圖技能也是必備的
  

學習方法：

      學習以上三部分，除了作些小例子掌握與使用，剛開始都是模仿網站，看看別人的語法規範等，嘗試作一些比較完整的網頁，有利於對本身掌握的技能查漏補缺，及時補充！後來，以爲更重要的是理解概念，深刻挖掘其中的奧妙。初學者能夠看看網絡上的視頻教程入門，而知識精華是須要從書去汲取的。

進階技能

Node.js

      當我掌握基本的必備知識，就能夠學node，Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 目前許多框架也是配合着node.js來應用，因此這個也是必須會的。

推薦書籍:《深刻淺出node.js》

前端工業化

      基本技能：學會使用gulp，grunt等對js、css、html壓縮，less、sass處理css

      深刻掌握：webpack打包工具的使用

web安全與性能

• 學習「雅虎軍規」

• 這個主要能夠學習XSS和csrf的原理和防範，SQL防注入等。

目前流行框架

      學習Vue、React、Angular框架是至關有必要的，掌握理解模塊化和組件化。三者之間也是有明顯區別，能夠在網上找資料對比總結。

微信小程序

      有了以上的基礎，結合目前的就業形勢，掌握微信小程序，對本身是很是有幫助的。這方面的學習，看看微信官方的小程序開發文檔，便可很好的入門，並能夠嘗試作些小案例~

找工做，積累經驗

     以後我成功找到web前端開發的工做，開始了我前端生涯。個人前端學習路線差很少就這些，前端博大精深，隨着技術的不斷更新，咱們也須要跟隨技術的腳步，固然有些時候不是越新越新，最基本的東西掌握了，其餘的就能夠很好理解了。

以爲本文對你有幫助，能夠分享給更多人

關注【前端體系】，一塊兒提高技能