Learn UX/UI

Try these UX and UI tutorials to learn the principles of user-centered design, prototyping, and wireframing. Learn to craft beautiful and intuitive user interfaces.

All UX/UI content:

  1. <h1>利用CSS和JavaScript创建水平时间线</h1>

    <h1>利用CSS和JavaScript创建水平时间线</h1>

    Tutorial Intermediate

    在前一篇文章中,我向你展示了如何从头开始创造一条响应式的垂直时间线。今天,我将介绍创建相关水平 时间线的过程。

  2. 用CSS和一点JavaScript写一个垂直时间线

    用CSS和一点JavaScript写一个垂直时间线

    Tutorial Intermediate

    在本教程中,我们将从零开始学习如何构建响应式垂直时间线。 首先,创建基本的标记结构,然后应用CSS伪元素魔法。 接着,使用JavaScript添加向下滚动页面时的过渡效果。

  3. 如何使用 Flexbox 完美实现文字的中心对齐

    如何使用 Flexbox 完美实现文字的中心对齐

    Tutorial Intermediate

    让内容水平居中没有什么特别的,我们从来都是这么做的。 但有没有想过让高度不固定的内容垂直居中呢? 在我的视频课程《Web 设计人员的 6 个 Flexbox 项目》中,您将学习如何利用 Flexbox 轻松解决这一问题。

  4. 综合指南: 何时使用 Em 与 Rem

    综合指南: 何时使用 Em 与 Rem

    Tutorial Intermediate

    你可能已经很熟练使用这两个灵活的单位,但你可能不完全了解何时使用 rem ,何时使用 em。 本教程将帮你弄清楚!

  5. 如何整合“No CAPTCHA reCAPTCHA”(验证码)到你的网站里

    如何整合“No CAPTCHA reCAPTCHA”(验证码)到你的网站里

    Tutorial Beginner

    CAPTCHA输入可能是最常见的一个令人失望的互联网体验。 它们对于大多数用户来说都已经足够的痛苦了,就姑且不提那些模糊不清的图片,又或者是那些依赖于像是阅读屏幕发声的辅助技术的用户了。 然而,悲哀的是,CAPTCHA也绝对是对抗垃圾邮件至关重要的一环。

  6. 快速小技巧:简单的CSS3多选框(Checkbox)和单选框(Radio Button)

    快速小技巧:简单的CSS3多选框(Checkbox)和单选框(Radio Button)

    Tutorial Beginner

    你是否好奇该如何在不使用JavaScript的前提下为多选框和单选框添加样式?你要谢谢CSS3!