All CoursesWeb Design Course

Visual Aids

Diagrams and visual references for CSS layout and HTML structure.

CSS Box Model

┌──────────────────────────────────────────┐
│                 MARGIN                   │
│  ┌────────────────────────────────────┐  │
│  │              BORDER                │  │
│  │  ┌──────────────────────────────┐  │  │
│  │  │           PADDING            │  │  │
│  │  │  ┌──────────────────────┐   │  │  │
│  │  │  │                      │   │  │  │
│  │  │  │      CONTENT         │   │  │  │
│  │  │  │   (width × height)   │   │  │  │
│  │  │  │                      │   │  │  │
│  │  │  └──────────────────────┘   │  │  │
│  │  └──────────────────────────────┘  │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

box-sizing: content-box  → width = content only
box-sizing: border-box   → width = content + padding + border

Flexbox — Main Axis & Cross Axis

flex-direction: row (default)
═══════════════════════════════════════════
         MAIN AXIS →
    ┌──────┐  ┌──────┐  ┌──────┐
    │ Item │  │ Item │  │ Item │    ↕ CROSS
    │  1   │  │  2   │  │  3   │      AXIS
    └──────┘  └──────┘  └──────┘

justify-content (main axis):
  flex-start:    |▪ ▪ ▪         |
  center:        |    ▪ ▪ ▪     |
  flex-end:      |         ▪ ▪ ▪|
  space-between: |▪     ▪     ▪ |
  space-around:  | ▪   ▪   ▪   |
  space-evenly:  |  ▪   ▪   ▪  |

align-items (cross axis):
  flex-start:  items at top
  center:      items vertically centered
  flex-end:    items at bottom
  stretch:     items fill full height

CSS Grid — Template Areas

grid-template-areas:
  "header  header  header"
  "sidebar main    main"
  "sidebar main    main"
  "footer  footer  footer";

Visual Layout:
┌──────────────────────────────────┐
│            HEADER                │
├──────────┬───────────────────────┤
│          │                       │
│ SIDEBAR  │       MAIN            │
│          │                       │
│          │                       │
├──────────┴───────────────────────┤
│            FOOTER                │
└──────────────────────────────────┘

grid-template-columns: 250px 1fr 1fr;
grid-template-rows: auto 1fr auto;

Responsive Breakpoints

                 MOBILE           TABLET          DESKTOP
                 < 768px         768-1024px        > 1024px
            ┌──────────┐    ┌──────────────┐  ┌────────────────┐
            │ ████████ │    │ ████  ████   │  │ ██  ██  ██  ██ │
            │ ████████ │    │ ████  ████   │  │                │
            │ ████████ │    │              │  │ ██  ██  ██  ██ │
            │ ████████ │    │ ████  ████   │  │                │
            └──────────┘    └──────────────┘  └────────────────┘
             1 column         2 columns        4 columns

@media (min-width: 768px)  { /* tablet styles */ }
@media (min-width: 1024px) { /* desktop styles */ }

HTML Document Flow

Browser reads HTML top → bottom:

  <!DOCTYPE html>        ← Tells browser: "This is HTML5"
  <html>
    <head>               ← NOT visible on page
      <meta>             ← Settings (charset, viewport)
      <title>            ← Tab/window title
      <link>             ← CSS files
    </head>
    <body>               ← VISIBLE content
      <header>           ← Top of page (logo, nav)
        <nav>            ← Navigation links
      </header>
      <main>             ← Primary content
        <section>        ← Grouped content block
        <article>        ← Self-contained content
      </main>
      <aside>            ← Secondary content (sidebar)
      <footer>           ← Bottom of page
      <script>           ← JavaScript (load last!)
    </body>
  </html>

CSS Specificity Hierarchy

SPECIFICITY (highest → lowest):

  !important           →  Overrides everything (avoid!)
  ────────────────────────────────────────
  Inline styles        →  style="color:red"     (1000)
  ────────────────────────────────────────
  ID selectors         →  #header               (0100)
  ────────────────────────────────────────
  Class / Attribute    →  .card, [type="text"]   (0010)
  Pseudo-class         →  :hover, :first-child   (0010)
  ────────────────────────────────────────
  Element / Pseudo     →  div, p, ::before       (0001)
  ────────────────────────────────────────
  Universal            →  *                      (0000)

  Example: div.card#main = 0001 + 0010 + 0100 = 0111
  Example: .card .title  = 0010 + 0010          = 0020