Hi! My name is [Your Full Name]

Learning Buttons

SASS Mixins examples and code, explore these topics by clicking standard OCS SASS buttons.

Buttons Lesson Button Mixins Container Mixins

Development Environment

Coding starts with tools, explore these tools clicking SASS buttons with SVG.

OCS GitHub VSCode.dev

Code Runner Lessons

Foundations in Tech are essential, click my iridescent buttons to see some of my lesson creations.

JS Basics JS Variables Gamerunner Networking

Class Progress

Here is my game progress through coding, click multicolor and size buttons to see these in the browser

Snake Fish Gamify CS Pathway

Drag and Drop Buttons

Use ocs__drag-btn for draggable choices and ocs__drop-btn for their destinations. Drag a part onto a slot, or select both buttons with a mouse or keyboard. The complete class contract is documented in _sass/open-coding/elements/buttons/button-grammar.md.

Mini Assembly Bench

Drag a part to its slot.

Parts tray

Connection points

Size Classes

The same classes at three scales. Put ocs__dnd--small, --medium, or --large on the board to resize everything inside it, or the same suffix on a single ocs__drag-btn / ocs__drop-btn.

ocs__dnd--small

ocs__dnd--medium

ocs__dnd--large