Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Coda

The first editor we’re going to take a look at is Coda. This is Mac only. Arguably one of its best features is the option to create and organize sites within the editor. Let’s check it out.

Related Links

1.Introduction
1 lesson, 01:14

Free Lesson
1.1
Welcome
01:14

2.Mac Only Editors
2 lessons, 17:11

Free Lesson
2.1
Coda
08:51

2.2
Espresso
08:20

3.Windows Only Editors
1 lesson, 05:32

3.1
Notepad++
05:32

4.All Platform Editors
3 lessons, 30:14

4.1
Brackets
09:04

4.2
Atom
09:49

4.3
Sublime Text
11:21

5.Conclusion
1 lesson, 02:38

5.1
How to Choose the Right Editor?
02:38


2.1 Coda

The very first editor we're gonna take a look at is CODA. Now this is Mac only. And probably one of its best features is to create sites or projects within the editor. This is Coda and as you see right from the beginning, we are greeted with the site screen. So you can basically use this to create a new site which is kind of a project, right? So it's going to keep track of all of your folders, all of your files, and the good part is you can also connect to an FTP server using this functionality. So, what you would do is just click this, you would give it a name, then maybe the remote URL and a local route. And then, if you want, you can set up your server right here. Also, if you're working with GitHub or Git, you can use this bit right here to enable version control. And you can even connect to a database right here. All in all, pretty cool. Now, let's have a look at the UI. So, on the top side we have a toolbar that shows the sites, the Files tab, which looks like this, you can also use this to connect to an FTP server. And then a blank HTML file. Now, I'm gonna drag in a folder here. And as you can see, it opened up the Lessons folder. Now I have the whole structure here. And I can go ahead, double click any file, and open it in the editor in here. Now inside this view, we also have this list on the right with all of our files and some additional options. I can go here. And have access to a few extra features. Then I can go here, and I have access to a navigator of sorts. So, if I want to quickly go to the img style, I can click on this and it's gonna find it right here. Go to body and it's gonna take me right here. Pretty cool. And this is the Publishing tab which must be set up in the sites first. Now the cool things about Coda, for example I have this lesson nine here, and if I click on the preview, it's going to open that page in an internal browser. Which is really, really nice. If I want, I can click this button right here and open a new pane. So for example if I want the preview to be in a different pane but in the same window I can hit preview, and it's gonna open it right here. I can even collapse this if I want to make more room, and I can go back to my code here and have a preview here, or the other way around. If we click on this again we can see some additional options. So this actually creates a new document window. And if I want I can close this any time like this. And then I have access to a new file, a terminal window and a book. Now, let's open the book, and the cool thing is Coda has all of these books you can use for reference. For example, if you're looking for something in CSS, you can just open the CSS book, and let's say you want to learn about the font-size property. Well, you just type font-size, and you get a summary here. You get the syntax, values. So this is really helpful for beginners, especially, that maybe are not so good with CSS or any kind of topic covered by these books. Here we can see you have HTML. Let me just resize this. JavaScript, the DOM, PHP. So a whole bunch of different stuff here, really, really useful. Now, previously I showed you this tab. Now, I want to talk about something in here, and that is Clips. So basically if you click on Clips, you see I have a general clip here that just adds some Lorem Ipsum text. So how that would work is I would go in my code here and, let's say I want to add a paragraph, and inside, I'm gonna type lorem, and you can see I have a little pop-up, and if I hit enter, it's gonna fill in with this bit. So this is a reusable code snippet that I can call on using a single keyword. And I can add new ones if I want to. For example, let's say testing. Let's say Hello World. Now this can be a placeholder, it can be an insertion point, a whole bunch of different things here. So really useful stuff. Now I'm gonna save it. I'm gonna do, again, inside this I'm gonna do testing, enter again, and there it is. Now, another cool feature of Coda is called Air Preview, and you can see a little button here. And what this allows you to do is actually preview your page directly on a tablet, on an iPad. And for this, you actually need Diet Coda which is an iOS application. You can download it in the App Store. It costs 20 euros. And it looks something like this. So you can basically edit your files on the iPad. You can see it also has the sites functionality going on. So really, really cool. So basically, you would buy this, install it on your iPad, and then you could preview your files directly there. Now the last thing I want to show you here are the preferences. Which can be brought up if you go to Coda > Preferences. A big plus for Coda is the fact that they have a visual preference page instead of a file that you will need to edit. So from here, you can change a lot of things, like the split direction for the new panes, the sidebar position, you can set up a sync here. Now, with the panic servers, you can control the Editor, then the Colors, the theme. For example, if you wanna change the theme, you can do so just like this and it's gonna change instantly. You can control everything you want about the editor just from this. And there you go. That's the quick tour of Coda. So let's see about the pros and cons. First of all, the pros. And I think number one goes to the fact that Coda is very good for beginners, and it has a very intuitive and helpful UI. Number two, it has a built-in FTP client, so it's really easy to work with files that are hosted somewhere else. Then there is the fact that you have books at your disposal, from HTML, to PHP, to CSS. Basically, just to reiterate number one, it's real easy for beginners. If you want to quickly search for a term, you don't have to go to google or anything like that. You just open the book and you search it there. Another pro is the fact that you can easily change themes and add new ones, it's really, really easy. And then for number five, I would say that the fact that you can do a lot of things in a single window is a very big pro. So you can have multiple panels, with a preview, with maybe a code, with the FTP so you can track the upload or download progress. And also you can read books. So, it's very very helpful. All right, now let's see about the cons, and the first one is the fact that its plugin library isn't as extensive as some of the other editors out there. It does have a few plugins, but their number is kind of limited. Then on number two, I would say the price. $99 is a bit on the pricey side, but again, this is an editor that offers a lot of stuff, so it might be worth it. And number three, it's Mac only. And those, in my opinion, are the pros and cons. Overall, a really solid editor, but because of the pricing and the OS, it might not be for everyone. So, next up, let's have a look at another Mac only editor, which is Espresso.

Back to the top