28个适合开发者练手的 WEB UI 项目（H5&CSS3&JS）

忘是亡心i 2022-09-16 14:24 95阅读 0赞

![ea7ec7bbcb5fe110fb0113f19130b778.png][]

英文 | https://niemvuilaptrinh.medium.com/29-projects-to-help-you-practice-html-css-javascript-d14810589097

翻译 | 杨小爱

今天我们将深入学习UI Page项目以提高编程设计能力，以及如何将HTML、CSS、Javascript应用到实际的网站开发中！

# **01、响应式社交平台** #

Demo地址：https://codepen.io/TurkAysenur/pen/RwWKYMO

![2df6b35dcfa27ca3b1f65ab7faed0e44.png][]

# **02、福克斯新闻模板界面** #

Demo地址：https://codepen.io/havardob/pen/GRjPywY

![ad31f9038a620ca9ed09c7ea64dc00c0.png][]

# **03、仿Netflix 登陆页面** #

Demo地址：https://codepen.io/bradtraversy/pen/yWPONg

![805948b966e9889733e8bf24a1b71595.png][]

# **04、书店界面** #

Demo地址：https://codepen.io/TurkAysenur/pen/JjGKKrP

![0c55393126550714b25da35313115ff0.png][]

# **05、任务管理界面** #

Demo地址：https://codepen.io/aybukeceylan/pen/OJRNbZp

![feb07728d4b5328fe7843ae707914536.png][]

# **06、仿微软主页** #

Demo地址：https://codepen.io/bradtraversy/pen/ZEGGNRb

![f5dee0cf026a35a690962dae13560f05.png][]

# **07、任务理器界面** #

Demo地址：https://codepen.io/TurkAysenur/pen/QWyPMgq

![4a35f903f3befe0c5d79b693d2e133f4.png][]

# **08、文件共享网络应用程序界面** #

Demo地址：https://codepen.io/aybukeceylan/pen/yLOxRyG

![7ab1925e78087bb219731a73325b376c.png][]

# **09、深色模式消息应用界面** #

Demo地址：https://codepen.io/TurkAysenur/pen/ZEbXoRZ

![226a70f447d30204d90696fa775a0f27.png][]

# **10、预定应用程序界面** #

Demo地址：https://codepen.io/aybukeceylan/pen/pobaKGX

![33fdd4ca7224410ea34dfee04d813daf.png][]

# **11、求职平台用户界面** #

Demo地址：https://codepen.io/TurkAysenur/pen/jOqdNbm

![8ce4b14a721b38487ab9a703d05ff7d7.png][]

# **12、视频网站界面** #

Demo地址：https://codepen.io/TurkAysenur/pen/LYRKpWe

![7d6aff863374760490fa40a2ab08ccdd.png][]

# **13、Instagram 重新设计** #

Demo地址：https://codepen.io/TurkAysenur/pen/qeNvRM

![f1f005d8b408a26ea549b813483ba6f1.png][]

# **14、视频通话应用程序** #

Demo地址：https://codepen.io/aybukeceylan/pen/pobbEYB

![0c1950fbb51b5dd75f48a94685d2d2b4.png][]

# **15、健身房网站界面** #

Demo地址：https://codepen.io/bradtraversy/pen/zYqVgXO

![81ebe8226296ec1c51528c3b67acba7d.png][]

# **16、任务管理界面** #

Demo地址：https://codepen.io/aybukeceylan/pen/gOpbRPO

![562c75daac98b9db688e077c3190cc53.png][]

# **17、视频平台界面** #

Demo地址：https://codepen.io/aybukeceylan/pen/VweooYQ

![211e5ce7a73f10f0c7b260ea383bc8ab.png][]

# **18、Gmail重新设计** #

Demo地址：https://codepen.io/aybukeceylan/pen/xxKqyVO

![d0875c7c75c9e559318a7be9d8841e14.png][]

# **19、聊天应用界面** #

Demo地址：https://codepen.io/aybukeceylan/pen/gVmZmJ

![daee6ee5e7b1b4e021abda6910d78f4d.png][]

# **20、响应式网页** #

Demo地址：https://codepen.io/TurkAysenur/pen/wLOejj

![861c508719135b4b45dbce40750a56ba.png][]

# **21、使用 Flexbox 进行仪表板设计** #

Demo地址：https://codepen.io/TurkAysenur/pen/YmVYYR

![d32daef26bf82e0aa27f0f6c610d41df.png][]

# **22、CSS学习，服务页面** #

Demo地址：https://codepen.io/ahmadnasr/pen/KKpvNGY

![e11c0c54cb44fa27bc94779cb7ee483b.png][]

# **23、艺术家页面设计** #

Demo地址：https://codepen.io/alowenthal/pen/rxboRv

![691d5070518511b44733107a36fd1cda.png][]

# **24、CSS + HTML 中的 Twitter 客户端 UI** #

Demo地址：https://codepen.io/marceloag/pen/fDmtq

![b8df000384ebb7663118865df081385c.png][]

# **25、响应式电影应用界面** #

Demo地址：https://codepen.io/nicklassandell/pen/soAyr

![8220853019269d33b689a0814ddae6aa.png][]

# **26、Twitch 重新设计** #

Demo地址：https://codepen.io/colewaldrip/pen/aqpRmQ

![5a13f70fd499b337120afc074e4d64cc.png][]

# **27、任务管理器界面** #

Demo地址：https://codepen.io/aaronmcg/pen/GRjaRva

![062ae699065d454f1461691a2e97971a.png][]

# **28、Facebook 个人资料页面** #

Demo地址：https://codepen.io/himalayasingh/pen/bxoBZZ

![a8ff22e8e557a4fe9f56a79e9cb92425.png][]

**总结**

以上就是我分享的关于提升HTML，CSS，JavaScript技能的练习页面内容，希望今天内容能为你提供开发设计灵感，如果您有任何问题，请在留言区给我留言。

我们希望您继续支持我，以便我可以写出更多的好文章。如果您觉得今天文章对您有帮助，请给我点个赞。

最后，感谢您的阅读，祝你今天过得愉快！

#  #

**学习更多技能**

**请点击下方公众号**

![38e7d93b9f2452f231cdb3725b5b9aba.gif][]

[ea7ec7bbcb5fe110fb0113f19130b778.png]: /images/20220828/dcb0428703aa4607882580c1d412fdea.png
[2df6b35dcfa27ca3b1f65ab7faed0e44.png]: /images/20220828/3b82088a62324797b402b8a327c1ac72.png
[ad31f9038a620ca9ed09c7ea64dc00c0.png]: /images/20220828/4a4785f78faf4ec18aef3a353c6d5279.png
[805948b966e9889733e8bf24a1b71595.png]: /images/20220828/95c2862b3368456da1baf41998de757a.png
[0c55393126550714b25da35313115ff0.png]: /images/20220828/db790fd7452a435a81fe172a30fb0935.png
[feb07728d4b5328fe7843ae707914536.png]: /images/20220828/b19921d95640407fa3f80bd1f401bbf2.png
[f5dee0cf026a35a690962dae13560f05.png]: /images/20220828/600e475bad554bfcaf8688403454d98d.png
[4a35f903f3befe0c5d79b693d2e133f4.png]: /images/20220828/f8aef08618d94c8081dfa530a8941de5.png
[7ab1925e78087bb219731a73325b376c.png]: /images/20220828/89f4489f59984106b5be805031ff3ea8.png
[226a70f447d30204d90696fa775a0f27.png]: /images/20220828/1325ecfd0e13457a949437f3f9fb62e7.png
[33fdd4ca7224410ea34dfee04d813daf.png]: /images/20220828/ad59d8152a0d48709a31fc79c924dc3c.png
[8ce4b14a721b38487ab9a703d05ff7d7.png]: /images/20220828/b39a8d7739504441a8e473967f030915.png
[7d6aff863374760490fa40a2ab08ccdd.png]: /images/20220828/a6f05674a79e494c8b5faf62ff166f64.png
[f1f005d8b408a26ea549b813483ba6f1.png]: /images/20220828/0adc034afa3a4757aca47330615343c1.png
[0c1950fbb51b5dd75f48a94685d2d2b4.png]: /images/20220828/a8012bfded2c4e379b9c1e60a2365a44.png
[81ebe8226296ec1c51528c3b67acba7d.png]: /images/20220828/6b25b6746d434767b470cda1f4ff040e.png
[562c75daac98b9db688e077c3190cc53.png]: /images/20220828/19b9223a45f340198975423359653e29.png
[211e5ce7a73f10f0c7b260ea383bc8ab.png]: /images/20220828/f06538af989c4b9fa4b6ce695d5ceb20.png
[d0875c7c75c9e559318a7be9d8841e14.png]: /images/20220828/98941241f37441bf91dc74363132da21.png
[daee6ee5e7b1b4e021abda6910d78f4d.png]: /images/20220828/fad88901ef764de1a52b1809f89c2780.png
[861c508719135b4b45dbce40750a56ba.png]: /images/20220828/38b2dc30cf394d94b3ee011494b4e6ea.png
[d32daef26bf82e0aa27f0f6c610d41df.png]: /images/20220828/4934396ba7ab44888724f5e40a5d57f4.png
[e11c0c54cb44fa27bc94779cb7ee483b.png]: /images/20220828/7859ce31f31c493c863a1a4654483b94.png
[691d5070518511b44733107a36fd1cda.png]: /images/20220828/c2e1efc802d24a208df549a04f828fda.png
[b8df000384ebb7663118865df081385c.png]: /images/20220828/6cc1f0438a674defbe95ad93570db6ed.png
[8220853019269d33b689a0814ddae6aa.png]: /images/20220828/b4ecafa3d70f45ab931bffcea9822417.png
[5a13f70fd499b337120afc074e4d64cc.png]: /images/20220828/66a942a57cb14cec94dad257e47af9c9.png
[062ae699065d454f1461691a2e97971a.png]: /images/20220828/113959615e5e45088b8edd8368165831.png
[a8ff22e8e557a4fe9f56a79e9cb92425.png]: /images/20220828/28811dbc1dc044f7a4675a282304c385.png
[38e7d93b9f2452f231cdb3725b5b9aba.gif]: /images/20220828/6539407d3272487ebd10887c4df1f669.png