不要再說找不到前端項目練手了！

前端學習仍是頗有趣的，能夠較快的上手而後本身開發一些好玩的項目來練手，網上也能夠一抓一大把關於前端開發的小項目，但是仍是有新手在學習的時候不知道能夠作什麼，以及怎麼作，所以，實驗樓就整理了一些前端項目教程，但願能夠幫助正在學習前端的小夥伴。

爲了方便閱讀，大概把前端能夠作的項目分爲三類：

• 遊戲類
• 實用類
• 好玩類

而後依次推薦一些項目教程，想要學習的小夥伴能夠看看~

遊戲類

其實不少常見的小遊戲都是純前端開發出來的，好比曾經風靡的204八、別踩白塊啊等等，簡單有趣，對於初學者來講，這些小遊戲是很是不錯的練手項目。

網頁版2048

項目經過搭建一個網頁版的 2048 ，讓你們學習 web 應用程序的開發流程、以及如何讓應用在移動端自適應處理以應對各類大小的屏幕，佈局和初始化，編寫遊戲的邏輯、實現讓它能移動，斷定結果。

是否是和咱們玩的2048如出一轍呀，O(∩_∩)O~

HTML5兩步實現拼圖遊戲

項目使用HTML5和css3實現的九宮格拼圖遊戲。只要兩步既能夠實現炫酷的效果和動畫。詳細的講解，讓你清楚地知道每一句代碼的做用。

本身開發完以後還能夠玩玩，告訴你，你能夠開發它，可是玩可不必定行哦~

網頁版掃雷

項目實現一個Web版本的掃雷遊戲，經過該項目將學習並實踐 JavaScript 和 CSS 等基本的Web開發知識。

看着就有想玩的衝動啊，有木有~

網頁版-別踩白塊遊戲

項目用最基礎的html，css，以及原生的JavaScript實現一個網頁版本的「別踩白塊」遊戲。

作完後能夠試着玩玩，看看速度如何，太快或者太慢均可以隨時調整。

HTML5實現抓怪物小遊戲

項目利用 HTML5 的 Canvas 特性，結合 js 來開發一個抓小怪物的小遊戲。從中咱們能夠學習到如何用 HTML5 來構建一個 WebApp。

JavaScript打地鼠遊戲

項目爲打地鼠，是你們耳熟能詳的一款經典的小遊戲，用前端技術來實現這個遊戲，簡單有趣。

JavaScript按鍵控制坦克移動

項目使用javascript按鍵控制坦克在網頁上移動，經過使用很簡單的，清晰明瞭的代碼使坦克在頁面上平滑的移動，經過學習，能夠掌握javascript的按鍵操做，從而讓頁面更好的與用戶互動。

看效果圖很簡單，可是隻要稍微發揮你的想象力，把坦克改爲其餘的物體，就能夠變成其餘的小遊戲了，好比加一個迷宮，就是走出迷宮遊戲了。

實用類

前面介紹了前端開發遊戲的項目教程，固然前端還能夠開發一些很是實用的功能，好比小到網站的導航條啊，一個抽獎頁面啊等等，這些在網頁上常常看到的頁面展現功能，基本都是前端開發出來的，所以，下面介紹一些比較實用的前端項目教程。

CSS與JavaScript實現選項卡

這個項目實現前端網頁常常用到的 Tab 選項卡效果。主要用到 HTML、CSS 和 JavaScript 技術，比較適合前端入門練習。

一塊兒來抽獎吧

一到各類節假日就各類的抽獎活動數不勝數，大獎很豐厚，可是，你懂得。這個項目教你們使用CSS3來製做一個抽獎轉盤，一窺抽獎轉盤的祕密。

Java和WebSocket開發網頁聊天室

WebSocket是HTML5一種新的協議，它實現了瀏覽器與服務器全雙工通訊，這個項目使用WebSocket來開發網頁聊天室，前端框架會使用AmazeUI，後臺使用Java，編輯器使用UMEditor。

瀑布流加載圖片牆

項目經過瀑布流加載圖片牆，實現無限圖片展現的效果，相似百度圖片同樣的加載方式，體現圖片的交錯排列。從中學習在沒有後端開發者提供數據的背景下，由咱們前端本身模擬數據及數據接口，本身就能給本身提供任何本身想要的數據。

canvas實現放大鏡效果

項目由 HTML5 的 canvas 實現放大鏡效果，和淘寶圖片放大器相似的效果，主要依靠 canvas 中的 drawImage() 函數，但願能經過實現這個簡單的項目來讓你們初步認識 canvas ，學會基本的 canvas 操做。

用CSS和jQuery打造一個簡單的圖片編輯器

項目利用 CSS 的 filter 和簡單的 Jquery 代碼來實現一個簡單的圖片編輯器包括對圖片的透明度，黑白，圖片亮度等調節。

120行代碼實現簡單的即時搜索

項目利用 Meteor 和 MongoDB 實現一個簡單的即時搜索服務。經過本項目將學習到 Mongodb 數據庫的操做，Meteor 快速製做 Web App。

純前端打造實時markdown編輯器

項目經過純前端打造一個實時 markdown 編輯器，用到的庫或框架主要有 marked，Ace，highlight.js，Bootstrap。經過本實驗學習如何編寫一個 web 應用程序的相關知識。

HTML5 本地裁剪圖片

項目利用HTML5的canvas技術，結合HTML5的File API來實現圖片的本地裁剪。經過本實驗將學習到如何用 HTML5編寫網絡應用。

CSS3實現「紅包照片」模糊效果

微信朋友圈裏的紅包照片，還有 ios7 帶來的「毛玻璃」菜單效果都很吸引眼球，該項目就嘗試用熟悉的 CSS3 來實現這個效果。

使用 Electron 編寫跨平臺桌面應用

該項目主要學習如何用 Electron 配合 JavaScript 等 web 技術建立跨 Linux/Windows/macOS 平臺的桌面應用。

好玩類

前端還能夠用比較簡單的方式實現一些可愛的東西，好比暖男-大白，萌寵-小黃人等等，只要你能想到的，幾乎均可以用前端來實現，下面就介紹幾個項目教程。

打造網頁版「大白」

該項目利用 HTML 和 CSS 來打造《超能陸戰隊》裏的 「暖男」 -「大白」。學習如何用 HTML 結合 CSS 來設計高端大氣上檔次的圖，並瞭解 HTML 佈局，CSS 構建對象的樣式。

JavaScript實現玫瑰花

項目學習如何在網頁中如何使用JavaScript語言實現一朵漂亮的玫瑰花。其中會用到html，css，javascript等技術。

這個玫瑰花的最後效果是慢慢開放和顯現出來的，很浪漫的趕腳啊~

SCSS（SASS）畫小黃人

項目經過 SCSS（SASS）畫一個會眨眼睛的小黃人，主要學習 CSS3。其中將涉及 SASS 安裝，代碼的編寫，以及繪製小黃人的相關結構邏輯。

看完以上3個項目，你能想象都是用前端來實現的麼，O(∩_∩)O~

最後

以上呢，實驗樓介紹了那麼多、辣麼多的前端開發項目，若是你還說你找不到項目，不知道作什麼，沒有完整的教程，那麼就是你的不對了，因此，挑選一個感興趣的項目開始學習吧！