Skip to content

Lesson 10 – Front-End Layout & Design Patterns

Prerequisites: Review Lesson 09 – AJAX for Dynamic Pages to ensure your project can handle dynamic updates before refining the interface.

Modern web interfaces rely on consistent patterns to organize content and keep the user experience intuitive. This lesson introduces common layout, component, and navigation patterns used across many applications. You'll also see how feedback mechanisms like modals and toast messages improve interactivity.

1. Layout Patterns

Master–Detail Pattern

A two-column layout that presents a list of items and the details for the selected entry.

  • Left pane: list of entities
  • Right pane: details of the selected item
flowchart LR
    A[List of Items] -- select --> B[Detail View]

Responsive Two-Pane Layout

Use flexbox to keep a fixed-width sidebar next to a flexible main area.

  • Sidebar scrolls independently
  • Main content grows to fill remaining space

2. Component Design Patterns

Entity Cards

Compact containers summarizing an entity with key actions like view or edit. Often used in grids or lists for quick scanning.

Tab Navigation (#subtabs)

Sections of content live in separate tabs while staying on the same page. JavaScript listens for tab clicks to swap the visible section.

Pills

Pills are capsule-shaped labels used to highlight a short status or category. They usually appear with a solid background color and rounded edges.

<span class="pill pill-success">Active</span>
<span class="pill pill-warning">Pending</span>

3. Forms & Input Groups

Group form controls with <label> tags and add clear spacing. Include styled focus states so users know which field is active.

  • Text fields, selects, and textareas
  • Inputs grouped with labels for accessibility

4. Navigation Patterns

A header bar that links to major sections of the application.

A vertical list of links or menus aligned to the left or right, often collapsible.

5. Interactivity & Feedback

Button Patterns

Primary action buttons draw attention, while secondary buttons offer less prominent options.

Modals

Overlay dialogs used for confirmations or forms.

  • Overlay modal: blocks interaction with the page until closed
  • Toast: small notification that appears temporarily

Next Up

Begin Module 02 with Lesson 01 – Intro to LLMs to explore how AI can assist your development workflow.