coffeecup college hero image


Intro to Site Designer

Creating a website from scratch can make more than one person sweat. Don’t worry, you won’t be that person. Through the tutorials we have prepared we will make the process fun and entertaining. If you still have further questions, our support will be happy to help you.

Ah! We also have a very active community on our forum as well and a guide that you can download and take wherever you want.

Let the difficulty not be an obstacle, let’s create something together!

Create & design.

visit site designer guide →

CSS Frameworks

Begin with a Bootstrap, Materialize, Foundation or Vanila CSS Framework.

Play tutorial

Focus Viewer

Organize images, documents, and other assets within the Project Resource Library.

Play tutorial

Content Elements

Fill a blank canvas with everything HTML5 has to offer. Drag raw elements in and style them as you desire.

Play tutorial

Magic Slider

Full range viewport slider — view and work on the design at any possible screen width.

Play tutorial

Site Inspector

Integrated web inspector with spacing outliner, DOM tree and live CSS preview.

Play tutorial


Scared of a blank canvas? Get a quick start by choosing one of the professional templates.

Play tutorial

Text Editor

Get access to the full Google Fonts library. Edit the typographic parameters, like line-height, kerning, tracking, weights and much more.

Play tutorial

Custom Breakpoints

Adapt the layout or tweak the design at any display width using custom breakpoints.

Play tutorial


Forget repetitive design work and speed up production time using the Component Library. Save and reuse items in other projects.

Play tutorial


Turn nav bars, footers, signup forms, and more into symbols you can change across your whole site with a single edit.

Play tutorial


Using code-free CSS controls, you can focus on design, while we take care of the code.

Play tutorial

Display None

Hide content at specific screen sizes using the Display None CSS control.

Play tutorial

Video Background

Understand how to work with the Background Video Element and Full Screen Background Video element.

Play tutorial

Mosaic Components

Discover new way to layout content using the Mosaic Component Collection. Constructed using CSS Grid these pre-built, customizable page sections feature fun hover effects, video backgrounds, and responsive actions.

Play tutorial

Export Pages

Using the Component Library you can save full pages and re-use them within other projects.

Play tutorial

Image Optimization

It is good practice to design for performance and use images that are lightweight. This is especially true when your site uses many images as you want the load time to be as speedy as possible.

Play tutorial

Reset Controls

Learn how to keep your project's CSS lean and clean without bloat from unused styles. The Reset control allows you to remove these unused properties to improve your site's performance.

Play tutorial

Rules Blocks

Display Rules: Blocks vs Inline Block.

Play tutorial

Responsive Images

Learn how to use the Picture elements. Add and position graphics, and load in optimized variations to display at specific view ports.

Play tutorial

Workflow Changes

Learn how to work with your default breakpoints for making default changes.

Play tutorial

Join the family and build your new website with Site Designer.

Visit Site Designer Guide

Traditional CoffeeCup perks.


Free support and upgrades during one full year for customers from our savvy technical staff. 

Go to support


Enjoy one year of free upgrades with the purchase of your Site Designer license.

Upgrade your plan

Get a personal assistant to help with your site design and maintenance.

With our expertise in design, usability, SEO, and marketing, we offer the solutions you need to create a website you’re proud of.

Learn More
tailored websites
community forums

Community forums

Share and get help from out community.

go to forums ➔
site designer logo

Site Designer Guide

Your guide to website development with Site Designer.