Installing an IDE

Hey, what's up, everyone? Marc Price here with Dev Snopes.com. And in this video we're going to talk about IDs. And an ID is an integrated development environment. Now with web development, you don't actually have to use an ID to write code. You can write code from any type of text editor because browsers will render that text as HTML. However, IDs are so important because they make your workflow so much easier with things like autocomplete and hints and cool colors and stuff. Why wouldn't you want cool colors? And so I want to cover a few of the most commonly used IDs that are out there for web development. The first one is Atom. Okay, this is open source. It's a fantastic IDE with lots of plug ins, lots of community support. So they're creating things for all the time plug ins, tools that you can install on it and make your life a little bit easier as you become a more advanced web developer, the tools will mean a lot more to you. Okay, very cool. atom.io. Another open source one is called brackets. Okay. And by the way, Atom is supported by Google. Okay? Even though it's open source, it's kind of Google that's backing it, whereas brackets is open source as well, but it's supported by Adobe and Brackets is really cool. And this is the one we're going to use and we're going to use it because it's fun. Okay, It's cool. It has all the same features as Atom even has a big community of developers, but sometimes it's just nice to change things up. I often go between atom and brackets and Visual Studio code often. So here's another option brackets, and this is the one that we'll be using. Another one is Visual Studio Code, which is Code.visualstudio.com. And this is not the Visual Studio that you would use for enterprise application development. This is more so for web development and things like that, and it's available for Mac and for PC similar to brackets and Atom or rather Windows and Mac OS. And this is a really cool tool as well too. I've used this many, many times now. There's a fourth one that many web developers like. I personally don't like it, but it's called Sublime and it's just one guy who maintains it. You can buy it, and this one you have to pay for, although you can download it for free, they want you to pay for it. And this has lots of plug ins and things you can install. But I think there's a little more setup involved in this and it surely doesn't have the support and the community support and the it's not as pretty either. So we're not going to use this and we're not going to use Visual Studio Code or Atom just because for this particular course we're going to use brackets. No major rhyme or reason. It's just it's a good beginner tool and I think you'll like it. So we're going to go ahead and install this. You can do this on both Windows and Mac, so I'm going to go ahead and download brackets 1.8. There we go. It finished. Click it. Of course, if you're on windows, this would say dot exe. Just go ahead and click it to install it. And on Mac, I'm just going to go ahead and drag this over here into the applications folder. On PC, you can install it wherever you want in the C drive or program files, whatever works for you. And you can install a shortcut on your desktop if you want. Okay, that is done. Let's go ahead and close this window here. I'm going to eject this and we're going to go into our launchpad launchpad. Let's try that again. Scroll over all the way to the end and there's brackets. I'm going to go ahead and take this and drag it down here next to my Visual Studio code. As you can see, I also have atom installed right here as well too. So atom brackets, Visual Studio code there at the bottom. Okay. Let's go ahead and open up brackets. Perfect. Comes with the getting started HTML file here. Pretty cool. What we can do is we can actually click the lightning bolt here. Welcome to live Preview. Live Preview connects brackets to your browser. It launches a preview of your HTML file in the browser, then updates the preview instantly as you edit your code. And this is the main reason why I chose to work with brackets here is because in other programs you have to take your file, then open it in a browser. Whereas with brackets, if you're as you're typing and making changes, you see those changes instantly in the live preview, which I think is really cool. So in this early version of Brackets, Live Preview only works with Google Chrome and updates live as you edit CSS or HTML files, changes to JavaScript files are automatically reloaded. When you say if you hate Google Chrome, I'm sorry, your web developer now you've got to love it. Web development and Google Chrome go hand in hand. Google Chrome has so many tools that will aid you as a web developer way more than Safari. And of course, we're not even going to talk about Internet Explorer, but Google Chrome, if you don't use it now, you should definitely start using it because this is going to become your best friend. And of course, it's like the most widely used browser. So. Okay. And sure enough, look at this. It's opening up a file here, getting started with brackets. So this code right here is automatically being rendered over here on the right hand side, which is pretty dang cool. And let's just see if it's actually working. So getting started with brackets, let's say exclamation, exclamation, exclamation. And sure enough, it is live. Now, there's no other program that does this. You can get plugins for it, but Brackets supports this right out of the box, which I think makes it really amazing. And so there you have it. We've got brackets installed and we are ready to do some web development and let's go ahead and do it. Mark Bryce with Dev Snopes.com. See you soon.