Code snippets change every page. Custom code blocks change one part of one page. They're how you build a section Teachable's page builder doesn't offer, and the home page of this school is made almost entirely from them.

Getting the block

In Teachable's page editor, the Custom HTML block gives you an empty space to fill with your own code. It isn't switched on for new schools, so you may need to ask Teachable support to turn it on. Once it's there, you add it like any other block.

Teachable describes it as an unsupported feature, the same as code snippets. It works, but if something breaks, fixing it is up to you.

One block, one section

The pattern I use: every section of a page is its own block, and every block is a complete, self-contained piece. Styles, markup and any script it needs.

<style>
  .ph-band { background: var(--ph-surface); }
  .ph-band h2 { font-size: 4rem; }
</style>

<section class="ph-band">
  <h2>Every school outgrows the settings page</h2>
</section>

Three habits keep this manageable:

• A prefix on every class. Everything here starts ph-, so it can never collide with Teachable's own classes.
• Shared settings go first. Colours and fonts live in one block at the top of the page. Every other block uses them, instead of repeating them.
• Every block is a file. Keep each one in a folder on your computer, numbered in page order. Teachable is where the code runs, not where it lives.

What you can put in one

• HTML and CSS, for anything you can design.
• JavaScript, for things that respond: switches, tabs, search.
• Liquid, Teachable's template language, to show real data from your school, such as a course's lessons. The Liquid section covers this.