目前web前端工程師日均崗位缺口已經(jīng)超過50000，隨著互聯(lián)網(wǎng)+的深入發(fā)展，html5作為前端展示技術(shù)，市場人才需求量將呈直線上漲。

Web前端工程師的崗位職責是利用HTML、CSS、Java、DOM等各種web技能結(jié)合產(chǎn)品的界面開發(fā)，制作標準化純手工代碼，并增加交互功能，豐富互聯(lián)網(wǎng)的Web開拓，致力于改進用戶體驗?，F(xiàn)如今，Web前端工程師已經(jīng)成為各大互聯(lián)網(wǎng)公司不可或缺的熱門職位，從業(yè)者隊伍日漸龐大，這其中不乏零基礎學習者和轉(zhuǎn)行人士。為了方便大家系統(tǒng)而全面的掌握前端基礎知識，小編特意整理了web前端開發(fā)入門學習線路圖，涵蓋20大實戰(zhàn)項目的知識點詳細講解，希望對大家的學習有所幫助。

項目一：PC端網(wǎng)站布局

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

項目二：HTML5+CSS3基礎項目

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

項目三：WebApp頁面布局項目

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

項目四：原生Java交互功能開發(fā)項目

所含知識點：基本語法，循環(huán)語句，函數(shù)與數(shù)組，String與Date，BOM與DOM，事件，拖拽效果，cookie存儲，正則表達式，Ajax，面向?qū)ο蠡A，運動與游戲開發(fā)

項目五：面向?qū)ο筮M階與ES5/ES6應用項目

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

項目六：Java工具庫自主研發(fā)項目

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

項目七：jQuery經(jīng)典交互特效開發(fā)

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

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

所含知識點：PHP，MySQL，HTTP(s)協(xié)議詳解，Ajax進階、跨域與Defered，Apache與Nginx 環(huán)境搭建與配置，接口的定義，Mock數(shù)據(jù)，Restful，前后端聯(lián)調(diào)，前端安全(XSS,CSRF,JSON注入)

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

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

項目十：PC端全棧開發(fā)項目

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

項目十一：應用Vue.js開發(fā)WebApp項目

所含知識點：Vue.js基礎，模塊化，單文件組件，路由，與服務器通信，狀態(tài)管理，單元測試與生產(chǎn)發(fā)布，服務端渲染SSR與Nuxt.js，基于Vue.js企業(yè)級項目開發(fā)(Mint UI, Element UI)

項目十二：應用React.js開發(fā)WebApp項目

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

項目十三：應用Angular開發(fā)WebApp項目

所含知識點：Type 基礎與進階，開發(fā)環(huán)境配置，Hello World，架構(gòu)、模塊與組件，模板，元數(shù)據(jù)、數(shù)據(jù)綁定與數(shù)據(jù)顯示，表單，服務與指令，依賴注入，路由，Ionic 3 MUI框架

項目十四：微信公眾號開發(fā)

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

項目十五：微信小程序開發(fā)

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

項目十六：React Native

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

項目十七：各類混合應用開發(fā)

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

項目十八：NodeJS全棧開發(fā)

所含知識點：

（1）Node.js基礎項目——NodeJS介紹，開發(fā)環(huán)境搭建，模塊與包管理工具，CommonJS模塊，URL網(wǎng)址解析，QueryString參數(shù)處理，HTTP模塊，HTTP小爬蟲，request方法，事件 events模塊，文件 fs模塊，Stream 流模塊，原生路由與參數(shù)接收，讀取圖片文件，npm s，Yarn 與 PM2

（2）MongoDB——MongoDB介紹與環(huán)境搭建，數(shù)據(jù)庫常用命令，Collection聚集集合，document文檔操作，聚集集合查詢，NodeJS連接MongoDB

（3）GraphGL——GraphQL初探：從REST到GraphQL，GraphGL安裝，準備數(shù)據(jù)源，搭建GraphQL服務器，數(shù)據(jù)查詢

（4） Express——express 介紹，安裝和創(chuàng)建基于Express的項目，Express 4.1x 初始化項目詳解，路由簡介，模板引擎EJS，模板引擎Pug（Jade）

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

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

（7）socket 即時通信項目——Socket簡介和通訊流程，基于net模塊實現(xiàn)socket，WebSocket，Socket.io

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

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

項目二十：大數(shù)據(jù)可視化

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

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

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

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

三、溝通技巧的掌握 在國內(nèi)，技術(shù)人員通常都是自己制定方案、自己執(zhí)行方案，在執(zhí)行過程中又缺乏相關(guān)產(chǎn)品、交互設計等人員的溝通，大多是在自己的思路貫徹下進行開發(fā)，久而久之，我們習慣于信任自己的觀點、在自己的視角看問題，對于挑戰(zhàn)總是百般地“據(jù)理”力爭。我們需要更多提升的是，如何在對方的視角看問題、如何在用戶的視角看問題。

四、良好的開發(fā)習慣 開發(fā)習慣是養(yǎng)成的，一旦有不好的習慣，對于將來去修正帶來的將是很大的麻煩，培養(yǎng)良好的開發(fā)習慣一定要從起步時做起，例如：寫代碼之前先分析、先寫文檔、先寫注釋等等。

最后希望大家通過自己的努力與學習，都能成為一名能力全棧的web前端工程師。

轉(zhuǎn)載于:https://www.cnblogs.com/coffees/p/9963599.html