Lesson 20 / Structure

Page Types and Templates

Time: 47 min
Type: Reading + Interactive
Level: Intermediate
Use: Core

Plan common page types, reusable templates, and content hierarchy so websites feel consistent and purposeful.

Course Role

Core

Part of the main course path. Prioritize this before moving to optional polish or deeper references.

See course roadmap Minimum viable paths

Mark lesson complete

Teacher Notes / In-Class Use

Demo Live

Walk through the interactive demo before students start changing their own project files.
Connect the demo back to the first goal: Identify common page types and the user goals they support

Try In Class

Identify the page type for five pages on a website you use often.
Have students make one visible change, save, refresh, and explain what changed.

Submit Or Check

Ask students to show the work in the browser, not only in the editor.
Have students commit their progress with a clear message when the checkpoint is stable.

Watch For

Students copying code without checking file paths, spelling, or capitalization.
Visual changes that work locally but break when the project is published.

Learning Goals

Identify common page types and the user goals they support
Explain the difference between a `page type`, `template`, and `layout`
Group a sitemap into reusable templates and decide when a custom layout is needed

Interactive Demo

How to use this demo.

Use the demo as a small lab. Change one thing, observe the result, then connect it back to your own project.

What To Try

Switch between landing, listing, detail, and about page types.
Compare which sections repeat and which change based on user intent.

What Changes

The preview reorganizes around the selected page type.
The code sample shows repeated section structure that could become a template.

What To Notice

Templates are reusable structure, not identical content.
Page type decisions should follow what users are trying to do.

Apply It

Name the page types in your project before designing each layout.

Interactive Demo

Page Type Mapper

Pick a page type and see which sections usually matter most.

Page type

This demo uses extra JavaScript for teaching. The code sample shows the pattern to practice. View full demo source.

Introduction

Page types are reusable patterns for common user goals. A home page, listing page, detail page, article page, and contact page each have a different job.

Templates help repeated pages stay consistent. Instead of designing every page from scratch, you define a structure that can be reused for similar content.

Page Type vs Template vs Layout

These terms are related, but they do not mean the same thing. Knowing the difference helps you plan a site before writing code or designing screens.

Term	Meaning	Example
`Page type`	The purpose of the page	`listing page`, `detail page`, `article page`
`Template`	A reusable structure for one page type	One product detail template used by many products
`Layout`	The visual arrangement of content	Two-column layout, grid layout, full-width hero layout

Why Page Types Matter

Page types make websites easier to understand. When similar pages behave consistently, users can focus on their task instead of relearning the interface.

Navigation feels predictable across the site.
Users can recognize what kind of page they are on.
Teams can design and build faster with reusable structures.
Content stays easier to maintain as the site grows.

Common Page Types

Page Type	Purpose	User Goal	Common Sections
`Home page`	Introduce the site and route users onward	Understand what the site offers	Hero, key links, featured content, calls to action
`Landing page`	Support one campaign or offer	Decide whether to act	Value proposition, proof, benefits, CTA, FAQ
`Listing page`	Show many related items	Browse, compare, filter, or search	Title, filters, sort, item cards, pagination
`Detail page`	Explain one item in depth	Evaluate one product, project, article, or service	Media, description, specs, CTA, related items
`Article page`	Present long-form content	Read and understand a topic	Title, byline, body, media, related articles
`Portfolio project page`	Show process and outcomes	Evaluate the work and decision-making	Problem, role, process, visuals, result
`Contact page`	Help users reach out	Find contact options or submit a message	Form, email, location, expectations
`Search results page`	Show results for a query	Find the best matching content	Search field, filters, results, empty state
`Dashboard or account page`	Support repeat tasks and status checking	Manage information or complete tasks	Summary, navigation, data, actions
`Error or empty state page`	Recover from a dead end	Understand what happened and where to go next	Message, helpful link, search, CTA

Template Anatomy

Most templates combine shared site structure with page-specific content areas. The exact pieces change by page type, but the planning questions stay similar.

Shared header and navigation.
Clear page title or primary heading.
Primary content area that supports the main user goal.
Supporting content such as related links, metadata, filters, or summaries.
Primary call to action when the page needs one.
Shared footer and secondary navigation.

Template Examples

Template	Core Pieces
Article template	Title, author/date, hero image, article body, related articles
Product detail template	Product name, image gallery, price, description, specs, reviews, add-to-cart CTA
Listing template	Page title, filters, sort controls, item cards, pagination or load more
Portfolio project template	Project title, overview, role, process, visuals, outcomes, next project

Content Hierarchy

Before designing a template, decide what the page needs to communicate first. Hierarchy is the order of importance on the page.

What must the user understand first?
What is the main action or next step?
What information supports the primary task?
What can move lower on the page?
What should stay consistent across this template type?

When to Use a Template

Situation	Why a Template Helps
Many pages share the same content type	The structure can repeat without redesigning each page.
Pages support the same user goal	Users benefit from predictable patterns.
A site needs many similar pages	Templates save build time and maintenance effort.
Content will be updated often	A reusable structure makes updates safer and faster.

When to Customize

Templates should create consistency, not trap every page into the same shape. Some pages need custom sections or a custom layout because their goal is different.

Landing pages for campaigns or launches may need a unique flow.
A major portfolio case study may need richer storytelling than a standard detail page.
A one-off event page may need schedule, speakers, registration, and venue information.
A homepage often combines multiple patterns because it routes users to many areas.
Custom pages should still keep shared accessibility, header, footer, and navigation patterns.

Template Inventory Activity

A template inventory helps you turn a sitemap into a build plan. List every page, then group pages that can share a template.

Sitemap Item	Page Type	Template Group
`/work/`	`listing page`	Project listing template
`/work/weather-app/`	`detail page`	Project detail template
`/blog/`	`listing page`	Article listing template
`/blog/css-layout/`	`article page`	Article detail template
`/contact/`	`contact page`	Custom contact template

Planning Checklist

Write the primary user goal for the page type.
List the content sections the page needs.
Decide which sections repeat across similar pages.
Choose the primary call to action or next step.
Sketch the mobile layout before the desktop layout.
Check that page titles, navigation, and footer patterns stay consistent.

Common Mistakes

Mistake	Why It Hurts	Fix
Making every page custom	The site becomes inconsistent and harder to maintain	Group similar pages into templates.
Using one template for different goals	The page may not support the user task	Create different templates for different page types.
Inconsistent navigation	Users lose confidence moving through the site	Keep shared navigation patterns stable.
Unclear page title	Users may not know where they are	Use a clear `h1` that matches the page purpose.
Burying the primary action	Users may miss the next step	Place the main CTA where it supports the user goal.
Designing desktop only	The template may fail on small screens	Plan mobile structure and content priority early.

Checkpoint

Before moving on, make sure these feel true.

I can explain the main concept in my own words.
I can apply this lesson to my current project.
I can verify the result in the browser.
I can commit the change with a clear message.

Project Connection

This lesson supports current class projects.

Project 04 Interactive Portfolio Create a multi-page portfolio website that showcases your design skills and programming ability through responsive layout, strong presentation, and at least one interactive element.

Practice

Identify the page type for five pages on a website you use often.
Group a small sitemap into reusable template groups.
Sketch a listing page template and a detail page template.
Choose one page that deserves a custom layout and explain why.
Write the primary user goal for each template you sketch.
Create a content checklist for one article, product, or portfolio project template.