CSS Games: 4Connect

Over the past few months, I've been creating a series of web development-themed games as part of comiCSS, blending learning with playful experimentation. One of those games is 4Connect, a grouping challenge where the goal is to identify four sets of related terms from a grid of seemingly disconnected concepts - all rooted in web development.

Each group shares a common theme: it might be CSS properties, layout techniques, browser quirks, or even naming patterns. The challenge lies in spotting the connections while avoiding misleading overlaps designed to throw you off.
You can play online (this and other games) or directly here in the article. Each game below includes a link to its online version for a smoother playing experience.

#1: CSS Colors

Difficulty: Easy
🎮 Play Online - 💡 Hints + Solution

4x4 grid with the terms: lightcoral, plum, peachpuff, thistle, firebrick, moccasin, gold, crimson, cadetblue, cyan, navy, lemonchiffon, turquoise, orchid, salmon, and lavender

#2: HTML Tags And More

Difficulty: Easy
🎮 Play Online - 💡 Hints + Solution

4x4 grid with the terms: mark, button, u, canvas, b, em, i, s, label, a, field, strong, q, select, input, and butttontext

#3: CSS Properties

Difficulty: Medium
🎮 Play Online - 💡 Hints + Solution

4x4 grid with the terms: template, row, border, kerning, padding, column, overflow, grid, family, shrink, basis, palette, wrap, area, variant, flow

#4: CSS Values and Functions

Difficulty: Medium-Hard
🎮 Play Online - 💡 Hints + Solution

4x4 grid with the terms: opacity, clip-path, tan, sepia, khaki, image, moccasin, progress, visibility, sin, display, mask, var, slot, yellow, and round

#5: CSS Properties (II)

Difficulty: Hard
🎮 Play Online - 💡 Hints + Solution

4x4 grid with the terms: border, animation-fill, mask, font, outline, justify, place, mix-blend, writing, accent, align, box-shadow, transform, text-decoration-skip, caret, and list

#6: ARIA

Difficulty: Expert
🎮 Play Online - 💡 Hints + Solution

4x4 grid with the terms: tabpanel, alert, tab, marquee, tree, slider, form, region, tablist, switch, banner, status, log, main, menubar, and combobox

I hope you enjoyed the games. Let me know if you try them online, or if you have suggestions to improve them.