Wednesday, May 14, 2008

Exploring Coda - A Tutorial I Built Using ScreenSteps

I built this tutorial using ScreenSteps, a wonderful documentation builder on my Mac.  You can also view this lesson at my ScreenSteps Live page.

Exploring Coda

Site Management

Site Management - if you were building multiple sites, you could manage all of them from this view.

Site Management Detailed

Here is where you actually manage the basics of the site - connectivity, etc.

Edit Mode

One-click access to all of your code. Browse to the left and edit in the main frame.

Instant Preview

Simply click back and forth between code and preview to see your changes instantly.

CSS Editor

You can build each of your CSS styles using this simple builder and get a preview of each style immediately. This tool basically references all styles that are shown on the doc that is currently being edited - HTML or CSS. The style navigator even shows you color and text changes as they will appear on your page.

More CSS


Built-in SSH terminal.


Built-in reference library. Amazing.

Books Detailed

Drill down into a book to find all of the elements that you may want to work with.

Pick an element and fully explore the usage complete with examples. Note the crumbtrail nav on the bottom. Nice touch.

Manage Assets

Browse and manage all of your site's assets.

Use the function browser to find each of the javascript functions that are contained within your page or js library.

Programming language hints as you type.

Page Element Browser

Click on each page element to browse and select each one within the page.


A HUD browser of all relevant clippings to paste directly into your page. Think of this as your clipboard that you can actually manage. Core Animation used here - when you click on the i button, the pane actually flips over to reveal more info about that particular clip.

No comments:

Search This Blog