前端學習到就業，到底須要怎麼學？

結合我的經歷總結的前端入門方法，總結從零基礎到具有前端基本技能的道路、學習方法、資料。因爲能力有限，不能保證面面俱到，只是做爲入門參考，面向初學者，讓初學者少走彎路。

互聯網的快速發展和激烈競爭，用戶體驗成爲一個重要的關注點，前端工程師成爲熱門職業，各大公司對前端工程師的需求量都很大，要求也愈來愈高，優秀的前端工程師更是稀缺。我的感受前端入門相對容易，可是也須要系統地認真學習，在打好基礎後堅持學習，成爲優秀前端工程師也只是時間問題。

必備基礎技能

如下是我的以爲入門階段應該熟練掌握的基礎技能：

HTML4，HTML5語法、標籤、語義。

CSS2.1，CSS3規範，與HTML結合實現各類佈局、效果。

Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操做，HTML5新增功能。

一個成熟的客戶端javascript庫，推薦jquery。

一門服務器端語言：若是有服務器端開發經驗，使用已經會的語言便可，若是沒有服務器端開發經驗，熟悉Java能夠選擇Servlet，不熟悉的能夠選PHP，能實現簡單登錄註冊功能就足夠支持前端開發了，後續可能須要繼續學習，最基本要求是實現簡單的功能模擬。

本人是一個從事前端開發6年的程序員，在前端領域混了這幾年，總結了一套前端學習的精講視頻和學習路線，若是有對前端開發感興趣的夥伴，無論你是想轉行，或是大學生，還有工做中想提高本身能力的web前端黨，歡迎你們的加入個人前端開發交流qun：前面：938 中間：051 最後：673， 但願你們誠心交流！，與企業需求同步。好友都在裏面學習交流，天天都會有大牛定時講解前端技術!

在掌握以上基礎技能以後，工做中遇到須要的技術也能快速學習。

繼續提升

有了前面的基礎以後，前端基本算是入門了，這時候可能每一個人心中都有了一些學習方向，若是仍是沒有。能夠參考前面必備技能部分提到的那兩個項目，從裏面選一些進行發展學習。如下是一些不錯的方面：

Grunt：前端自動化工具，提升工做效率

less css：優秀的CSS預處理器

bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美

框架：React 或 Vue Angular

requirejs：AMD規範的模塊加載器，前端模塊化趨勢的必備工具

Node.js：JavaScript也能夠作後臺，前端工程師地位更上一步

移動端web開發：智能手機的普及讓移動端的流量正在逐步趕超PC端

Javascript內存管理：SPA長期運行須要注意內存泄露的問題

High Performance JavaScript(Build Faster Web Application Interfaces)

Best Practices for Speeding Up Your Web Site：重要技能

進階必讀書籍：

• 《你不知道的 JavaScript 上/中/下卷》：必買書籍，將 JavaScript 的疑難問題，細節知識一網打盡。原版是 GitHub 上開源的電子書，英語水平高的能夠去讀英文原版。
• 《JavaScript 忍者祕籍》：深刻講解 JavaScript 的核心知識點，必買書籍。
• 《了不得的 JavaScript 工程師》：從宏觀來看 JavaScript 語言，以及前端工程師所須要掌握的一些技能，推薦閱讀
• 《JavaScript 函數式編程指南》：學習函數式編程思想
• 《JavaScript 函數式編程》：也是一本函數式編程思想的好書
• 《JavaScript 設計模式》：學習 JavaScript 設計模式，推薦閱讀
• 《JavaScript 設計模式與開發實踐》：另外一本同等份量的設計模式書籍，推薦閱讀

學到什麼程度能夠找工做？

優秀的Web前端工程師具有編寫任何一個互聯網系統的前端頁面、交互代碼的能力。

根據對100家互聯網名企對Web開發工程師的招聘要求分析，企業要求主要有兩部分，一個是核心要求，一個是輔助要求。

核心要求包括：

語言技術：JS基礎和核心、HTML五、CSS3；

框架技術：JQuery、AJAX、BOM、DOM、AngularJS；

通信協議技術：HTTP協議、服務端開發技術；

交互技術：UI交互設計

熟練使用 React 或 Vue 相關技術棧

具有前端工程化思惟和實踐經驗，技術視野廣闊，有主導前端技術方案設計的能力和經驗，可以獨立承擔模塊功能的前端開發工做。

......

輔助要求：

有1-3年Web工做經驗（近80%的企業）、學歷及相關專業、文檔規範寫做能力、團隊合做能力、責任心。

學習建議

在你開始入手學習前，有一些小的建議。根據身邊朋友學習的經驗發現，這些建議在如今乃至之後的崗位生涯裏都是有很大幫助的。還有就是開始學習前，建議能夠先花幾天時間，查找一些如何入門的文章，經過對許多文章及前人的建議。整理出適合本身學習的一套完整計劃，而後在學習過程當中，在本身對前端更加了解以後，作出一些計劃的調整。我相信，在這樣的計劃學習之下比一來就開始學習具體知識要快速有效得多。

一、貴在規範：代碼規範，不是說小白時期不重要，正是什麼都不懂的時候，纔要嚴格執行學到的規範。徐徐漸進，等到學有所成，漸漸地造成一套本身的代碼風格。

二、貴在手寫：最開始學習建議手寫代碼，哪怕只有一行代碼，也要一個字母一個空格的敲打出來。

三、貴在動手：哪怕只有一行代碼的事例，也要手動編寫運行，而不是眼高手低，哦，好簡單會了，就不動手了。

四、貴在基礎：只有小白階段把基礎打好了（好比：HTML、CSS、Jquery），後續進階難關纔會更好克服。

五、貴在堅持：在以爲最難的時刻，堅持一下，天空會徹底不同。

六、貴在計劃：制定相應的計劃，並嚴格執行，不然通常學習效果大打折扣。

七、貴在一步一個腳印：前端要學習掌握的知識很是多，須要跟着計劃一步一個腳印，由易到難。

八、以上：若是可以較好的遵循，學習效果和後續的進階方面，有大大的幫助。固然適合本身的方法方式纔是最好的。

前端開發突飛猛進，只要咱們把最基礎的知識掌握好了，尤爲是javascript編程語言。不管它出現多少的開發框架，咱們均可以快速掌握並使用它。固然使用這些框架或工具來開發項目只是咱們必備的崗位技能，咱們進一步須要學習的是如何掌握工做技巧，而且天天都有所進步，不論是技術上面仍是項目管理上面。只有不斷學習不斷進步，保持成長性的思惟，纔不會被崗位和社會所淘汰。

爲了幫助自學的朋友們檢測自學程度，特別整理了《95頁前端學習筆記》電子稿文件。

主要內容包括html，css，html5，css3，JavaScript，正則表達式，函數，BOM，DOM，jQuery，AJAX，vue 等等。

html5/css3

• HTML5 的優點

• HTML5 廢棄元素

• HTML5 新增元素

• HTML5 表單相關元素和屬性

• CSS3 新增選擇器

• CSS3 新增屬性

• 新增變形動畫屬性

• 3D變形屬性

• CSS3 的過渡屬性

• CSS3 的動畫屬性

• CSS3 新增多列屬性

• CSS3新增單位

• 彈性盒模型

JavaScript

• JavaScript基礎

• JavaScript數據類型

• 算術運算

• 強制轉換

• 賦值運算

• 關係運算

• 邏輯運算

• 三元運算

• 分支循環

• switch

• while

• do-while

• for

• break和continue

• 數組

• 數組方法

• 二維數組

• 字符串

正則表達式

• 建立正則表達式

• 元字符

• 模式修飾符

• 正則方法

• 支持正則的 String方法

js對象

• 定義對象

• 對象的數據訪問

• JSON

• 內置對象

• Math 方法

• Date 方法

面向對象是一種編程思想

• 定義對象
• 原型和原型鏈
• 原型鏈
• 原型

經常使用的JavaScript設計模式

• 單體模式

• 工廠模式

• 例模式

函數

• 函數的定義

• 局部變量和全局變量

• 返回值

• 匿名函數

• 自運行函數

• 閉包

BOM

• BOM概述

• window方法

• frames [ ] 框架集

• history 歷史記錄

• location 定位

• navigator 導航

• screen 屏幕

• document 文檔

DOM

• DOM對象方法
• 操做DOM間的關係
• DOM節點屬性

事件

• 事件分類

• 事件對象

• 事件流

• 事件目標

• 事件委派(delegate)

• 事件監聽

jQuery

• jQuery 選擇器

• 屬性選擇器

• 位置選擇器

• 後代選擇器

• 子代選擇器

• 選擇器對象

• 子元素

• DOM操做

• JQuery 事件

• 容器適應

• 標籤樣式操做

• 滑動

• 自定義動畫

AJAX

• 工做原理
• XMLHttpRequest對象
• XML和HTML的區別
• get() 和post()

HTTP

• HTTP消息結構

• url請求過程

性能優化

• JavaScript代碼優化
• 提高文件加載速度

webpack

• webpack的特色

• webpack的缺點

• 安裝

• webpack基本應用

• 配置文件入門

vue

• MVC模式

• MVVM模式

• 基礎語法

• 實例屬性/方法

• 生命週期

• 計算屬性

• 數組的更新檢查

• 事件對象

• Vue組件

• 路由使用

• 路由導航

• 嵌套路由

• 命名視圖

完整版PDF資料免費分享，只需你點贊支持，【動動手指點擊此處就可免費領取了】。