Hi! My name is [Your Full Name]

Learning Grids

SASS Grid Mixins examples and code — multiple grid layouts that adapt to the active theme, just like buttons do.

Buttons Lesson Grid Mixins Grid Classes

Standard Grid

Fixed 3-column grid that collapses to 2 on mobile. Hover on desktop, tap on touch — both give the same visual feedback.

Learning Resources
JavaScript
Variables, loops, functions, and DOM manipulation.
Python
Data types, control flow, and algorithmic thinking.
Networking
TCP/IP, HTTP, and the OSI model.
SASS
Mixins, variables, and theme-aware styling.
Git
Commits, branches, pull requests.
APIs
REST, fetch, and JSON data handling.

2-column (.cols-2) and 4-column (.cols-4) variants:

Frontend
Backend
HTML
CSS
JS
SASS

Card Grid

Auto-fill responsive grid — fits as many 200 px cards as possible per row. Cards lift on hover/tap.

OCS
Open Coding Society home and resources.
GitHub
Version control for all your projects.
VSCode
Your browser-based development environment.
Code Runner
Execute JavaScript and Python in the browser.
Game Runner
Build and play interactive browser games.
Calculator
The calculator that inspired these grid styles.

Color Grid

Each box reveals its own unique color on hover or tap. The base state is fully themed; the color appears on interaction.

Red
Orange
Yellow
Chartreuse
Green
Teal
Blue
Violet
Magenta

Holographic Grid

All cells are identical but continuously cycle through the rainbow with staggered timing, so the color wave flows across the grid.

✦
✦
✦
✦
✦
✦
✦
✦
✦

Calculator-Style Grid

Equal square tiles in a 4-column keypad — same structure as the OCS calculator, fully theme-aware.

C
+/-
%
÷
7
8
9
×
4
5
6
−
1
2
3
+
0
.
=

Auto-fill grid of square tiles for images, icons, or visual content.

🐍
Snake
🐟
Fish
🎮
Gamify
🧮
Calc
🌐
Network
💻
Code