目前web前端工程師日均崗位缺口已經超過50000，随着互聯網+的(de)深入發展，html5作爲(wéi / wèi)前端展示技術，市場人(rén)才需求量将呈直線上(shàng)漲。

Web前端工程師的(de)崗位職責是(shì)利用HTML、CSS、Java、DOM等各種web技能結合産品的(de)界面開發，制作标準化純手工代碼，并增加交互功能，豐富互聯網的(de)Web開拓，緻力于(yú)改進用戶體驗。現如今，Web前端工程師已經成爲(wéi / wèi)各大(dà)互聯網公司不(bù)可或缺的(de)熱門職位，從業者隊伍日漸龐大(dà)，這(zhè)其中不(bù)乏零基礎學習者和(hé / huò)轉行人(rén)士。爲(wéi / wèi)了(le／liǎo)方便大(dà)家系統而(ér)全面的(de)掌握前端基礎知識，小編特意整理了(le／liǎo)web前端開發入門學習線路圖，涵蓋20大(dà)實戰項目的(de)知識點詳細講解，希望對大(dà)家的(de)學習有所幫助。

項目一：PC端網站布局

所含知識點：HTML基礎，CSS基礎，CSS核心屬性，CSS樣式層疊，繼承，盒模型，容器，溢出(chū)及元素類型，浏覽器兼容與寬高自适度，定位，錨點與透明，圖片整合，表格，CSS屬性與濾鏡

項目二：HTML5+CSS3基礎項目

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

項目三：WebApp頁面布局項目

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

項目四：原生Java交互功能開發項目

所含知識點：基本語法，循環語句，函數與數組，String與Date，BOM與DOM，事件，拖拽效果，cookie存儲，正則表達式，Ajax，面向對象基礎，運動與遊戲開發

項目五：面向對象進階與ES5/ES6應用項目

所含知識點：Promise/A+，設計模式（觀察者模式等），原型鏈，構造函數，執行上(shàng)下文棧與執行上(shàng)下文，變量對象與活動對象，作用域鏈，閉包，this，ES5，ES6

項目六：Java工具庫自主研發項目

所含知識點：DOM庫，事件庫，AJAX庫，原型和(hé / huò)繼承庫，MVVM核心庫，基于(yú)SPA的(de)路由庫

項目七：jQuery經典交互特效開發

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

項目八：PHP+MySQL後端基礎項目

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

項目九：前端工程化與模塊化應用項目

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

項目十：PC端全棧開發項目

所含知識點：大(dà)首頁、列表頁與詳情頁展示與交互特效、搜索、登錄與注冊、購物車、jQueryUI 與 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、雲平台系統前端

項目十一：應用Vue.js開發WebApp項目

所含知識點：Vue.js基礎，模塊化，單文件組件，路由，與服務器通信，狀态管理，單元測試與生産發布，服務端渲染SSR與Nuxt.js，基于(yú)Vue.js企業級項目開發(Mint UI, Element UI)

項目十二：應用React.js開發WebApp項目

所含知識點：ReactJS基礎，JSX語法，組件，flux+Redux，React，Router路由，動畫效果，基于(yú)React 企業級項目研發( Antd, Antd Mobile）

項目十三：應用Angular開發WebApp項目

所含知識點：Type 基礎與進階，開發環境配置，Hello World，架構、模塊與組件，模闆，元數據、數據綁定與數據顯示，表單，服務與指令，依賴注入，路由，Ionic 3 MUI框架

項目十四：微信公衆号開發

所含知識點：初識微信公衆号，訂閱号的(de)基本功能，使用百度BAE實現代碼的(de)快速上(shàng)線，使用Git完成線上(shàng)代碼部署，公衆号開發權限及功能接入，微信JSSDK接口API，微信場景項目開發與接入

項目十五：微信小程序開發

所含知識點：微信小程序初探，小程序入門必學，小程序組件體驗，小程序大(dà)功能，項目實戰帶你征服小程序

項目十六：React Native

所含知識點：React Native 初探，React Native 項目導航，React Native 項目文本框，React Native 項目滾動分頁，React Native 項目第三方登錄，React Native 其他(tā)組件

項目十七：各類混合應用開發

所含知識點：自主原生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到(dào)GraphQL，GraphGL安裝，準備數據源，搭建GraphQL服務器，數據查詢

（4） Express——express 介紹，安裝和(hé / huò)創建基于(yú)Express的(de)項目，Express 4.1x 初始化項目詳解，路由簡介，模闆引擎EJS，模闆引擎Pug（Jade）

（5）Koa——Koa入門、Koa應用、中間件、Context、async await、請求與響應

（6）測試框架mocha——搭建框架、斷言assert、項目測試、運行多個(gè)測試

（7）socket 即時(shí)通信項目——Socket簡介和(hé / huò)通訊流程，基于(yú)net模塊實現socket，WebSocket，Socket.io

項目十九：Node.js高級全棧項目

所含知識點：基于(yú)Vue+Node+MongoDB+微信的(de)高級全棧項目開發

項目二十：大(dà)數據可視化

所含知識點：數據可視化入門，數據可視化基礎，零編程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau，D3.js詳解，D3.js 入門，D3.js 高級應用，D3.js 應用工具：NVD3、n3，charts，Highcharts，FusionCharts，Polymaps

在(zài)前端學習的(de)起步階段，最重要(yào / yāo)的(de)就(jiù)是(shì)要(yào / yāo)有明确目标和(hé / huò)合理的(de)學習規劃，爲(wéi / wèi)此小編特别爲(wéi / wèi)大(dà)家總結了(le／liǎo)web前端基礎學習階段的(de)四大(dà)學習要(yào / yāo)點，希望能讓大(dà)大(dà)家的(de)學習變得更加高效：

一、基本知識的(de)掌握 在(zài)我們梳理的(de)知識架構中，按照我們分析的(de)兩個(gè)維度裏最前置的(de)、最淺顯的(de)部分，作爲(wéi / wèi)打基礎的(de)階段，必須要(yào / yāo)在(zài)這(zhè)個(gè)過程中更多投入到(dào)實踐中去，我們通常做的(de)多了(le／liǎo)、熟練了(le／liǎo)，就(jiù)認爲(wéi / wèi)這(zhè)部分知識和(hé / huò)内容掌握。

二、常用工具的(de)掌握 對于(yú)常用工具的(de)掌握應該掌握一些有大(dà)公司或專業團隊背景的(de)流行工具，這(zhè)些工具的(de)熟練掌握能夠提升專業度、職業度，同時(shí)，能提升我們的(de)工作效率。

三、溝通技巧的(de)掌握 在(zài)國(guó)内，技術人(rén)員通常都是(shì)自己制定方案、自己執行方案，在(zài)執行過程中又缺乏相關産品、交互設計等人(rén)員的(de)溝通，大(dà)多是(shì)在(zài)自己的(de)思路貫徹下進行開發，久而(ér)久之(zhī)，我們習慣于(yú)信任自己的(de)觀點、在(zài)自己的(de)視角看問題，對于(yú)挑戰總是(shì)百般地(dì / de)“據理”力争。我們需要(yào / yāo)更多提升的(de)是(shì)，如何在(zài)對方的(de)視角看問題、如何在(zài)用戶的(de)視角看問題。

四、良好的(de)開發習慣 開發習慣是(shì)養成的(de)，一旦有不(bù)好的(de)習慣，對于(yú)将來(lái)去修正帶來(lái)的(de)将是(shì)很大(dà)的(de)麻煩，培養良好的(de)開發習慣一定要(yào / yāo)從起步時(shí)做起，例如：寫代碼之(zhī)前先分析、先寫文檔、先寫注釋等等。

最後希望大(dà)家通過自己的(de)努力與學習，都能成爲(wéi / wèi)一名能力全棧的(de)web前端工程師。