前端練手項目

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

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

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

遊戲類

其實不少常見的小遊戲都是純前端開發出來的，好比曾經風靡的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 應用程序的相關知識。

 

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~

最後

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

 WEB前端學習交流羣21    598399936