diff --git a/data/quests.json b/data/quests.json index 53c388e..9a8119a 100644 --- a/data/quests.json +++ b/data/quests.json @@ -225,6 +225,32 @@ "difficulty": "Medium", "status": "live" }, + { + "id": "css-grid-architect", + "name": "CSS Grid Island Architect", + "shortDescription": "SimCity-style isometric city builder puzzle game that teaches CSS Grid layout properties.", + "longDescription": "## CSS Grid Island Architect\n\nAn interactive SimCity-style isometric city-building puzzle game that teaches CSS Grid layout properties.\n\n### Features\n\n- SimCity-Style City Building Gameplay: Construct city zones by writing real CSS Grid declarations\n- Progressive Level Mechanics: Level-based challenges covering track sizes, column/row spanning, named grid areas, gap spacing, and responsive minmax()\n- Real-Time Isometric Island Canvas: Live rendering of isometric buildings, power grids, and population meters as CSS rules update\n- Web Audio Synthesizer SFX: Audio feedback for building placements and level completion fanfares\n- Built-In CSS Grid Reference Sheet: Instant syntax cheatsheet for grid alignment and track properties", + "category": "css-fundamentals", + "tags": [ + "css", + "css-grid", + "game", + "interactive", + "isometric", + "layout", + "quest", + "simcity", + "web-design" + ], + "techStack": [ + "CSS3", + "HTML5", + "Vanilla JS", + "Web Audio API" + ], + "difficulty": "Medium", + "status": "live" + }, { "id": "css-grid-quest", "name": "CSS Grid Quest", diff --git a/quests/css-grid-architect.html b/quests/css-grid-architect.html new file mode 100644 index 0000000..a70d531 --- /dev/null +++ b/quests/css-grid-architect.html @@ -0,0 +1,560 @@ + + + + + + + CSS Grid Island Architect — One File Tools Quest + + + + + + + +
+
+ +
+

CSS Grid Island Architect

+
+
+
+ + + + + +
+
+ +
+ +
+
+ POPULATION + 👥 14,200 +
+
+ POWER GRID + ⚡ 98% Stable +
+
+ CITIZEN HAPPINESS + 😊 96% +
+
+ CURRENT MISSION + LEVEL 1 / 4 +
+
+ + +
+ +
+
+

Level 1: Track Grid Layout

+
+ +
Define 3 equal columns for the island grid using grid-template-columns: repeat(3, 1fr);
+ +
.island-grid {
+ +
}
+ +
+ + +
+
+
+ + +
+
+
+ 🏢 + Skyscraper +
+
+ 🏡 + Housing +
+
+ ⚡ + Solar Farm +
+
+ 🌳 + Eco Park +
+
+
+
+
+ + + + + + + diff --git a/quests/css-grid-architect.png b/quests/css-grid-architect.png new file mode 100644 index 0000000..2eb1976 Binary files /dev/null and b/quests/css-grid-architect.png differ