28個(gè)適合開(kāi)發(fā)者練手的 WEB UI 項(xiàng)目（H5&CSS3&JS）
英文 | https://niemvuilaptrinh.medium.com/29-projects-to-help-you-practice-html-css-javascript-d14810589097
今天我們將深入學(xué)習(xí)UI Page項(xiàng)目以提高編程設(shè)計(jì)能力，以及如何將HTML、CSS、Javascript應(yīng)用到實(shí)際的網(wǎng)站開(kāi)發(fā)中！
01、響應(yīng)式社交平臺(tái)
Demo地址：https://codepen.io/TurkAysenur/pen/RwWKYMO
02、福克斯新聞模板界面
Demo地址：https://codepen.io/havardob/pen/GRjPywY
03、仿Netflix 登陸頁(yè)面
Demo地址：https://codepen.io/bradtraversy/pen/yWPONg
04、書(shū)店界面
Demo地址：https://codepen.io/TurkAysenur/pen/JjGKKrP
05、任務(wù)管理界面
Demo地址：https://codepen.io/aybukeceylan/pen/OJRNbZp
06、仿微軟主頁(yè)
Demo地址：https://codepen.io/bradtraversy/pen/ZEGGNRb
07、任務(wù)理器界面
Demo地址：https://codepen.io/TurkAysenur/pen/QWyPMgq
08、文件共享網(wǎng)絡(luò)應(yīng)用程序界面
Demo地址：https://codepen.io/aybukeceylan/pen/yLOxRyG
09、深色模式消息應(yīng)用界面
Demo地址：https://codepen.io/TurkAysenur/pen/ZEbXoRZ
10、預(yù)定應(yīng)用程序界面
Demo地址：https://codepen.io/aybukeceylan/pen/pobaKGX
11、求職平臺(tái)用戶界面
Demo地址：https://codepen.io/TurkAysenur/pen/jOqdNbm
12、視頻網(wǎng)站界面
Demo地址：https://codepen.io/TurkAysenur/pen/LYRKpWe
13、Instagram 重新設(shè)計(jì)
Demo地址：https://codepen.io/TurkAysenur/pen/qeNvRM
14、視頻通話應(yīng)用程序
Demo地址：https://codepen.io/aybukeceylan/pen/pobbEYB
15、健身房網(wǎng)站界面
Demo地址：https://codepen.io/bradtraversy/pen/zYqVgXO
16、任務(wù)管理界面
Demo地址：https://codepen.io/aybukeceylan/pen/gOpbRPO
17、視頻平臺(tái)界面
Demo地址：https://codepen.io/aybukeceylan/pen/VweooYQ
18、Gmail重新設(shè)計(jì)
Demo地址：https://codepen.io/aybukeceylan/pen/xxKqyVO
19、聊天應(yīng)用界面
Demo地址：https://codepen.io/aybukeceylan/pen/gVmZmJ
20、響應(yīng)式網(wǎng)頁(yè)
Demo地址：https://codepen.io/TurkAysenur/pen/wLOejj
21、使用 Flexbox 進(jìn)行儀表板設(shè)計(jì)
Demo地址：https://codepen.io/TurkAysenur/pen/YmVYYR
22、CSS學(xué)習(xí)，服務(wù)頁(yè)面
Demo地址：https://codepen.io/ahmadnasr/pen/KKpvNGY
23、藝術(shù)家頁(yè)面設(shè)計(jì)
Demo地址：https://codepen.io/alowenthal/pen/rxboRv
24、CSS + HTML 中的 Twitter 客戶端 UI
Demo地址：https://codepen.io/marceloag/pen/fDmtq
25、響應(yīng)式電影應(yīng)用界面
Demo地址：https://codepen.io/nicklassandell/pen/soAyr
26、Twitch 重新設(shè)計(jì)
Demo地址：https://codepen.io/colewaldrip/pen/aqpRmQ
27、任務(wù)管理器界面
Demo地址：https://codepen.io/aaronmcg/pen/GRjaRva
28、Facebook 個(gè)人資料頁(yè)面
Demo地址：https://codepen.io/himalayasingh/pen/bxoBZZ
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
