Pattern catalog

Patterns are common ways of doing things, like recipes. People have patterns for solving equations, making web pages, wrapping gifts, all sorts of things. Part of learning a skill is learning the patterns that help you be more effective.

Here are patterns on this website. This list can help you find the patterns you need to do a task.

Name	Situation	Tags	Action	Where referenced
Basic page template	You want to make a simple webpage. No styling, just basic content.		A copy-and-paste template for simple pages. Needs: Provides:	Page structure
Bootstrap template	You want to make a page that looks professional on all devices.	Bootstrap	A template for a Bootstrap page. Needs: Provides:	Get Bootstrappy
Classes	You want to make several items on a page have the same look.	CSS	Uses classes to give multiple items on a page the same look. Needs: Provides:	Classes
Containers	You have a block of content made of several HTML tags. You want to style the block.	Structure	Use `div` and `span` to wrap HTML so you can style it as a block. Needs: Provides:	Divs and spans
File organization	You've got dozens or hundreds of files on your site. You want to keep track of them, so you don't use work.		Organize files in folders to keep track of everything. Needs: Provides:	File strategy
Images	You want to put an image on a page.	Images	Use the `img` tag to add an image to a page. Needs: Provides:
Links	You want a link to another page.	Links and URLs	Use the `a` tag to make a link. Needs: Provides:	On-page links, Links and sites
Lists	You want to make a list.		Use `ul` and `ol` tags to make lists. Needs: Provides:	Lists
Simple navbar	You want to make a navbar for the top of a page.	Navbars	Use `a` tags to make a simple navbar. Needs: Provides:	Links and sites
Stylesheet	You want to change the look of content on a page. For example, you want to change the font and background color of the entire page, the font color of headings, etc.	CSS	Use styles to change the look of your content. Collect styles for a page in a stylesheet. Link the stylesheet to your page. Needs: Provides:	Styles and stylesheets