Welcome to Site Designer
Site Designer is CoffeeCup’s visual web design tool that lets you build real, responsive websites using CSS Grid, Flexbox, and major CSS frameworks — all without writing a single line of code. You drag elements onto a live browser canvas, style them visually, and publish with one click.
Who is Site Designer for?
Find yourself below — each row goes to the best place to start.
- You've never built a website No prior experience required. Every action you take writes real HTML and CSS underneath, so you learn web standards by building rather than before you start. Build your first page
- You design, and want to ship the real page Move from Figma or Illustrator straight to the finished web page — no developer handoff. What you see on the canvas is exactly what goes live. The canvas
- You write front-end code Prototype and build at speed without sacrificing code quality. Inspect, copy or export clean HTML and CSS at any point — no vendor lock-in. CSS preview
- You work on the back end Keep your PHP workflow intact. Live Preview renders the front end alongside your server-side code, in one environment. Live Preview
- You deliver client work Consistent output and faster turnaround across projects. Reuse components and Symbols instead of rebuilding the same pieces for every client. Symbols
What you can build
- Business websites with multiple pages
- Marketing pages and landing pages
- Portfolio websites and creative showcases
- Responsive blogs and article layouts
- One-page sites and interactive prototypes
Key concepts
Understanding a few core ideas will make Site Designer click immediately:
The Canvas — A live browser preview where you design visually. What you see is exactly what gets rendered.
Elements — The building blocks: containers, text, images, buttons, forms, grids, and more. Drag them onto the canvas to compose your page.
Classes and selectors — Site Designer uses CSS classes to style elements. You assign a class, tweak its properties visually, and the styles apply everywhere that class is used.
Frameworks — Site Designer supports Foundation 6, Bootstrap 4, and Materialize as optional CSS frameworks. You can also go frameworkless for maximum control.
Publish — When you’re done, publish directly to CoffeeCup’s S-Drive hosting or export clean HTML/CSS/JS to any host you choose.