要想掌握编程,大量练习是不可或缺的。你必须尽可能多地编写代码,才能精通它。有些人在这方面有天赋,但即便是天才也需要不断练习。
话不多说,下面是今天的编码创意,可以使用任何你喜欢的工具或编程语言。把每一点作为灵感的来源,选择你感兴趣的就开始动手试试吧!
1. 动画赛道与移动的汽车
这是一条有两辆车绕着行驶的赛道,它是用HTML、CSS、SVGs构建的。
“CS)Scalextric ”——制作者Jhey.
通过构建动画赛道,你将学会:
- 循环——因为你需要对大量图形重新进行计算。
- 超文本标记语言(HTML)、层叠样式表(CSS)、JavaScript。
- 使用SVGs、CSS动画,并将两者结合起来使用。
2. 可点击的法式卡片
这些可点击的法式卡片有两种状态:隐藏和可见。每次隐藏卡片,它都会生成一个随机的新值。
“CSS Random Cards”——制作者 Adir
通过构建点击法式卡,你将会学到:
- 事件监听器——每当你点击卡片,就会有相应的指令开始运行。你需要用JavaScript或层叠样式表(CSS)将卡片连接起来。
- 超文本标记语言(HTML)、层叠样式表(CSS)、JavaScript。
- 跟踪每张卡片的状态,并为卡片生成一个新值。
3. 滚动邮件
当你向下滚动鼠标时,邮件就会收起来;向上滚动时,邮件又会被打开。
“Scrolling letters”——制作者 AaronIker
通过构建动画滚动邮件,你将学到:
- 使用鼠标滚轮事件监听器。每当用户滚动鼠标时,信件折叠,反之亦然。
- 当用户滚动页面时,如何迭代循环和重新计算图形。
- 让应用程序在更小的屏幕上运行(如手机或平板电脑)。
4. 自定义单选按钮
这都是些外表华丽的自定义单选按钮!
“Custom Radio Buttons”——制作者Metty
通过构建自定义单选按钮,你会学到:
- 使用超文本标记语言(HTML)和层叠样式表(CSS)。
- 编码一个语义正确的HTML表单。
- 使用表单并创建自定义输入和单选按钮。
5. QuickchatClone
Quickchat是一个深色主题、外观清爽的聊天室。想过如何建立一个聊天室吗?机会来了!
链接:https://codepen.io/aybukeceylan/pen/jOMazYe
通过构建Quickchat Clone,你会学到:
- 简洁现代的UI设计原则。
- 编写高质量的超文本标记语言(HTML)和层叠样式表(CSS)。
6. HSL滑块
HSL滑块是一个可以左右拖动的滑块,它会根据切换键所在位置改变颜色。你需要注意如何启用渐变以及改变颜色深度。
· 链接:
https://codepen.io/jh3y/pen/gOwegKr
通过构建HSL滑块,你将学到:
- 当用户拖动滑块时,重新计算图形和颜色。但是不要忘了使用渐变和颜色深度控制器。
- 使用色彩模式(HSL)、加色模式(RGB)、十六进制色码。
希望这些创意能够激发你的编码想象力!