前端學(xué)習(xí)還是很有趣的，可以較快的上手然后自己開發(fā)一些好玩的項(xiàng)目來(lái)練手，網(wǎng)上也可以一抓一大把關(guān)于前端開發(fā)的小項(xiàng)目，可是還是有新手在學(xué)習(xí)的時(shí)候不知道可以做什么，以及怎么做，因此，實(shí)驗(yàn)樓就整理了一些前端項(xiàng)目教程，希望可以幫助正在學(xué)習(xí)前端的小伙伴。

為了方便閱讀，大概把前端可以做的項(xiàng)目分為三類：?
- 游戲類?
- 實(shí)用類?
- 好玩類

然后依次推薦一些項(xiàng)目教程，想要學(xué)習(xí)的小伙伴可以看看~

游戲類

其實(shí)很多常見的小游戲都是純前端開發(fā)出來(lái)的，比如曾經(jīng)風(fēng)靡的2048、別踩白塊啊等等，簡(jiǎn)單有趣，對(duì)于初學(xué)者來(lái)說(shuō)，這些小游戲是非常不錯(cuò)的練手項(xiàng)目。

網(wǎng)頁(yè)版2048

項(xiàng)目通過(guò)搭建一個(gè)網(wǎng)頁(yè)版的 2048 ，讓大家學(xué)習(xí) web 應(yīng)用程序的開發(fā)流程、以及如何讓應(yīng)用在移動(dòng)端自適應(yīng)處理以應(yīng)對(duì)各種大小的屏幕，布局和初始化，編寫游戲的邏輯、實(shí)現(xiàn)讓它能移動(dòng)，判定結(jié)果。

是不是和我們玩的2048一模一樣呀，O(∩_∩)O~

HTML5兩步實(shí)現(xiàn)拼圖游戲

項(xiàng)目使用HTML5和css3實(shí)現(xiàn)的九宮格拼圖游戲。只要兩步既可以實(shí)現(xiàn)炫酷的效果和動(dòng)畫。詳細(xì)的講解，讓你清楚地知道每一句代碼的作用。

自己開發(fā)完之后還可以玩玩，告訴你，你可以開發(fā)它，但是玩可不一定行哦~

網(wǎng)頁(yè)版掃雷

項(xiàng)目實(shí)現(xiàn)一個(gè)Web版本的掃雷游戲，通過(guò)該項(xiàng)目將學(xué)習(xí)并實(shí)踐 JavaScript 和 CSS 等基本的Web開發(fā)知識(shí)。

看著就有想玩的沖動(dòng)啊，有木有~

網(wǎng)頁(yè)版-別踩白塊游戲

項(xiàng)目用最基礎(chǔ)的html，css，以及原生的JavaScript實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)版本的“別踩白塊”游戲。

做完后可以試著玩玩，看看速度如何，太快或者太慢都可以隨時(shí)調(diào)整。

HTML5實(shí)現(xiàn)抓怪物小游戲

項(xiàng)目利用 HTML5 的 Canvas 特性，結(jié)合 js 來(lái)開發(fā)一個(gè)抓小怪物的小游戲。從中我們可以學(xué)習(xí)到如何用 HTML5 來(lái)構(gòu)建一個(gè) WebApp。

JavaScript打地鼠游戲

項(xiàng)目為打地鼠，是大家耳熟能詳?shù)囊豢罱?jīng)典的小游戲，用前端技術(shù)來(lái)實(shí)現(xiàn)這個(gè)游戲，簡(jiǎn)單有趣。

JavaScript按鍵控制坦克移動(dòng)

項(xiàng)目使用javascript按鍵控制坦克在網(wǎng)頁(yè)上移動(dòng)，通過(guò)使用很簡(jiǎn)單的，清晰明了的代碼使坦克在頁(yè)面上平滑的移動(dòng)，通過(guò)學(xué)習(xí)，可以掌握javascript的按鍵操作，從而讓頁(yè)面更好的與用戶互動(dòng)。

看效果圖很簡(jiǎn)單，但是只要稍微發(fā)揮你的想象力，把坦克改成其他的物體，就可以變成其他的小游戲了，比如加一個(gè)迷宮，就是走出迷宮游戲了。

實(shí)用類

前面介紹了前端開發(fā)游戲的項(xiàng)目教程，當(dāng)然前端還可以開發(fā)一些非常實(shí)用的功能，比如小到網(wǎng)站的導(dǎo)航條啊，一個(gè)抽獎(jiǎng)頁(yè)面啊等等，這些在網(wǎng)頁(yè)上經(jīng)常看到的頁(yè)面展示功能，基本都是前端開發(fā)出來(lái)的，因此，下面介紹一些比較實(shí)用的前端項(xiàng)目教程。

CSS與JavaScript實(shí)現(xiàn)選項(xiàng)卡

這個(gè)項(xiàng)目實(shí)現(xiàn)前端網(wǎng)頁(yè)經(jīng)常用到的 Tab 選項(xiàng)卡效果。主要用到 HTML、CSS 和 JavaScript 技術(shù)，比較適合前端入門練習(xí)。

一起來(lái)抽獎(jiǎng)吧

一到各種節(jié)假日就各種的抽獎(jiǎng)活動(dòng)數(shù)不勝數(shù)，大獎(jiǎng)很豐厚，但是，你懂得。這個(gè)項(xiàng)目教大家使用CSS3來(lái)制作一個(gè)抽獎(jiǎng)轉(zhuǎn)盤，一窺抽獎(jiǎng)轉(zhuǎn)盤的秘密。

Java和WebSocket開發(fā)網(wǎng)頁(yè)聊天室

WebSocket是HTML5一種新的協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，這個(gè)項(xiàng)目使用WebSocket來(lái)開發(fā)網(wǎng)頁(yè)聊天室，前端框架會(huì)使用AmazeUI，后臺(tái)使用Java，編輯器使用UMEditor。

瀑布流加載圖片墻

項(xiàng)目通過(guò)瀑布流加載圖片墻，實(shí)現(xiàn)無(wú)限圖片展示的效果，類似百度圖片一樣的加載方式，體現(xiàn)圖片的交錯(cuò)排列。從中學(xué)習(xí)在沒(méi)有后端開發(fā)者提供數(shù)據(jù)的背景下，由我們前端自己模擬數(shù)據(jù)及數(shù)據(jù)接口，自己就能給自己提供任何自己想要的數(shù)據(jù)。

canvas實(shí)現(xiàn)放大鏡效果

項(xiàng)目由 HTML5 的 canvas 實(shí)現(xiàn)放大鏡效果，和淘寶圖片放大器類似的效果，主要依靠 canvas 中的 drawImage() 函數(shù)，希望能通過(guò)實(shí)現(xiàn)這個(gè)簡(jiǎn)單的項(xiàng)目來(lái)讓大家初步認(rèn)識(shí) canvas ，學(xué)會(huì)基本的 canvas 操作。

用CSS和jQuery打造一個(gè)簡(jiǎn)單的圖片編輯器

項(xiàng)目利用 CSS 的 filter 和簡(jiǎn)單的 Jquery 代碼來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片編輯器包括對(duì)圖片的透明度，黑白，圖片亮度等調(diào)節(jié)。

120行代碼實(shí)現(xiàn)簡(jiǎn)單的即時(shí)搜索

項(xiàng)目利用 Meteor 和 MongoDB 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的即時(shí)搜索服務(wù)。通過(guò)本項(xiàng)目將學(xué)習(xí)到 Mongodb 數(shù)據(jù)庫(kù)的操作，Meteor 快速制作 Web App。

純前端打造實(shí)時(shí)markdown編輯器

項(xiàng)目通過(guò)純前端打造一個(gè)實(shí)時(shí) markdown 編輯器，用到的庫(kù)或框架主要有 marked，Ace，highlight.js，Bootstrap。通過(guò)本實(shí)驗(yàn)學(xué)習(xí)如何編寫一個(gè) web 應(yīng)用程序的相關(guān)知識(shí)。

HTML5 本地裁剪圖片

項(xiàng)目利用HTML5的canvas技術(shù)，結(jié)合HTML5的File API來(lái)實(shí)現(xiàn)圖片的本地裁剪。通過(guò)本實(shí)驗(yàn)將學(xué)習(xí)到如何用 HTML5編寫網(wǎng)絡(luò)應(yīng)用。

CSS3實(shí)現(xiàn)“紅包照片”模糊效果

微信朋友圈里的紅包照片，還有 ios7 帶來(lái)的“毛玻璃”菜單效果都很吸引眼球，該項(xiàng)目就嘗試用熟悉的 CSS3 來(lái)實(shí)現(xiàn)這個(gè)效果。

使用 Electron 編寫跨平臺(tái)桌面應(yīng)用

該項(xiàng)目主要學(xué)習(xí)如何用 Electron 配合 JavaScript 等 web 技術(shù)創(chuàng)建跨 Linux/Windows/macOS 平臺(tái)的桌面應(yīng)用。

好玩類

前端還可以用比較簡(jiǎn)單的方式實(shí)現(xiàn)一些可愛的東西，比如暖男-大白，萌寵-小黃人等等，只要你能想到的，幾乎都可以用前端來(lái)實(shí)現(xiàn)，下面就介紹幾個(gè)項(xiàng)目教程。

打造網(wǎng)頁(yè)版「大白」

該項(xiàng)目利用 HTML 和 CSS 來(lái)打造《超能陸戰(zhàn)隊(duì)》里的 “暖男” -「大白」。學(xué)習(xí)如何用 HTML 結(jié)合 CSS 來(lái)設(shè)計(jì)高端大氣上檔次的圖，并了解 HTML 布局，CSS 構(gòu)建對(duì)象的樣式。

JavaScript實(shí)現(xiàn)玫瑰花

項(xiàng)目學(xué)習(xí)如何在網(wǎng)頁(yè)中如何使用JavaScript語(yǔ)言實(shí)現(xiàn)一朵漂亮的玫瑰花。其中會(huì)用到html，css，javascript等技術(shù)。

這個(gè)玫瑰花的最后效果是慢慢開放和顯現(xiàn)出來(lái)的，很浪漫的趕腳啊~

SCSS（SASS）畫小黃人

項(xiàng)目通過(guò) SCSS（SASS）畫一個(gè)會(huì)眨眼睛的小黃人，主要學(xué)習(xí) CSS3。其中將涉及 SASS 安裝，代碼的編寫，以及繪制小黃人的相關(guān)結(jié)構(gòu)邏輯。

看完以上3個(gè)項(xiàng)目，你能想象都是用前端來(lái)實(shí)現(xiàn)的么，O(∩_∩)O~

最后

以上呢，實(shí)驗(yàn)樓介紹了那么多、辣么多的前端開發(fā)項(xiàng)目，如果你還說(shuō)你找不到項(xiàng)目，不知道做什么，沒(méi)有完整的教程，那么就是你的不對(duì)了，所以，挑選一個(gè)感興趣的項(xiàng)目開始學(xué)習(xí)吧！

?

總結(jié)

以上是生活随笔為你收集整理的不要再说找不到前端项目练手了！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。