Web前端在近幾年越來越受追捧，很多童鞋或者職場小夥伴想要提升技能-學習Web前端。這是非常好的事情，但問題在於很多人不知道學前端做什麼，所以什麼零碎細末、艱難晦澀、長篇大論的都去看，很容易陷入學不下去的困境。必須要有針對性、選擇性地學！針對性學習宗旨是按需去學，學以致用。因此騰訊大佬推薦的大型Web前端教程，我今天分享出來，希望可以幫助正在學習前端的你！

Web前端10大特點：

內容共分15章，講解了web前端的方方面面, 可以作為前端學習者的“寶典”。同時，穿插了5個大型實戰專案：

1. 青竹電商平臺（PC端）

某電商公司的線上購物平臺專案, 主要方便廣大使用者線上購物的需 求, 快速下單, 在家就可享受到愉快購物的便捷。專案模組包括：使用者管理， 訂單服務，購物車服務，商品 類別管理，商品管理，支付管理，訊息管理，頻道管理，廣告管理等。

2. 俄羅斯方塊

俄羅斯方塊（Tetris， 俄文：Тетрис）是一款由俄羅斯人阿列克謝·帕 基特諾夫於1984年6月發明的休閒遊戲。

該遊戲曾經被多家公司代理過。經過多輪訴訟後，該遊戲的代理權最 終被任天堂獲得。任天堂對於俄羅斯方塊來說意義重大，因為將它與GB搭配在一起後，獲得了巨大的成功。 《俄羅斯方塊》的基本規則是移動、旋轉 和擺放遊戲自動輸出的各種方塊，使之排列成完整的一行或多行並且消除得分。

3. flflappy bird遊戲(canvas)

《flflappy bird》是一款由來自越南的獨立遊戲開發者Dong Nguyen所開發的作品，遊戲於2013年5月24日上線，並在2014年2月突然暴紅。2014年2月，《Flappy Bird》被開發者本人從蘋果及谷歌應用商店撤下。2014年8月份正式迴歸APP STORE，正式加入Flappy迷們期待已久的多人對戰模式。遊戲中玩家必須控制一隻小鳥，跨越由各種不同長度水管所組成的障 礙。

4.網易雲音樂（Vue框架移動端）

網易雲音樂是一款由網易開發的音樂產品，是網易杭州研究院的成果，依託專業音樂人、DJ、好友推薦及社交功能，線上音樂服務主打歌單、社交、大牌推薦和音樂指紋，以歌單、DJ節目、社交、地理位置為核心要素，主打發現和分享。

5.後臺管理系統(React框架PC端)

後臺管理系統是內容管理系統Content Manage System（簡稱CMS）的一個子集。 內容管理系統是企業資訊化建設和電子政務的新寵，也是一個相對較新的市場。對於內容管理，業界還沒有一個統一的定義，不同的機構有不同的理解。

WMS是Web Management System 的簡寫，簡單的說：WMS是一個網站管理系統。一個網站管理系統是把一個網站的內容（文字，圖片，等等）與網站的元件分離開來，可以將各個頁面連線到一起，可以控制頁面的顯示。

本套影片一共400集，本套影片共分3季：

第一季 【基礎篇】web基礎 （100集）

第二季 【提高篇】web深入和擴充套件（200集）

第三季 【擴充套件篇】小程式、web移動端、vue3.0、Flutter、react（115集）

第1階段 HTML+CSS

1:掌握HTML基礎語法

HTML超文字標記語言【結構層】是web前端入門知識點，讓你認知網際網路實現原理、以及企業內常見佈局方式，即使你沒有接觸過其他語言，也會輕鬆的轉行到web前端開發。

2:掌握CSS層疊樣式

掌握了HTML基礎語法以後，你會發現我們網站外觀不是很美觀，那接下來我們會透過學習CSS層疊樣式【樣式層】，讓我們網站更加美觀、美化。

3:真是企業級專案驅動知識點

如果HTML與CSS這部分基礎知識掌握了，那我我們就可以利用這些技術去搭建屬於我們的靜態網站，會體驗到真是企業中開發流程與經驗。

第2階段 JavaScript

JavaScript指令碼語言簡稱【JS】，是web前端中最重要一部分知識點， 第二階段主要掌握JS指令碼語言核心語法，可以實現人與網站進行互動效果。

第3階段 HTML5與移動端

2015年的時候超文字標記語言進行第五次重大修改，稱之為HTML5。在這次重大修改當中新增很多語義化標籤、樣式、儲存功能、媒體功能等。 這個階段目的，需要掌握HTML5新特性、可以利用H5製作出一些炫酷效果，以及企業中常用到多媒體功能等。

第4階段 面對物件程式設計與畫布

掌握面向物件程式設計思想、對於類與例項可以清晰理解。理解面向物件程式設計三大特徵：繼承、封裝、多型。此階段屬於中級部分課程，也是為了後面框架課程在做準備，此階段可以難度指數相對強一些，最終可以達到自己開發出一款屬於自己的遊戲。

第5階段 ES6

掌握 ECMAScript6、7、8、9、10 新的語法。也是框架必備技能， 這部分知識點是 JavaScript 指令碼語言新的寫法，重要知識點有類、箭頭函式、陣列迭代方法、 promise 非同步解決方法等等。對於新的技術誕生、新的語法出現，對於任何語言開發人員都 是一樣的需要掌握新的事物、以及構建化工具 webpack、rollup 等等

第6階段 React框架

React 主要用於構建 UI。你可以在 React 裡傳遞多種型別的引數，如宣告程式碼，幫助你渲染 出 UI、也可以是靜態的 HTML DOM 元素、也可以傳遞動態變數、甚至是可互動的應用元件。 透過此框架可以深入理解單頁面應用開發。

第7階段 Vue框架

透過上一階段 React 框架學習，其實就是為了 Vue 框架進行鋪墊的。在大陸前端開發中 Vue 火熱程度遠遠高度React。Vue.js 自身不是一個全能框架，它只聚焦於檢視層。因此它非常容易學習，非常容易與其 它庫或已有專案整合。另一方面，在與相關工具和支援庫一起使用時Vue.js 也能完美地驅動複雜的單頁應用。

第8階段 小程式與uniapp

第9階段 Flutter

Flutter 是 Google 開源的 UI 工具包，幫助開發者透過一套程式碼庫高 效構建多平臺精美應 用，支援移動、Web、桌面和嵌入式平臺。Flutter 開源、免費，擁有寬鬆的開源協議，適合商業專案。