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?
Freelancers & Agencies
Consistent output, faster turnaround. Manage multiple client projects with a production workflow that scales — from solo freelancer to full-service agency.
Visual Designers
Move from Figma or Illustrator straight to the final web page — no developer handoff. What you see in Site Designer is exactly what goes live.
Front-end Developers
Prototype and build at speed without sacrificing code quality. Inspect, copy, or export clean HTML and CSS at any point. Zero vendor lock-in.
Back-end Developers
Keep your PHP workflow intact. Site Designer's Live Preview renders the front end alongside your server-side code in a single, unified environment.
First-time Web Builders
No prior experience required. Every action you take writes real HTML and CSS underneath — you learn web standards by building, not before you start.
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.