Tutorials overview

The rest of this guide explains controls one at a time. These do the opposite: each one takes a single build from start to finish, so you see how the pieces fit together in a real page.

• Start here Building the Visions template One complete travel page, end to end — header, responsive heading, navigation, hero, a CSS Grid section, a Flexbox photo row and the footer. The long one, and the best place to begin. 10 parts13 videos Open the tutorial
• Build a nested responsive menu Multi-level navigation that collapses to a mobile menu on small screens. 12 steps Open the tutorial
• Add a responsive Google Map Paste an embed and have it scale properly at every width — restyled, optionally, with Snazzy Maps. 9 steps Open the tutorial
• Animate with states and transitions Hover and Out of View effects, driven by the In State dropdown. 5 steps Open the tutorial
• Wrap text around an image The classic editorial layout: body copy flowing around a floated image, left or right. 5 steps Open the tutorial
• Embed a working contact form Connecting a form drawn in Site Designer to something that actually receives submissions. 3 steps Open the tutorial

Prefer to watch

The video library collects the guided tutorials from CoffeeCup College, grouped by topic.