20?個(gè)?JavaScript+Html+CSS?練手的小項(xiàng)目

言：

最近在 GitHub 上發(fā)現(xiàn)了一個(gè) vanillawebprojects[1] 開(kāi)源倉(cāng)庫(kù)，里面收集了 20 個(gè) JavaScript+Html+CSS的練手項(xiàng)目，沒(méi)有使用任何框架，可以讓你從基礎(chǔ)入門(mén)到深入學(xué)習(xí)。這些項(xiàng)目原本是 Udemy 上 20 Web Projects With Vanilla JavaScript 課程的一部分，但是如果你已經(jīng)擁有了一些基礎(chǔ)，不妨試著看一下源碼，然后模仿實(shí)現(xiàn)吧

1. Form Validator 表單驗(yàn)證

判斷輸入的表單字段是否合法

2. Movie Seat Booking 預(yù)定電影座位

一個(gè)簡(jiǎn)單的電影座位預(yù)定演示項(xiàng)目

3. Custom Video Player 定制視頻播放器

一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)視頻播放器

4. Exchange Rate Calculator 匯率計(jì)算器

計(jì)算不同貨幣的兌換匯率

5. DOM Array Methods Project DOM 數(shù)組方法

練習(xí)如何操作 DOM 數(shù)組

6. Menu Slider & Modal 動(dòng)態(tài)菜單以及彈窗

練習(xí)如何彈出登錄注冊(cè)窗口，以及滑動(dòng)彈出菜單

7. Hangman Game 字符偵探游戲

練習(xí)如何判斷隱藏字符是否正確

8. Mealfinder App 點(diǎn)餐應(yīng)用

簡(jiǎn)單的點(diǎn)餐查詢(xún)應(yīng)用

9. Expense Tracker 購(gòu)物結(jié)算應(yīng)用

簡(jiǎn)單的購(gòu)物車(chē)結(jié)算應(yīng)用

10. Music Player 音樂(lè)播放器

簡(jiǎn)單的網(wǎng)頁(yè)音樂(lè)播放器

11. Infinite Scrolling 網(wǎng)頁(yè)無(wú)限滾動(dòng)演示

網(wǎng)頁(yè)無(wú)限向下滾動(dòng)實(shí)現(xiàn)

12. Typing Game 打字游戲

簡(jiǎn)單的打字輸入游戲

13. Speech Text Reader 文本閱讀器

文本閱讀器

14. Memory Cards 記憶卡片

測(cè)試記憶的記憶卡片

15. LyricsSearch App 歌詞搜索應(yīng)用

網(wǎng)頁(yè)歌詞搜索器

16. Relaxer App 休閑呼吸應(yīng)用

模擬呼吸的節(jié)奏

17. Breakout Game 彈跳破冰游戲

簡(jiǎn)單的網(wǎng)頁(yè)破冰游戲

18. New Year Countdown 新年倒計(jì)時(shí)

網(wǎng)頁(yè)新年倒計(jì)時(shí)

19. Sortable List 榜單應(yīng)用

網(wǎng)頁(yè)財(cái)富榜單

20. Speak Number Guessing Game 猜數(shù)字游戲

說(shuō)出數(shù)字，猜測(cè)數(shù)字

今天我們給大家分享了，20 個(gè) JavaScript+Html+CSS 練手小項(xiàng)目，大家覺(jué)得哪個(gè)最簡(jiǎn)單，哪個(gè)最復(fù)雜呢？趕緊去 Github 倉(cāng)庫(kù)拉取項(xiàng)目，碼上行動(dòng)吧

歡迎關(guān)注公眾號(hào)：KnowHub 知識(shí)加油站！

參考資料

[1]

vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects

屆生或者要自學(xué)前端的同學(xué)看過(guò)來(lái)，這里有完整的前端路線(xiàn)圖+學(xué)習(xí)方法+項(xiàng)目學(xué)習(xí)+簡(jiǎn)歷；

一、前端學(xué)習(xí)時(shí)間安排表

HTML+CSS：25天
JavaScript：20天
環(huán)境基礎(chǔ)：15天
Bootstrap（15天）、jQuery UI（15天）、Amaze UI；流行的前端框架：jquery mobile、angular.Js（20天）、Vue.js（20天）、React.js（20天）
Echarts（1周）、tableau（1周）

以上時(shí)間安排是每天至少學(xué)習(xí)6小時(shí)的時(shí)間安排，大家可以根據(jù)每天學(xué)習(xí)的小時(shí)數(shù)字型加減天數(shù)。

二、前端學(xué)習(xí)資源

知識(shí)點(diǎn)包括了：HTML+CSS-->移動(dòng)web->JavaScript基礎(chǔ)-->Web APIs->數(shù)據(jù)交互&異步編程-->Node.js-->Vue2+Vue3-->React核心技術(shù)-->微信小程序。

黑馬程序員前端：2022年前端學(xué)習(xí)路線(xiàn)圖52 贊同 · 10 評(píng)論文章

很多小白開(kāi)始自學(xué)前端都是先來(lái)背HTML的標(biāo)簽，從HTML、body、div...往下背，跟背英語(yǔ)單詞一樣，學(xué)了背了就忘了，然后失去學(xué)習(xí)動(dòng)力。

其實(shí)正確的方式是，從靜態(tài)頁(yè)面的完成開(kāi)始，不用過(guò)于糾結(jié)記住標(biāo)簽，因?yàn)楹芏嗲岸舜笈６际峭ㄟ^(guò)多年的經(jīng)驗(yàn)形成了下意識(shí)的記憶。

HTML標(biāo)簽明白了之后，開(kāi)始了CSS學(xué)習(xí)，什么陰影，圓角、動(dòng)畫(huà)等等的，這些都是日常應(yīng)用。但是這里需要注意的是，要熟練掌握css定位的原理，盒子模型，等等，如果這些沒(méi)有弄清楚，javascript學(xué)習(xí)就會(huì)遇到困難。

更多HTML+CSS學(xué)習(xí)筆記如下（已完結(jié)）：

認(rèn)識(shí)網(wǎng)頁(yè) / HTML標(biāo)簽大全 / 表格 / 列表
CSS入門(mén)筆記 / Css樣式表 / emmet語(yǔ)法 / CSS的復(fù)合選擇器 / 顯示模式 /
CSS背景 / CSS三大特性 / 盒子模型 / 圓角邊框、盒子陰影、文字陰影
浮動(dòng)知識(shí)點(diǎn)匯總 / PS切圖 / CSS屬性書(shū)寫(xiě)順序（重點(diǎn)） / CSS練手之學(xué)成在線(xiàn)頁(yè)面制作
CSS定位的4種分類(lèi) / 學(xué)成在線(xiàn)模塊添加 / HTML+CSS之定位（position）的應(yīng)用
案例：淘寶輪播圖 / 元素的顯示與隱藏 / 土豆網(wǎng)鼠標(biāo)經(jīng)過(guò)顯示遮罩 /
【重點(diǎn)】CSS之精靈圖 / 字體圖標(biāo) / 用戶(hù)界面樣式源碼 / vertical-align 屬性應(yīng)用 /
溢出的文字省略號(hào)顯示 / 常見(jiàn)布局技巧+案例 / CSS新增選擇器 / 盒子模型和其他新特性

HTML+CSS項(xiàng)目《品優(yōu)購(gòu)》完整筆記+源碼（萬(wàn)字版可復(fù)制）：

HTML+CSS大項(xiàng)目1：品優(yōu)購(gòu)項(xiàng)目筆記+源碼（萬(wàn)字！收藏）
HTML+CSS大項(xiàng)目2：品優(yōu)購(gòu)項(xiàng)目筆記+源碼（萬(wàn)字！收藏）

移動(dòng)開(kāi)發(fā)筆記（更新中）

移動(dòng)WEB開(kāi)發(fā)之入門(mén)&視口 / 二倍圖 / 主流方案選擇 / 攜程網(wǎng)首頁(yè)案例制作
rem基礎(chǔ)&媒體查詢(xún) / less基礎(chǔ) / rem實(shí)際開(kāi)發(fā)適配方案 /

JavaScript基礎(chǔ)內(nèi)容（已完結(jié)）

認(rèn)識(shí)JavaScript / 注釋以及輸入輸出語(yǔ)句 / 變量的使用、語(yǔ)法擴(kuò)展、命名規(guī)范
數(shù)據(jù)類(lèi)型簡(jiǎn)介以及簡(jiǎn)單的數(shù)據(jù)類(lèi)型 / 獲取變量數(shù)據(jù)類(lèi)型/運(yùn)算符&算數(shù)運(yùn)算符 / 遞增和遞減運(yùn)算符
比較運(yùn)算符和邏輯運(yùn)算符 / 賦值運(yùn)算符以及運(yùn)算符優(yōu)先級(jí) / 流程控制-實(shí)際案例學(xué)習(xí)if語(yǔ)句
三元表達(dá)式&分支流程控制 switch 語(yǔ)句 / JavaScript的for循環(huán)學(xué)不明白怎么辦？
以案例學(xué)習(xí)JavaScript雙重for循環(huán) / JavaScript中while以及do while循環(huán)
JavaScript遍歷數(shù)組，附5個(gè)案例 / 函數(shù)的概念和使用/JavaScript函數(shù)的參數(shù)
JavaScript的返回值 / 函數(shù)案例練習(xí)

JavaScript最全拔高（更新中）
JavaScript面向?qū)ο箝_(kāi)發(fā)相關(guān)模式 / JavaScript創(chuàng)建對(duì)象簡(jiǎn)單方式到優(yōu)化 / JavaScript面向?qū)ο笥螒虬咐贺澇陨?/span>

其他資源：

TypeScript 中文手冊(cè)：官網(wǎng)翻譯版。
Javascript模塊化編程（一）：模塊的寫(xiě)法
Javascript模塊化編程（二）：AMD規(guī)范
Javascript模塊化編程（三）：require.js的用法

三、項(xiàng)目和簡(jiǎn)歷

這里就不多說(shuō)了，是什么寫(xiě)什么就好。

開(kāi)發(fā)經(jīng)驗(yàn)

? 精通 HTML、CSS、JS 基礎(chǔ)，熟悉 H5、CSS3 新屬性，熟悉 ES6 新特性
? 熟悉響應(yīng)式，flex 等頁(yè)面布局方式，熟練使用 less、sass
? 熟練運(yùn)用 Vue、React 前端開(kāi)發(fā)框架，了解 ReactNative 的基本實(shí)現(xiàn)原理
? 熟悉組件間的通信和數(shù)據(jù)的管理 , 熟練 Redux/Vuex 使用
? 熟悉常見(jiàn) UI 框架如：Bootstrap、Element-UI、Vant、Ant-design 等
? 熟悉 Webpack 等構(gòu)建工具
? 熟悉微信小程序開(kāi)發(fā)流程
? 熟練使用 Git 等項(xiàng)目管理工具
? 了解 NodeJS，了解 Express 框架開(kāi)發(fā)

項(xiàng)目經(jīng)歷（這里可以參考寫(xiě)）

項(xiàng)目一：優(yōu)聯(lián)校園后臺(tái)管理系統(tǒng)

項(xiàng)目描述：優(yōu)聯(lián)校園是一款大學(xué)生校園生活服務(wù)軟件，為在校大學(xué)生提供社團(tuán)活動(dòng)，二手交易，學(xué)生兼職，學(xué)生租房，

駕校報(bào)名、微商城等服務(wù)，項(xiàng)目技術(shù)棧：React + React-router + Axios + Ant-design + React-redux

責(zé)任描述：

1. 負(fù)責(zé)應(yīng)用管理模塊，包括社團(tuán)管理、二手交易、學(xué)生兼職、學(xué)生租房等界面，使用 Antd 中 Button , Form , Modal ,
Table 等組件來(lái)展示頁(yè)面
2. 使用 React-router 來(lái)配置路由，實(shí)現(xiàn)組件間頁(yè)面的跳轉(zhuǎn)
3. 使用 Axios 來(lái)請(qǐng)求數(shù)據(jù)并渲染頁(yè)面
4. 根據(jù)需求文檔完成業(yè)務(wù)邏輯
5. 抽離公共組件并封裝到項(xiàng)目組件庫(kù)中

自我介紹

多人說(shuō)不要寫(xiě)自我評(píng)價(jià)。覺(jué)得這個(gè)版塊非常沒(méi)有用。我認(rèn)為恰恰相反，千篇一律的自我評(píng)價(jià)，什么認(rèn)真啊踏實(shí)啊確實(shí)讓人反感。但是如果可以寫(xiě)成【敏捷開(kāi)發(fā)的忠實(shí)粉絲，單元測(cè)試驅(qū)動(dòng)開(kāi)發(fā)的實(shí)踐者，曾主動(dòng)重構(gòu)代碼】，【看書(shū)愛(ài)好者，年度目標(biāo)5本書(shū)，已完成4本，正在看《領(lǐng)域驅(qū)動(dòng)設(shè)計(jì)》】。有沒(méi)有感覺(jué)這樣的自我評(píng)價(jià)，就非常有意思？

經(jīng)我作為一名學(xué)生，也很苦惱自己會(huì)不知道如何學(xué)習(xí)編程，自己平時(shí)總結(jié)下來(lái)了相關(guān)的學(xué)習(xí)資源，大家平時(shí)也可以養(yǎng)成積累的好習(xí)慣，下面是一些簡(jiǎn)單的分享，適合剛?cè)腴T(mén)或者將進(jìn)入職場(chǎng)的大家。

1、菜鳥(niǎo)教程

https://www.runoob.com/

里面有各種語(yǔ)言的案例和講解，適合自己翻閱快速入門(mén)和對(duì)照著學(xué)習(xí)改錯(cuò)

2、博客園

https://www.cnblogs.com/

和csdn網(wǎng)站差不多，但是里面的內(nèi)容質(zhì)量高，適合自己快速找到有效的學(xué)習(xí)文章或者素材

3、CSDN

https://www.csdn.net/

CSDN內(nèi)容現(xiàn)在比較混雜，內(nèi)容相對(duì)來(lái)說(shuō)不太好了，但是里面的一些知識(shí)以及招聘信息等還是可以看看的

4、源碼網(wǎng)站

http://www.verysource.com/download/jpeg_6b_rar-603868.html

適合自己自學(xué)時(shí)練手的時(shí)候找到相關(guān)項(xiàng)目練習(xí)

5、我愛(ài)競(jìng)賽網(wǎng)

http://www.52jingsai.com/portal.php

如果你是一名大學(xué)生，可以在這上面施展拳腳，找到適合自己的比賽，國(guó)內(nèi)來(lái)說(shuō)是做的非常不錯(cuò)的網(wǎng)站了

6、源碼之家

https://www.mycodes.net/

看起來(lái)像一個(gè)界面不夠優(yōu)良的垃圾網(wǎng)站，但其實(shí)這個(gè)網(wǎng)站很良心，里面覆蓋面廣，收集了各個(gè)行業(yè)比較突出的人的文章和分享的內(nèi)容

7、騰訊軟件中心

https://pc.qq.com/

適合大家下載各種各樣的軟件，比如devC++編譯器，錄屏軟件，播放器等，下載速度快，不會(huì)出現(xiàn)各種各樣的垃圾網(wǎng)站

8、稿定設(shè)計(jì)

https://www.uupoop.com/

適合在線(xiàn)PS,無(wú)需下載ps軟件,也可以修圖等待，比較實(shí)用?方便

9、騰訊云+社區(qū)

https://cloud.tencent.com/developer

很多人被邀請(qǐng)到這上面開(kāi)始寫(xiě)作和推廣文章，也建立了各種論壇，但是我的技術(shù)有限，大多數(shù)大牛的文章自己知之甚少。

10、關(guān)注一些公眾號(hào)平臺(tái)，或者自己做一個(gè)申請(qǐng)一個(gè)公眾號(hào)或者其他網(wǎng)站賬號(hào)，把自己所積累的有用的知識(shí)做一個(gè)分累總結(jié)。方便自己復(fù)習(xí)用，這個(gè)特別有效果也是自己實(shí)行大半年以來(lái)的感悟，總結(jié)起來(lái)還是對(duì)自己有很大的幫助！

同樣，也希望我的這一些分享對(duì)你有幫助。

所以說(shuō)，想要在程序員生涯內(nèi)有更高的成就的話(huà)，最最重要的是盡可能的提升自己的編程能力，并且，與其想著怎么去提升，不如從現(xiàn)在開(kāi)始動(dòng)手動(dòng)腦，如果對(duì)于C/C++感興趣的話(huà)，可以關(guān)注+私信小編【C/C++編程】有一些視頻希望可以幫助到你，學(xué)習(xí)不怕從零開(kāi)始，就怕從不開(kāi)始。

在線(xiàn)咨詢(xún)

上一篇：CSS 中幾種最常用的水平垂直居中的方法
下一篇：HTML 文本格式化

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商