前端學習還是很有趣的，可以較快的上手然後自己開發一些好玩的專案來練手，網上也可以一抓一大把關於前端開發的小專案，可是還是有新手在學習的時候不知道可以做什麼，以及怎麼做，因此，就整理了一些前端專案教程，希望可以幫助正在學習前端的小夥伴。為了方便閱讀，大概把前端可以做的專案分為三類：
然後依次推薦一些專案教程，想要學習的小夥伴可以看看~
遊戲類
其實很多常見的小遊戲都是純前端開發出來的，比如曾經風靡的2048、別踩白塊啊等等，簡單有趣，對於初學者來說，這些小遊戲是非常不錯的練手專案。
網頁版2048
專案通過搭建乙個網頁版的 2048 ，讓大家學習 web 應用程式的開發流程、以及如何讓應用在移動端自適應處理以應對各種大小的螢幕，布局和初始化，編寫遊戲的邏輯、實現讓它能移動，判定結果。
是不是和我們玩的2048一模一樣呀，o(∩_∩)o~
html5兩步實現拼圖遊戲
專案使用html5和css3實現的九宮格拼圖遊戲。只要兩步既可以實現炫酷的效果和動畫。詳細的講解，讓你清楚地知道每一句**的作用。自己開發完之後還可以玩玩，告訴你，你可以開發它，但是玩可不一定行哦~
網頁版掃雷
專案實現乙個web版本的掃雷遊戲，通過該專案將學習並實踐 j**ascript 和 css 等基本的web開發知識。
看著就有想玩的衝動啊，有木有~
網頁版-別踩白塊遊戲
專案用最基礎的html，css，以及原生的j**ascript實現乙個網頁版本的「別踩白塊」遊戲。
做完後可以試著玩玩，看看速度如何，太快或者太慢都可以隨時調整。
html5實現抓怪物小遊戲
j**ascript打地鼠遊戲
專案為打地鼠，是大家耳熟能詳的一款經典的小遊戲，用前端技術來實現這個遊戲，簡單有趣。
j**ascript按鍵控制坦克移動
專案使用j**ascript按鍵控制坦克在網頁上移動，通過使用很簡單的，清晰明了的**使坦克在頁面上平滑的移動，通過學習，可以掌握j**ascript的按鍵操作，從而讓頁面更好的與使用者互動。
看效果圖很簡單，但是只要稍微發揮你的想象力，把坦克改成其他的物體，就可以變成其他的小遊戲了，比如加乙個迷宮，就是走出迷宮遊戲了。
實用類
前面介紹了前端開發遊戲的專案教程，當然前端還可以開發一些非常實用的功能，比如小到**的導航條啊，乙個**頁面啊等等，這些在網頁上經常看到的頁面展示功能，基本都是前端開發出來的，因此，下面介紹一些比較實用的前端專案教程。
css與j**ascript實現選項卡
這個專案實現前端網頁經常用到的 tab 選項卡效果。主要用到 html、css 和 j**ascript 技術，比較適合前端入門練習。
一起來**吧
一到各種節假日就各種的**活動數不勝數，大獎很豐厚，但是，你懂得。這個專案教大家使用css3來製作乙個**轉盤，一窺**轉盤的秘密。
j**a和websocket開發網頁聊天室
websocket是html5一種新的協議，它實現了瀏覽器與伺服器全雙工通訊，這個專案使用websocket來開發網頁聊天室，前端框架會使用amazeui，後台使用j**a，編輯器使用umeditor。
瀑布流載入牆
canvas實現放大鏡效果
專案由 html5 的 canvas 實現放大鏡效果，和**放大器類似的效果，主要依靠 canvas 中的 drawimage() 函式，希望能通過實現這個簡單的專案來讓大家初步認識 canvas ，學會基本的 canvas 操作。
用css和jquery打造乙個簡單的編輯器
120行**實現簡單的即時搜尋
純前端打造實時markdown編輯器
專案通過純前端打造乙個實時 markdown 編輯器，用到的庫或框架主要有 marked，ace，highlight.js，bootstrap。通過本實驗學習如何編寫乙個 web 應用程式的相關知識。
css3實現「紅包**」模糊效果
使用electron編寫跨平台桌面應用
該專案主要學習如何用 electron 配合 j**ascript 等 web 技術建立跨 linux/windows/macos 平台的桌面應用。
好玩類
前端還可以用比較簡單的方式實現一些可愛的東西，比如暖男-大白，萌寵-小黃人等等，只要你能想到的，幾乎都可以用前端來實現，下面就介紹幾個專案教程。
打造網頁版「大白」
該專案利用 html 和 css 來打造《超能陸戰隊》裡的 「暖男」 -「大白」。學習如何用 html 結合 css 來設計高階大氣上檔次的圖，並了解 html 布局，css 構建物件的樣式。
j**ascript實現玫瑰花
專案學習如何在網頁中如何使用j**ascript語言實現一朵漂亮的玫瑰花。其中會用到html，css，j**ascript等技術。
這個玫瑰花的最後效果是慢慢開放和顯現出來的，很浪漫的趕腳啊~
scss（sass）畫小黃人
專案通過 scss（sass）畫乙個會眨眼睛的小黃人，主要學習 css3。其中將涉及 sass 安裝，**的編寫，以及繪製小黃人的相關結構邏輯。
看完以上3個專案，你能想象都是用前端來實現的麼，o(∩_∩)o~
最後
以上呢，介紹了那麼多的前端開發專案，如果你還說你找不到專案，不知道做什麼，沒有完整的教程，那麼就是你的不對了，所以，挑選乙個感興趣的專案開始學習吧！
web前端學習***21 598399936
前端練手小專案 貪吃蛇
雖然不難 但是可以說 從頭到尾都是自己想的！開心 下面說一下js方面的詳細思路以及遇到的問題，獨立寫下來還是收穫比較大 這裡我的規則就是簡化的版本，也就是隨機出現食物，每次蛇吃到長度就加一。這個專案還比較簡單，因此事件需要繫結的就三個 1 按鍵按鈕 給document全域性繫結，這裡採用keyup而...
servlet練手專案
完成如下內容 首先進行資料庫設計，使用者名稱和密碼都設定為varchar自動控制長度 password在資料庫裡是關鍵字，加個下劃線避免 create database webregist use webregist create table user id int 11 auto incremen...
Python練手專案0011
敏感詞文字檔案 filtered words.txt，裡面的內容為以下內容，當使用者輸入敏感詞語時，則列印出 freedom，否則列印出 human rights。coding utf 8 created on thu jan 12 13 55 35 2017 author sky def tran...