O'Reilly logo

Coding with Coda by Eric J Gruber

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 6. Working in Coda

Abraham Lincoln once said, “Give me six hours to chop down a tree and I will spend the first four sharpening the axe.”

Up to this point, we’ve spent most of our time configuring Coda to our specifications, preparing it to work efficiently with our own workflow. Now it’s time to move into how we’re actually going to work in Coda.

We’ll start with the Sample Site we created. Open it up and we’ll start cutting down some proverbial trees.

The sole file we have in Sample Site, index.html, is empty. We’ll fix that now, adding the following code to create a barebones, HTML5 page.

Constructing a Page

With index.html open, we’ll use the Clips sidebar to get our page ready for markup. Since all the cool kids are doing HTML5 these days, we grab the HTML5 DOCTYPE clip and drop it in the page.

We also need a basic structure, but we see that there is an HTML clip with a tab trigger called basicpage. Typing “basicpage” after the DOCTYPE markup and pressing Tab gives us the same effect as dragging the clip to the page.

We’ll need an h1 heading, so let’s tab trigger h1, putting “Welcome to our Sample Site!” at the insertion point. And this page needs an intro paragraph, so directly below it, we’ll code a paragraph tag and some content. Your end result should look like Figure 6-1.

Index page with basic structure.

Figure 6-1. Our index page with some basic structure

We save the file, and shortly after saving, notice ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required