Mason Sklut

I’ll be honest, I’ve tried using Dreamweaver once before. Being oblivious to what the current web standards were (table-less), I didn’t know that much, so I figured what I was doing, or for that sake what Dreamweaver was doing behind the scenes was fine. I was wrong. Dreamweaver inserts a lot of bloat code which takes time to go back and take out. The whole process of using Dreamweaver was a terrible experience even for a novice like me. Even the built-in FTP program stinks. While reading a Mac blog (other than my own), I noticed Panic released Coda. I must say, they spent a lot of time putting this beautiful piece of software together. When Coda came out, I was really interested in web development, even more than before. So, I decided to learn how to “hand-code” websites using XHTML and CSS. Let me say, it’s been a wonderful experience learning how to code websites by hand — you have so much more control over what you’re doing. The best part is, it’s easier for you to maintain later on, since you wrote it yourself. After using Coda since early this year, I’d like to show other users the basics of using the program itself.

Setting Up Your Site

1. To setup a site, go to the Remote view in Coda.
2. Once there, click on the Add Site button on the bottom of the window.
3. Enter your settings for your site in the corresponding text fields.
4. Done.

screenshots: 1-2 3

FTP (File Transfer Protocol)

1. After you setup a site, open Coda (must be in the Remote view) and you will see an icon of the website your developing.
2. Double-click on it to login to the remote server.
3. All of your files will appear in a sidebar.
4. To change access privileges or rename file, right-click on it in the sidebar.
5. To add folders or files, click on the “+” button in the bottom-left corner. Option-click on the “+” to add a folder.

screenshots: 1 3 4 5

Writing/Editing Files

1. To open/edit a file, click on it from the sidebar. You can change your preferences [view screenshot] so you have to double-click instead (it’s a must if you have a tendency to hit the Return key by accident).
2. When you begin coding, select the Syntax you will be using (HTML, CSS). This makes auto-completion [view screenshot] work as well as invalid code warnings.
3. If you’re new to coding, turn on Hints button (bottom), so you will see programming hints for the attributes you write.
4. As you’re coding it’s necessary to make sure it’s valid code. Turn on the warning button (black triangle located beside Clips). When an error appears, a yellow triangle will appear with a tooltip explaining what’s wrong.
5. If you want to replace something like an entire set of <p> tags with <li> tags, use the Find/Replace feature. You can insert “wildcards” (button beside check mark) meaning it will find anything after/before the <p> depending on where you insert the wildcard.
6. After making an edit, you can preview your changes with the built-in browser. Just click on the Preview tab.

screenshots: 2 3 4 5 6

Save Time Coding With Clips

1. After you code your first site, there are probably helpful “snippets” of code that you want to use again in future site (i.e. navigation bars, DOCTYPE, etc,.)
2. This is where Coda’s Clips feature comes in handy.
3. To edit Clips, click once on the Clips button in the bottom of the window
4. To access your Clips while your coding, hold down the Clips button at the bottom of the window and a menu will appear for both the Global and Site Clips you have.
5. In the Clips window, you probably see a few defaults. To remove them, click on the “-” button.
6. To add Clips, click on the “+” button. Add a title and paste the code write into the text area below.
7. If you would like the cursor to go to a specific spot in code after it is inserted, click on the “Selection Placeholder” button in the spot you want.
8. To add a shortcut for a Clip, click in the area that says “click here to add a tab trigger”. Type in a letter then save your clip.
9. Now you just have to hold down KeyboardKey+Tab and your clip will magically appear.

screenshots: 3 4 6-8

Built-in Reference Books

1. Coda comes with several references books: HTML, CSS, JavaScript, and PHP.
2. When you open one of the books, you will see every possible attribute or tag that goes along with the selected programming language.
3. Click on one of the attributes to see examples on how to implement them in your site.

screenshots: 2 3

Coding With CSS

1. Coda makes coding with CSS a dream with the built-in editor.
2. You can use the CSS editor if you aren’t familiar with CSS quite yet. Personally, I like coding without the editor because you can’t use CSS shorthand from within the editor.
3. When you code it by hand, having the Symbols window open, makes it easier to quickly go back to a div#ID or div.class just by clicking on the symbol you want.

screenshots: 2 3