# Lesson House by MRHTML

An original education and workshop template with cream paper, ultramarine ink, coral annotations, an illustrated field notebook, a native disclosure curriculum, and a usable sample lesson.

## Open the template

Keep the files together and open index.html in a modern browser. No installation, build step, account, internet connection, remote font, or server is required. The template uses classic JavaScript and installed system fonts.

The sample workshop is fictional. It offers no enrollment, instructor service, qualifications, checkout, grading, or student account. The observations and making exercises are original demonstration content, not a claim about an operating course.

## Customize the content

1. Change the page title, description, Lesson House name, introductory text, curriculum, and footer in index.html.
2. Replace the four curriculum chapters with accurate topics and learning expectations. Each native details element works with a mouse, keyboard, or no JavaScript.
3. Change the three sample exercises in the articles with data-lesson. Keep each article ID paired with the matching button's data-exercise value and aria-controls. Each button uses aria-pressed to expose which exercise is visible.
4. Change the original notebook drawing directly in its inline SVG. The notebook, coral note, margin annotations, classroom poster, and ruled writing surface are original editable HTML, CSS, and SVG. No photographs or third-party illustrations are included.
5. Adjust the named color variables at the beginning of styles.css. Use a contrast checker after changing text and background colors.
6. The working note is limited to 2,000 UTF-16 code units by the native textarea. Its counter follows the browser's value length. Notes live only in the open page and are not saved, transmitted, or restored after a reload. Do not add a saved indicator without implementing and testing storage.
7. Replace the course-details section with your real format, availability, pricing, accessibility information, and terms. Connect a verified enrollment or contact destination only when that service exists. This package contains no checkout, form submission, learner authentication, calendar, or backend.
8. Before publishing customized real content, remove the preview-only meta robots noindex,follow directive. Update the page metadata and add the actual canonical URL for your deployment.

## Working interactions

- Curriculum chapters and enrollment guidance use native details and summary.
- Open the sample lesson links move focus and scroll to the lesson section.
- Observe, Reframe, and Make reveal their respective original exercises without discarding the working note.
- Clear note empties only the local textarea, announces what happened, and returns focus to the writing area.
- Fragment links remain inside the document in an opaque srcdoc preview. The JavaScript does not navigate the parent window.
- There are no timers, completion scores, fake success messages, external requests, uploads, or persistent storage.

Without JavaScript, the navigation, complete curriculum, all three sample exercises, enrollment explanation, and working textarea remain available. The exercise selector and Clear note button are revealed only when their handlers are ready. A reader can still erase text using native editing commands.

## Accessibility and responsive behavior

The document includes a skip link, visible keyboard focus, labelled controls, native buttons and disclosures, an explicitly described original drawing, live lesson feedback, and reduced-motion support. CSS adapts down to 320 pixels. It works in an iframe restricted to sandbox="allow-scripts", without same-origin or form permissions.

The decorative notebook rotates slightly as a static composition. There are no autoplay animations, video, sound, or motion that needs a pause control. Smooth fragment scrolling switches to immediate scrolling when reduced motion is requested.

Recheck keyboard navigation, contrast, responsive layouts, heading structure, text alternatives, and any new interactive behavior after customization. Included checks do not constitute an accessibility certification.

## Files

- index.html: original content, semantic structure, and inline notebook artwork.
- styles.css: color system, layout, responsive rules, and focus treatment.
- script.js: local exercise selection, note counter/reset, and safe in-document navigation.
- ASSETS.md: complete asset provenance.
- LICENSE: MIT license for original code, copy, and artwork.

The visible Designed by MRHTML credit links to https://mrhtml.com/ with rel="nofollow". The MIT license does not require a followed link or a mandatory website credit.