Teacher portal

Class lists, marks entry, attendance, lesson plans. Tablet at the front of class for attendance; desktop for grading. Same chrome, different content density.

Portal 3 shells 3 pages Production /portals/teacher

Shells

Device shells

Each portal adapts to the device the audience is using. The primary device is highlighted; the others reflow without losing functionality.

Tablet

768–1180 px

Primary

Class-anchored side nav; grid is the centre of mass — marks entry, attendance, lesson plan.

Open marks entry

Desktop

1280 px+

Same shell with more visible columns; sortable rows, keyboard nav, bulk entry.

Mobile

360–414 px

Reduced — attendance roll-call only. Marks entry is locked on mobile by default.

Pages

Designed surfaces in this portal

Each page is a real, rendered mockup at the right device width. Click any to open.

01 · TABLET Marks entry Class roster × assessment columns; bulk paste, auto-grade, comments column. Open → 02 · TABLET Attendance roll Form-room roll-call; present / absent / late toggles. v0.6 → 03 · DESKTOP Lesson planner Term planner across subjects; attach materials & objectives. v0.6 →

Used in this kit

Primitives, blocks & patterns

The portal composes from the same system everything else uses.

PT Editable grid Inline-editable cells with tab navigation — the grading surface. Docs → P Status dots Present / absent / late · the canonical attendance indicators. Docs → PT Tablet shell Side rail + main panel — shared with student portal. Docs →

Need a new teacher portal surface?

Every screen in this portal composes from the documented system. Start a new one by copying an existing template.

All portal shells