The CoffeeCup Guide to

Responsive Website Design



  • Author
    Bob Visser CoffeeCup Guru
  • Design
    Mateo Carrasco Master of Art
  • Edits
    Suzanne Norvell Tutorial Jedi
  • Document Version
    Version 3.0 June 3, 2019
  • Production Rights
    CoffeeCup Inc. Fresh software, warm people.
TOP

Video Tutorials

Watch how the app works and learn a few cool tricks using our video tutorials. Love to learn by video? We're also on YouTube and Vimeo! You should totally subscribe to our channels below. You'll find more how-tos, demonstrations, and showcase videos.

Meet the App in this Video Tour

This video is a great starting point! Get introduced to the app's controls, learn how everything is organized, and get an understanding of the general workflow for building websites.

Build the Visions Theme

Learn the app while building a complete webpage. These 8 narrated videos are great. Visit the Video Guide Article to get more details about each video, four hot tips, and a full listing of theme configurations.

Step 3
Create a hero image section. Insert a Picture element and make it stretch full width.
Step 4 Insert and style a Heading element for an eye-catching message.
Step 5
Nest multiple containers and position three grouped items (image link with a header).
Step 6
Create a closing message by adding and styling a Paragraph & Button Link element.
Step 8
Learn how to responsify (edit) the design for wider screens using the width slider and breakpoints.

Master 'Grid' With These Tutorials

Learning a new technolgy can be a bit of challenge. The videos below, in combination with the visual interface of Site Designer caused a big cheer in the CoffeeCup community. They have helped many get started with the best new technolgy the web has seen in the last decade. We will be adding more in the next weeks — make sure to subscribe to our newsletter so we can keep you posted!

Episode 1 Understand the basics about creating a general CSS Grid layout.
Episode 2 Learn about the implicit grid, track sizing and the FR unit.
Episode 3
Creating the Holy Grail layout using CSS Grid Template Areas.
Step 4 Insert and style a Heading element for an eye-catching message.
Step 5
Learn how to nest multiple containers and position three grouped items (image link with a header).
Step 6
Create a closing message by adding and styling a Paragraph & Button Link element.
Step 7
Learn how to build a simple navigation footer using Text Links.
Step 8
Learn how to responsify (edit) the design for wider screens using the width slider and breakpoints.

Popular How-To Tutorials And Demos

Here are some great videos to help you master the controls. New videos will be posted regullary.

Text Editor Learn how to styles special text inline using the Text Editor.
Breakpoints Watch how the layout and design changes at breakpoints.
Grid Editor
Using the CSS Grid Editor to set up a grid layout.
Add Media
A demonstrations of adding and configuring both the HTML5 Video and Audio Elements.
State Control
Using the in State control to apply a hover effect on a button.
Components Library
Save items to your Components Library to reuse them throughout your projects.
DemoWriting Mode Position text with the Direction & Writing Mode. Plus build a CSS Grid layout using area names.
Show/Hide How to show and hide an element or group using attributes.
Video Modal Learn how to create a full screen video modal that appears on screen when a button is clicked.
TutorialTutorialColor Coded CSS Understand the basics for using the TYPE, CLASS, and ID selectors.
TutorialTutorialBuild Nested Menu Create a multi-level responsive menu that transforms into the hamburger icon for mobile screens.
TutorialTutorialAdd & Delete Pages Manage the project pages such as title and keywords. Learn how to add, delete, and duplicate pages.
TutorialTutorialWorking with Images Learn how to add a Picture element to the canvas, replace the placeholder image, and center the graphic.