Skip to content

Add: CSS Grid Island Architect quest - #787

Merged
praveenscience merged 1 commit into
praveenscience:mainfrom
Akshatshukla-25:add/css-grid-architect
Jul 28, 2026
Merged

Add: CSS Grid Island Architect quest#787
praveenscience merged 1 commit into
praveenscience:mainfrom
Akshatshukla-25:add/css-grid-architect

Conversation

@Akshatshukla-25

Copy link
Copy Markdown
Contributor

What does this PR do?

Closes #786

Adds CSS Grid Island Architect (quests/css-grid-architect.html) under the CSS Fundamentals category. The quest is an interactive SimCity-style urban layout game where players position city districts (skyscrapers, solar farms, parks, residential towers) onto an island matrix by writing real CSS Grid declarations (grid-template-columns, grid-template-rows, grid-area, gap, and place-items).

Type of Change

  • New tool / quest
  • Enhancement to existing tool
  • Bug fix
  • Documentation update
  • Build system / infrastructure

Screenshot

CSS Grid Island Architect Screenshot

Checklist

  • I have read the Contributing Guide
  • My branch follows the naming convention (add/tool-name, feat/description, or fix/description)
  • I have tested my changes locally in at least one modern browser

For new tools / quests:

  • The quest is a single self-contained .html file in the quests/ folder
  • The filename is kebab-case (css-grid-architect.html)
  • I added an entry to data/quests.json with all required fields
  • I added a screenshot as quests/css-grid-architect.png next to the HTML file
  • No JS frameworks or heavy UI libraries
  • I ran node scripts/sort-norm.js data/quests.json to sort and normalize the quests registry
  • I ran node scripts/build.js and verified the landing page renders correctly

@praveenscience
praveenscience merged commit 8ad2349 into praveenscience:main Jul 28, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Idea: CSS Grid Island Architect — isometric city builder for learning CSS Grid layouts

2 participants