When beginning with web design or development you will need some sort of code editor to write the website. From there, you will also need software to refine images, a web browser to test your design, tools to store code clips, and lastly an FTP client. I have in the past relied heavily on Adobe Dreamweaver, as I am a big fan of the entire web design Adobe Suite. But, when it comes to writing a blog I find it cumbersome to write PHP for some reason in Dreamweaver.

I turn to Coda as an application that is capable of performing each of the tasks I need to perform throughout a web project. Coda is strictly Mac software. This software has come a long way since it came out, and there are many articles out there with long lists of “useful plugins”. I want to just give a user a quick insight into what can make Coda faster, easier to use which will result in less headaches in the end.

1.Switching Through Tools
One thing that Coda makes easy is keyboard shortcuts. They allow a user to switch through different modes by pressing “Command and 1-6″. This would be used if you want to switch between your editor, preview or sites, etc. easily without using the mouse.

2.Toggle through documents
To indent a line of code press “Command, Shift, and the Left or Right Brackets.
Example: Command Shift { or }

3.Line Indent
When you begin coding in CSS or HTML you will find that Coda will indent lines for you on the fly. If you need to indent a line manually press “Command” and the left or right { } to indent any line the cursor is on.

4. HTML Validation
Coda will validate you HTML on the fly as you are working or you can validate it once you are finished. Coda will give you a hint as to what needs to be fixed, and take you to the beginning where the error is when clicked. You can find this at the bottom of the Coda window.

5. Setting up Sites
You can set up your website project within Coda and store them as different “Sites”. They can be automatically imported using Trasmit, but you have to be a user, or you can manually input the data to sync the sites. The homepage of the site will become the icon hanging on the Sites wall.

The sites that are set up have a remote and local folder linked to it, along with terminal settings if you also set that up. This is very useful, so when you save the file it will then update and publish to both file destinations. This will save you time over using Firefox FTP to load the files to the server each time you need to update the code.

6. Using Preview
I am a strong believer in using Mac tools, since they have always made my life easier as compared to other “easier” OS’s out there. I still rely on using Firefox web dev tools, and firebug most of the time but this will come in handy. This Preview will allow you to edit source code and see the changes without doing any editing to the document window.


7. Code Navigator
When you get into a coding project the tags, or elements can begin to pile up. This code navigator window can help you jump to specific tags within your document without having to scroll through and manually find them.


8. Coding Clips
Coda has a feature that allows you to store snippets of code, and insert them into a project on the fly. You can save snippets to use in any document.


9. Coda Books
From time to time I find it useful to have reference information available within Coda. It will come with 2 books for you to use right away, but you will want to find more books here.

10. Split Window
Coda gives you the opportunity to split multiple windows to view code on either horizontally or vertically.

You can right click on the file you wish to open and select “Split View” or use the keyboard shortcut: Command, Control, L.

There are many plugins available for Coda developed by third party vendors that you can install to increase functionality. I am currently using a few of them, and will report on them at a later time.
I hope these tips will get you started, there are plenty more so feel free to comment on what works for you as you explore.
-Colin

Tags: Coda