Content types

Codelabs #

Format: Multi-step instructions paired with an embedded sample app

Typical use case: Showing how to do small, fairly distinct development tasks

Placement on the site: Always associated with a post, which serves as the landing page for the codelab

Length: Typically less than 1,000–1,500 words

Template

Examples:

• Example codelab
• Creating WebP images with the command line
• Minify and compress network payloads with gzip

Collection #

Examples:

• Example collection

Course #

Examples:

• Example course

Explore #

Examples:

• Example explore

Item page #

Examples:

• Example item page

Landing page #

Examples:

• Example landing page

Pattern #

Examples:

• Example pattern

Pattern set #

Examples:

• Example pattern set

Posts #

Format: Primarily informational with instructions included as appropriate

Typical use cases:

• A description of a problem detected by a Lighthouse audit and an explanation of how to fix it
• An explanation of how to accomplish a widely applicable web development task—or an explanation of why that task is important
• An explanation of a web development issue relevant to a specific industry (for example, e-commerce)
• An explanation of how or when to use a common framework (for example, React, Vue)
• A news announcement relevant to the web.dev audience (for example, a new API, a recent conference talk)

Placement on the site:

• Always appears on the blog, organized chronologically
• May transition into a collection in the Learn section, organized thematically with other posts

Length: Typically less than 1,000–1,500 words

Template

Examples:

• Example post
• Are long JavaScript tasks delaying your Time to Interactive?
• Code splitting with React.lazy and Suspense