CodingStartup起码课

我们做前端开发的时候，间距和空间感的掌握尤其重要。浏览器的开发者工具可以看到元素的大小，padding/margin 等等资讯，但是好像不能像 Sketch / Figma 这样量度元素之间的距离..

苹果网站做了很多很棒的动画效果来介绍产品，大部分都是基于页面滚动的，当我们上下滚动网页时，动画会向前和向后播放。本文分享创建Trigger JS以简化这类动画需求的过程和想法。

LetsEncrypt 开始提供服务的时候，使用了一张由 2000 年 9 月 30 日建立，有效期至 2021 年 9 月 30 日的根证书 DST Root CA X3...

大家好，我是 Steven。这一期我们会做一个拖拉形式的拼图验证码，是近年很常见的一种验证码方式，有别于传统的猜文字的那种： 那我们就开始吧。

大家好，我是 Steven。 如果是单纯的逐个图标放大，其实就没什么难度。不过我们的作风是，要做就做得够细致，当游标在同一个图标上左右移动时，都会影响到左边和右边的图标大小的，达到一个很连贯的效果，这个就是今次的难度所在。 好了，那我们就开始吧。 打开 CodePen 编辑器，…

大家好，我是 Steven。 这期会介绍如何制作打字这个特效，这个教学分为两个部份。 那我们就开始吧。 打开 CodePen 编辑器，在 HTML 的部份加入一个 <h1> 标签，内容文字是 CodingStartup。 去到 CSS 的部份，先设定基础的文字大小，加…

大家好，我是 Steven。 我们试试用最少的 JavaScript，尽量使用 CSS 以及最简单的 HTML 结构去实现，那我们就开始啦。 打开 CodePen 编辑器，在 HTML 的部份加入一个 <div>，id 名为 image。 去到 CSS 的部份，新增 …

大家好，我是 Steven。 这一期，我们会做一个摇骰子的效果。等等，这个很容易？那就挑战一下，不用 JavaScript，只用 CSS 去制作，我们来看看怎么实现。 里面是骰子从一到六的面板，然后为了等下转骰子的时候看上去随机一点，这里我将一到六的顺序掉乱一下。 打开 Cod…

大家好，我是 Steven。 点击一下会打开，再点击一下会关闭。但原来它还有一个小细节，就是长按的时候里面的圆形会拉长，放手后会变回圆形： 按钮的背景颜色就会改为深灰色。 在这个案例中，我们会学习到如何使用 CSS 建构这个按钮，过程中会运用到 CSS 的变数，以及如何判断系统…