web前端學習路線-20個真實web開發專案集合

目前web前端工程師日均崗位缺口已經超過50000，隨著網際網路+的深入發展，html5作為前端展示技術，市場人才需求量將呈直線上漲。

Web前端工程師的崗位職責是利用HTML、CSS、Java、DOM等各種web技能結合產品的介面開發，製作標準化純手工程式碼，並增加互動功能，豐富網際網路的Web開拓，致力於改進使用者體驗。現如今，Web前端工程師已經成為各大網際網路公司不可或缺的熱門職位，從業者隊伍日漸龐大，這其中不乏零基礎學習者和轉行人士。為了方便大家系統而全面的掌握前端基礎知識，小編特意整理了web前端開發入門學習線路圖，涵蓋20大實戰專案的知識點詳細講解，希望對大家的學習有所幫助。

專案一：PC端網站佈局

所含知識點：HTML基礎，CSS基礎，CSS核心屬性，CSS樣式層疊，繼承，盒模型，容器，溢位及元素型別，瀏覽器相容與寬高自適度，定位，錨點與透明，圖片整合，表格，CSS屬性與濾鏡

專案二：HTML5+CSS3基礎專案

所含知識點：HTML5新增的元素與屬性，表單域增強元素，CSS3選擇器，文字字型相關樣式，CSS3位移與變形處理，CSS3 2D轉換與過度動畫，CSS3 3D轉換與關鍵幀動畫，彈性盒模型，媒體查詢，響應式設計

專案三：WebApp頁面佈局專案

所含知識點：移動端頁面設計規範，移動端切圖，文字流式/控制元件彈性/圖片等比例/特殊設計的100%佈局，等比縮放佈局，viewport/meta，rem/vw的使用，flexbox詳解，移動web特別樣式處理（reset, 1px border, 高清圖片）

專案四：原生Java互動功能開發專案

所含知識點：基本語法，迴圈語句，函式與陣列，String與Date，BOM與DOM，事件，拖拽效果，cookie儲存，正規表示式，Ajax，物件導向基礎，運動與遊戲開發

專案五：物件導向進階與ES5/ES6應用專案

所含知識點：Promise/A+，設計模式（觀察者模式等），原型鏈，建構函式，執行上下文棧與執行上下文，變數物件與活動物件，作用域鏈，閉包，this，ES5，ES6

專案六：Java工具庫自主研發專案

所含知識點：DOM庫，事件庫，AJAX庫，原型和繼承庫，MVVM核心庫，基於SPA的路由庫

專案七：jQuery經典互動特效開發

所含知識點：時間軸特效，tab頁面切換效果，網頁定位導航特效，滑動門特效，焦點圖輪播特效，導航條選單效果，瀑布流特效，彈出層效果，倒數計時效果，抽獎效果

專案八：PHP+MySQL後端基礎專案

所含知識點：PHP，MySQL，HTTP(s)協議詳解，Ajax進階、跨域與Defered，Apache與Nginx 環境搭建與配置，介面的定義，Mock資料，Restful，前後端聯調，前端安全(XSS,CSRF,JSON注入)

專案九：前端工程化與模組化應用專案

所含知識點：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模組化

專案十：PC端全棧開發專案

所含知識點：大首頁、列表頁與詳情頁展示與互動特效、搜尋、登入與註冊、購物車、jQueryUI 與 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、雲平臺系統前端

專案十一：應用Vue.js開發WebApp專案

所含知識點：Vue.js基礎，模組化，單檔案元件，路由，與伺服器通訊，狀態管理，單元測試與生產釋出，服務端渲染SSR與Nuxt.js，基於Vue.js企業級專案開發(Mint UI, Element UI)

專案十二：應用React.js開發WebApp專案

所含知識點：ReactJS基礎，JSX語法，元件，flux+Redux，React，Router路由，動畫效果，基於React 企業級專案研發( Antd, Antd Mobile）

專案十三：應用Angular開發WebApp專案

所含知識點：Type 基礎與進階，開發環境配置，Hello World，架構、模組與元件，模板，後設資料、資料繫結與資料顯示，表單，服務與指令，依賴注入，路由，Ionic 3 MUI框架

專案十四：微信公眾號開發

所含知識點：微信公眾號，訂閱號的基本功能，使用百度BAE實現程式碼的快速上線，使用Git完成線上程式碼部署，公眾號開發許可權及功能接入，微信JSSDK介面API，微信場景專案開發與接入

專案十五：微信小程式開發

所含知識點：微信小程式初探，小程式入門必學，小程式元件體驗，小程式大功能，專案實戰帶你征服小程式

專案十六：React Native

所含知識點：React Native 初探，React Native 專案導航，React Native 專案文字框，React Native 專案滾動分頁，React Native 專案第三方登入，React Native 其他元件

專案十七：各類混合應用開發

所含知識點：自主原生Navtive Hybrid(iOS、Android)，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架MUI + HTML5+

專案十八：NodeJS全棧開發

所含知識點：

（1）Node.js基礎專案——NodeJS介紹，開發環境搭建，模組與包管理工具，CommonJS模組，URL網址解析，QueryString引數處理，HTTP模組，HTTP小爬蟲，request方法，事件 events模組，檔案 fs模組，Stream 流模組，原生路由與引數接收，讀取圖片檔案，npm s，Yarn 與 PM2

（2）MongoDB——MongoDB介紹與環境搭建，資料庫常用命令，Collection聚集集合，document文件操作，聚集集合查詢，NodeJS連線MongoDB

（3）GraphGL——GraphQL初探：從REST到GraphQL，GraphGL安裝，準備資料來源，搭建GraphQL伺服器，資料查詢

（4） Express——express 介紹，安裝和建立基於Express的專案，Express 4.1x 初始化專案詳解，路由簡介，模板引擎EJS，模板引擎Pug（Jade）

（5）Koa——Koa入門、Koa應用、中介軟體、Context、async await、請求與響應

（6）測試框架mocha——搭建框架、斷言assert、專案測試、執行多個測試

（7）socket 即時通訊專案——Socket簡介和通訊流程，基於net模組實現socket，WebSocket，Socket.io

專案十九：Node.js高階全棧專案

所含知識點：基於Vue+Node+MongoDB+微信的高階全棧專案開發

專案二十：大資料視覺化

所含知識點：資料視覺化入門，資料視覺化基礎，零程式設計工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau，D3.js詳解，D3.js 入門，D3.js 高階應用，D3.js 應用工具：NVD3、n3，charts，Highcharts，FusionCharts，Polymaps

在前端學習的起步階段，最重要的就是要有明確目標和合理的學習規劃，為此小編特別為大家總結了web前端基礎學習階段的四大學習要點，希望能讓大大家的學習變得更加高效：

一、基本知識的掌握 在我們梳理的知識架構中，按照我們分析的兩個維度裡最前置的、最淺顯的部分，作為打基礎的階段，必須要在這個過程中更多投入到實踐中去，我們通常做的多了、熟練了，就認為這部分知識和內容掌握。

二、常用工具的掌握 對於常用工具的掌握應該掌握一些有大公司或專業團隊背景的流行工具，這些工具的熟練掌握能夠提升專業度、職業度，同時，能提升我們的工作效率。

三、溝通技巧的掌握 在國內，技術人員通常都是自己制定方案、自己執行方案，在執行過程中又缺乏相關產品、互動設計等人員的溝通，大多是在自己的思路貫徹下進行開發，久而久之，我們習慣於信任自己的觀點、在自己的視角看問題，對於挑戰總是百般地“據理”力爭。我們需要更多提升的是，如何在對方的視角看問題、如何在使用者的視角看問題。

四、良好的開發習慣 開發習慣是養成的，一旦有不好的習慣，對於將來去修正帶來的將是很大的麻煩，培養良好的開發習慣一定要從起步時做起，例如：寫程式碼之前先分析、先寫文件、先寫註釋等等。

前端技術每年都會不斷更新，學習前端開發建議大家還是要選擇培訓為好，推薦愛創課堂，是一家專門做前端教育的學校，愛創課堂是一家以就業為導向的前端培訓學校，所學習的就是企業所需要的，培養企業最需要的前端工程師為企業理念，授課以實戰課程為主，更多的學習大專案對以後工作有幫助，畢業後輕鬆就業！

一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。
那麼如何系統的學習企業實用的web前端技術呢，視訊教程、學習路線，
前端學習培訓、可以新增威信：haomei0452獲取前端學習資料。
相信從中會受到啟發，找到學習的方向和目標。如大家對前端還有不瞭解的問題，可以持續關注我。