The CoffeeCup Guide to

Responsive Form Designer



  • Author
    Bob Visser CoffeeCup Chief
  • Design
    Diego Naves Master of Art
  • Edits
    Suzanne Norvell Tutorial Jedi
  • Document Version
    Version 3.0 February 15, 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.

Build the 'Visual Choices' form design

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.

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 Form 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.
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.