自學前端之路

關注前端體系，獲得更多學習教程

從我自學前端以來，並從事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框架是相當有必要的，掌握理解模塊化和組件化。三者之間也是有明顯區別，可以在網上找資料對比總結。

微信小程序

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

找工作，積累經驗

之後我就入了行，開始了我前端生涯。我的前端學習路線差不多就這些，前端博大精深，隨著技術的不斷更新，我們也需要跟隨技術的腳步，當然有些時候不是越新越好，最基本的東西掌握了，其他的就可以很好理解了。

大家想要什麼資源，或者學習上遇到問題都可以留言給小編哦~看到會及時給大家回復~

覺得本文對你有幫助，可以分享給更多人

關注【前端體系】，一起提升技能

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！