Skip to content
Site Designer Guide
  • Get started
  • Guides
  • Templates
  • Tutorials
  • Reference
Get started
  • Welcome to Site Designer
  • Install Site Designer
  • Your first 10 minutes
  • Choosing a template
  • Workspace at a glance
  • Glossary of terms
The canvas
  • Canvas overview
  • Selecting elements
  • Reordering, duplicating & deleting
  • Drag & drop and nesting
  • Hover context menu
  • Inline text editor
  • Auto-scroll and navigation
Control panes
  • Control panes overview
  • Content pane
  • Design pane
  • Effects pane
  • Outline pane
  • CSS preview pane
App toolbar
  • Page Manager
  • Resources Manager
  • Template Manager
  • Components library
  • Live Preview
  • Feature Queries (@supports)
  • Structured Data (JSON-LD)
  • Preview in browser
  • Settings panel
Elements
  • Elements overview
  • Text elements
  • Image elements
  • Container, Section, Divider, Button
  • Interactive elements
  • Layout elements
  • Menu Builder
Components & Symbols
  • What are components?
  • Project components
  • Prebuilt components
  • Saving your own components
  • Symbols — globally synced
  • Library organization
Classes & selectors
  • Color-coded selector system
  • Class selectors explained
  • ID vs. class
  • Predefined framework classes
  • Combining classes
  • Pseudo-classes & state styling
  • Resetting styles
  • Class naming best practices
Style controls
  • Typography
  • Dimensions & length units
  • Margin and padding
  • Background
  • Borders & border-radius
  • Box shadow & CSS filters
  • Position and layout flow
  • Overflow and z-index
  • Transform and opacity
Layout systems
  • Layout fundamentals
  • Flexbox visual guide
  • CSS Grid overview
  • CSS Grid controls
  • Feature Queries for Grid fallbacks
  • Push & pull techniques
  • Stacking content for small screens
Responsive
  • Responsive design demystified
  • The width slider
  • Custom breakpoints
  • Breakpoint mode
  • Mobile-first vs. desktop-down
  • Picture element & responsive images
  • Hide & show elements at breakpoints
  • Static to responsive: step-by-step
Effects
  • Hover effects & transitions
  • Mouseover background effects
  • CSS filters & blend modes
  • Smooth scroll behavior
  • CSS animations & keyframes
Pages & site
  • Page Manager reference
  • Add, duplicate, reorder & delete
  • Page properties (title, meta)
  • Open Graph & social sharing
  • Global head & footer code
  • Favicon setup
  • Custom HTML, CSS & JS injection
Frameworks
  • Framework comparison
  • Foundation 6 reference
  • Bootstrap 4 reference
  • Materialize reference
  • Switching frameworks mid-project
  • Custom data-* attributes
  • ARIA roles & accessibility
Publish & export
  • Publishing overview
  • Publish to S-Drive
  • Export to a folder
  • Configure the export directory
  • PHP & MySQL with XAMPP
  • FTP publishing
  • Setting up a custom domain
Tutorials
  • Video library (YouTube)
  • Building the Visions template
  • One-page portfolio (CSS Grid)
  • Landing page with Flexbox
  • Building a blog layout
  • Static to responsive (5 steps)
  • Navigation with Menu Builder
Troubleshooting
  • Why isn't my element resizing?
  • Class vs. ID confusion
  • Fonts not loading on export
  • Live Preview differs from browser
  • Recovering an autosaved project
  • Reset Site Designer preferences
  • Common framework conflicts
  • Reporting a bug
Reference
  • Keyboard shortcuts
  • File format (.rsd)
  • Supported file types
  • CSS properties reference
  • Framework class quick reference
  • Browser support matrix
  • System requirements
Releases
  • What's new — latest release
  • Version history
  • Migrating v2 → v3
  • Migrating v3 → v3.5
  • Deprecated features
  1. Home
  2. /
  3. Tutorials
  4. /
  5. Video Library
YouTube Channel

Video Library

29 official tutorial videos from the CoffeeCup YouTube channel, organized by topic. Click any video to watch it right here.

No videos in this category.

Watch on YouTube

On this page

    ↑ Back to top

    Site Designer Guide — the official documentation for CoffeeCup Site Designer.

    Product

    • Site Designer
    • Templates

    Resources

    • Get started
    • Tutorials
    • Reference
    • Releases

    Community

    • Forum
    • Contact support

    Legal

    • Privacy
    • Terms

    © 2026 CoffeeCup Software. All rights reserved.

    Esc
    ↑↓ Navigate ↵ Open Esc Close
    Paige Site Designer Guide