Lesson 22 / Page Types
Item Listing and Details
Design item listing pages and detail pages that help users compare, evaluate, and act.
Teacher Notes / In-Class Use
Demo Live
- Model the core workflow from the lesson using a small class example.
- Connect the example back to the first goal: Identify the key components of an item listing page
Try In Class
- Build one item listing using a responsive grid.
- 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 the key components of an item listing page
- Compare grid and list layout patterns
- Explain what belongs on a strong item detail page
Introduction
Item listings are the digital storefronts of your website, showcasing products or services in an organized and visually appealing manner.
A well-designed item listing page can significantly impact user engagement and conversions.
Key Components of an Item Listing
- Thumbnail Image: A visually appealing image that represents the item.
- Product Title: A concise and informative title.
- Brief Description: A brief overview of the product's features and benefits.
- Price: The price of the product or service.
- Call to Action: A button or link that encourages users to learn more or make a purchase.
Common Layout Patterns
Item listings usually use either a grid layout or a list layout. The right choice depends on how users need to scan and compare content.
Grid Layout
This pattern arranges items in a structured grid, making efficient use of space and visual hierarchy.
<ul class="item-grid">
<li class="item-card">
<a href="project-detail.html">
<img src="project1.jpg" alt="Project 1">
<h4>Project 1: Website Design</h4>
<p>A modern, responsive website design for a tech startup.</p>
</a>
</li>
</ul>Grid Layout CSS
.item-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.item-card img {
aspect-ratio: 4 / 3;
width: 100%;
object-fit: cover;
}List Layout
This layout displays items vertically, which is useful for detailed reading or mobile views.
<ul class="project-list">
<li>
<a href="project-detail.html">
<img src="project1.jpg" alt="Project 1">
<h4>Project 1: Website Design</h4>
<p>A modern, responsive website design for a tech startup.</p>
</a>
</li>
</ul>List Layout CSS
.project-list {
list-style-type: none;
padding: 0;
}
.project-list li {
margin-bottom: 20px;
}Additional Considerations
- Responsive Design: Use media queries to adjust the grid layout for different screen sizes.
- Image Aspect Ratios: Consider using aspect ratio boxes to maintain consistent proportions of images within the grid.
- JavaScript Libraries: For more complex masonry layouts, you can use libraries like Masonry or Isotope.
- Accessibility: Ensure that your masonry layout is accessible to users with disabilities by using appropriate ARIA attributes and keyboard navigation.
The Product Detail Page
The product detail page provides a more in-depth look at a specific item.
It should help users evaluate the item, understand its value, and decide what to do next.
- High-Quality Images
- Detailed Description
- Pricing and Availability
- Customer Reviews
- Related Products
- Call to Action
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.
Practice
- Build one item listing using a responsive grid.
- Build the same content as a vertical list layout.
- Sketch the information hierarchy for a product or project detail page.