CSSKatas - 交互式 CSS 学习平台

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1608 天前的主题，其中的信息可能已经有所发展或是发生改变。

我用过很多交互式的编程学习平台：Leetcode, Codewars, Exercism...
在这些平台上学习新的编程语言、锻炼算法。
读题、编码、提交就能马上得到快速的反馈，学习的同时还能体会到刷题的快感。
但是他们都没有对 CSS 的支持，因此，我正在打造 CSSKatas，一个交互式 CSS 学习平台。

在 MVP 阶段会优先支持 Tailwind CSS，现在已经完成了 3 个 demo。
体验不错的话欢迎订阅 newsletter 跟踪开发进度。
也欢迎在评论里留言反馈 🙏

CSS

csskatas

交互式

编程

10 条回复 • 2020-06-28 22:36:57 +08:00

ivyliner

2020-06-27 22:26:59 +08:00 via Android

👍

Xuebaba

2020-06-28 00:24:59 +08:00 via iPhone

点赞，已经订阅 👍

SomeBottle

2020-06-28 00:27:59 +08:00

交互式学习平台大赞👍

cydian

2020-06-28 06:13:09 +08:00 via Android

非常喜欢。
支持

GPLer

2020-06-28 08:51:58 +08:00

其实有类似的平台了，楼主可以去看看 codepip，我体验过的 flexboxfroggy 效果还不错。

alphardex

2020-06-28 09:37:22 +08:00

说起交互式学习 freecodecamp 也很赞，我就是靠这个入门的
当然 LZ 的平台也不错，已订阅

356693212

2020-06-28 10:09:40 +08:00

https://flexboxzombies.com/p/flexbox-zombies
有一系列的交互式游戏叫你 css，做的是真的牛皮

dsdshcym

2020-06-28 22:29:39 +08:00

@GPLer #5 谢谢推荐！
之前我还真没听说过 Codepip

不过看它的定位更偏向于学生，练习也比较游戏化

我想在 CSSKatas 主推面向实际 Web 开发的练习，游戏性上会差一些，更偏实用、练手向

dsdshcym

2020-06-28 22:33:19 +08:00

@alphardex #6 谢谢订阅！

freecodecamp 我一直有看他们的博客

我觉得 CSSKatas 的「练习（ Kata ）」跟这类交互式「教程」的一个区别是：
- freecodecamp 这类教程是有标准答案的（例：这个 h2 tag 里要填上 Hello World ）
- CSSKatas 的练习是没有标准答案的（例：一个 3x3 的布局可以用 flexbox 也可以用 grid ）

我希望 CSSKatas 能通过这些没有标准答案的「练习」让大家相互学习、借鉴，而不仅仅是跟着「教程」走

dsdshcym

2020-06-28 22:36:57 +08:00

@356693212 #7 谢谢推荐！

Flexbox Zombies 我也玩过，它也可以算是我做 CSSKatas 的启发之一

我觉得 CSSKatas 跟这类游戏教程的一点是如 #9 里所说的 CSSKatas 没有标准答案

另一点是：
- Flexbox Zombies 的每一个练习更注重一个 CSS 属性（ flex-direction, flex-grow, etc.）怎么使用
- 而 CSSKatas 更注重实现一个特定的设计，并不关心解决方案里使用了哪些 CSS 属性