當(dāng)下前端開發(fā)可以說(shuō)是一個(gè)比較火的職業(yè)，所以學(xué)習(xí)的人比較多，不管是培訓(xùn)還是自學(xué)都是希望通過前端可以找到一份好的工作，但是很多自學(xué)的朋友在自學(xué)過程中有些盲目，不僅大大降低了學(xué)習(xí)的效率，而且也會(huì)打擊自己的學(xué)習(xí)熱情。

那么當(dāng)我們學(xué)習(xí)了前端的一部分知識(shí)之后，對(duì)前端有了進(jìn)一步的了解，我們就急需要一些項(xiàng)目去幫我們整理一下自己學(xué)習(xí)的知識(shí)點(diǎn)以及提高一下編程能力，這樣更有助于我們的學(xué)習(xí)和工作實(shí)踐，最重要的是提高自己的項(xiàng)目經(jīng)驗(yàn)，對(duì)于找工作而言有著大大的幫助。

下面小編整理了幾個(gè)不錯(cuò)的web前端項(xiàng)目，在學(xué)習(xí)前端的新人可以拿去練練手。

項(xiàng)目一：小米官網(wǎng)

首先選擇小米官網(wǎng)為第一個(gè)實(shí)戰(zhàn)案例，是因?yàn)閯傞_始入門，有個(gè)參考點(diǎn)，另外站點(diǎn)比較偏向目前的卡片式設(shè)計(jì)，實(shí)現(xiàn)常見效果。目的為學(xué)者練*****官網(wǎng)，熟悉 div+css 布局。

項(xiàng)目二：響應(yīng)式

此站點(diǎn)特效較多，所以通過練習(xí)編寫次站點(diǎn)，學(xué)生可以更多練習(xí) CSS3 的新特性過渡與動(dòng)畫的實(shí)現(xiàn)，并且可以很好的練習(xí) div+css 布局。

項(xiàng)目三：IMMERSE 音樂播放器

本項(xiàng)目為音樂類項(xiàng)目，主要實(shí)現(xiàn)音樂首頁(yè)展示，今日推薦類別，歌曲列表，歌曲播放及歌手列表和搜索功能。主要練習(xí) Vue 的基礎(chǔ)應(yīng)用和組件如何設(shè)計(jì)。項(xiàng)目如何構(gòu)架與測(cè)試。通過21本項(xiàng)目可以讓學(xué)者更快的熟悉 Vue 框架的使用。并且熟練的構(gòu)建整個(gè)項(xiàng)目需求的架構(gòu)。

技術(shù)棧：Vue + Vue-Router + Axios + Flex + ES6。

項(xiàng)目四：登錄注冊(cè)認(rèn)證系統(tǒng)

登錄認(rèn)證系統(tǒng)基本上是每個(gè)項(xiàng)目的必備品，我們單獨(dú)拿出來(lái)，做詳細(xì)講解，并形成一個(gè)獨(dú)立的項(xiàng)目，這樣大家在日后的開發(fā)中，可以隨時(shí)可拔插式增加到自己的項(xiàng)目中。

技術(shù)棧：React + Redux + React-Router + BootStrap + Axios + Redux-Thunk + 工具庫(kù)(lodash\classnames 等)。

項(xiàng)目五：美食網(wǎng)(移動(dòng)端)

項(xiàng)目為移動(dòng)端項(xiàng)目，針對(duì) M 站進(jìn)行布局處理，項(xiàng)目為手機(jī)外派類 web 站點(diǎn)，功能包含，首頁(yè)店鋪展示，店鋪餐飲列表，具體視頻詳情等頁(yè)面。

項(xiàng)目六：Ego 商城后臺(tái)管理系統(tǒng)

商城后臺(tái)管理系統(tǒng)是目前非常常見的管理系統(tǒng)，當(dāng)然，類似的管理系統(tǒng)包含內(nèi)容管理、產(chǎn)品 管理、人員管理等系統(tǒng)都是類似的，所以我們通過此后臺(tái)系統(tǒng)了解大部分的系統(tǒng)的常見功能， 主要針對(duì)產(chǎn)品、內(nèi)容、規(guī)格參數(shù)等進(jìn)行增刪改查的操作。

技術(shù)棧：Vue + Vuex + Vue-Router + Element UI + Axios + 權(quán)限管理。

項(xiàng)目七：微信小程序-藍(lán)莓派社區(qū)

此階段的內(nèi)容為微信小程序開發(fā)，本階段并非以基礎(chǔ)知識(shí)點(diǎn)開始入手講解，基于學(xué)者經(jīng)歷過以上的學(xué)習(xí)，在此時(shí)已經(jīng)掌握項(xiàng)目框架，包含常見的一些實(shí)現(xiàn)規(guī)范，所以，這里我們將直接講解項(xiàng)目，根據(jù)項(xiàng)目需求的效果使用微信小程序技術(shù)實(shí)現(xiàn)對(duì)應(yīng)功能。

技術(shù)棧：微信小程序。

項(xiàng)目八：推廣類移動(dòng)端頁(yè)面

這是一款測(cè)試類產(chǎn)品，用戶輸入名稱可以根據(jù)用戶名名稱進(jìn)行分析，給出不同的運(yùn)勢(shì)結(jié)果，并且項(xiàng)目是嵌套在 app 中的，通過 iOS 和 Android 的 webview 進(jìn)行加載。

技術(shù)棧：Swiper+jQuery+REM+Less。

項(xiàng)目九：藍(lán)莓派社區(qū)

本項(xiàng)目名稱為藍(lán)莓派，主要為音樂社區(qū)類型。包含較多的交互功能，例如滑動(dòng)門，雪碧圖使用，模態(tài)框，瀑布流和焦點(diǎn)輪播圖等效果。當(dāng)然，前后端交互也是不可少的，主要理解前后端交互流程與練習(xí)各種交互實(shí)現(xiàn)。

技術(shù)棧：JavaScript+jQuery+REM+響應(yīng)式。

項(xiàng)目十：宜居

本項(xiàng)目是租房類 WebApp,注重移動(dòng)端布局，功能的實(shí)現(xiàn)。其中包含，登錄注冊(cè)、首頁(yè)展示、城市選擇、搜索功能、詳情展示、上拉加載等功能。

技術(shù)棧：React + React-Router + Redux + Fetch。

整理不宜，建議點(diǎn)贊收藏學(xué)習(xí)！