Web / Read the Source

A web page begins with structure, presentation and behaviour. Understanding these three layers gives you a way to make the page your own.

HTML / The structure

<article>
  <h1>Hello, freedom.</h1>
  <p>Make yourself at home.</p>
</article>

CSS / The character

article {
  background: #10120f;
  color: #c0f76a;
  padding: 2rem;
}

JavaScript / The response

button.addEventListener('click', () => {
  message.textContent = 'Stay curious.';
});

Build for people

Use headings that describe the content, visible keyboard focus, labels for inputs and a layout that still works on a narrow screen. Motion should have a purpose and respect the reader’s preferences.

Explore the Sanctuary terminal ↗