This is a list of the CoreDogs patterns. A pattern is a common way of doing a task. You can create things (Web pages, databases, etc.) by combining patterns.

HTML page template

Pieces every page should have.

Content organization patterns

Gives some extra info that isn’t a part of the main content flow.

Showing which content belongs under which headings.

An image with a caption above or below it.

A list with bullets, or a numbered list. Can be nested.

Use dividers, bullets, and other images to organize your content.

Links at the top of a long page to sections of the page.

Tables show data in rows and columns.

Content styling patterns

Colors that work well together.

A pattern for styling text on a Web page.

How to make text stand out when users quickly scan a page.

Use a CSS class to make elements look the same.


A general pattern for almost every user interaction on a Web page.

Input patterns

Get what the user typed, and put it into a variable.

When you ask users for input, give them hints about what type of input you expect.

When a form is displayed, put the keyboard cursor in the first field, so the user can start typing.

When the user clicks on something, run some code.

Make something happen when the mouse cursor moves over an image.

Processing patterns

Convert user input to numbers before doing arithmetic, with parseFloat and parseInt.

Output patterns

Add to text that’s already on the page.

Output data by changing existing text on the page.

Show output in a modal box.

You write a page that does a computation, and shows the output to the user. When the page first loads, there is no output to show. You can hide the output area until it is needed.

Navigation patterns

Links at the top of a long page to sections of the page.

Layout patterns

A fixed layout stays the same width as the browser window is resized.

A footer is a region at the bottom of a page.

A page layout that uses the full width of the browser window. It changes its width when the user resizes the browser window.

File organization patterns

Debugging patterns


How to...