[SOUND] Okay, so here I am in Mac OS, and I'm actually using the latest one as of this recording, which is El Capitan. And let's go ahead and, I already downloaded Sublime Text. So, let's go ahead and double click that and, and install that real quick. Very easy it just opens up this window. We just drag it to my applications folder. And after about a second it's done. Just verify that it's actually in here. It is, so I can close that, close that, and go ahead eject the mount. And actually now if I do command space, and start typing some sublime it will come up Sublime Text right there. I said yes, I want to open it for the first time. And actually, I want to drag it right next to Chrome, that I already installed. Okay, so this way I could actually quit at this point. And the next thing I want to do, is we want to install Git. So we're going to go ahead and install the latest version of Git, and we'll go to Google and I will just, search for download git for Mac. And that's the first link comes up, that's exactly what we need. And hopefully it will start downloading in about a second. Or we could just click ourselves and download it ourselves. Okay, so it started to download. Okay, so once it's done, we'll go ahead and open it up. Double click on it, and now we have to double click the package installer. And it says here, that our security preferences at the moment is such that, we're not allowed to install anything that is not from the Mac App Store. That's not a problem, what we're going to do is just click OK, and we'll go to our preferences and we'll go to security. Right here, allow apps downloaded from but we really need to have it anywhere. So, we'll go ahead unlock that and we'll click anywhere. It says, yes I do want to confirm anywhere. After we install, we can always put it back to the original setting so we're not unsecure. And now, we can double click on that file. And go ahead and go through the prompts. Install, give it that password, admin password and we're done. So now we have to just double-check that 2.6.3 is actually installed and is in our command line. So we'll go ahead and do command-space and we'll pull up the terminal. And in the terminal we'll say git dash dash version, and it's 2.6.3, which is exactly what we need. Okay, so Git is installed. The next step is to install browser sync. Well in order to install browser sync, we first need to install node JS. So we'll go ahead and go to say download. Download node js for Mac and here it is. And it says here Mac installer, we'll go mature and dependable. Okay, once that's done let's go ahead and open it up and I will click it. To install we'll go through the prompts Yes we agree, install, can give it the admin password, and we're done. And it just says here, that we have to make sure that /usr/local/bin is in our path. Well, let's go ahead and make sure of that, we'll go to terminal. Well actually, what we'll do is we'll restart the terminal. It's always a good idea to restart the terminal after things like that install. And we'll say, node, dash, dash, version. And that's the right one. And another one is npm, which stands fore node package manager, dash, dash, version, which is actually what we're really after right now. And it seems like that's working, as well. We'll go ahead and echo the path just like they told us to to make sure. And sure enough user local bin is inside our path, so we're good to go. So to install browser sync let's go ahead and Google it first, browser sync. And we should get the browser sync's, the webpage and it tells us to install it we need to do npm install dash g browser sync. And dash g just means globally, not just for our user but for all users. Well, we're going to go ahead and copy this command. But, since there's some new things that came in the Mac OS El Capitan, we're going to actually do a sudo command, instead of just directly installing. So, do sudo npm install, dash g browser sync, we'll go ahead and execute that, it's going to ask us for the password, we'll give it the password and hopefully, this will install just fine. Okay, there were some warnings, and it's also telling us we should install developer tools. We'll go ahead and click OK, because that's something we're going to need. Hopefully, you already have that installed for you. But if you don't, this is something that you'll definitely need as you keep developing. Okay, it says software was installed, and lets go ahead and double check that our browser sync actually got installed. Lets do browser sync dash dash version, and sure enough that's working. Now, I can't guarantee that all these steps are going to be exactly the same because depending on what you actually have already installed on your machine. These steps might be a little bit different, but that's about what you're going to get. There are some things that came out as error but it seems like browser sync actually installed after all, so we can use it. So let's go ahead and try it out. Let's go and open, we're in Terminal. Let's go ahead and make a directory called, test site, okay? And we'll open our subline text and we'll save this page. We'll save this page inside our test site folder. Users, Yakov, Test Site, and we'll just call it index dot HTML. Okay, and now we could actually have a shortcut here inside Sublime. If we do HTML then control space should give us a quick template of a page, we'll say Hello Coursera. And we'll just give it one h one, we'll say again hello Coursera, okay, we'll save that page. So now what browser sync is going to allow us to do is it's going to allow us to constantly have or be constant kind of a little server for us that we could see our page in the browser. And at the same time as we edit our page it will update everything that we're editing straight in the browser. So the way that we'd do that is we could issue a command. But first first we'll go switch the test_site, we'll cd into test_site, clear that. It does our HTML, so we'll issue a command called browser-sync and say start, say server, and server mode. And we'll give it another option called directory. It will actually serve up the entire directory, not just the particular file. And we'll tell it what what type of files to watch for, that if any of those files change, I want you to go ahead and refresh the browser. And we'll put a star, meaning I want any type of files that say, that are going to change in this directory or any sub directory, I want you to go ahead and reload the things in the browser. So when I press Enter, you'll see that it already running a local server on port 3,000 and there's our index.html. Now if we didn't put the dash dash directory, I believe it will it would try to go right away to index.html. But since we could have multiple files here, I'll just leave it at that. And when we click index.html, you see it's right there, it's not working. Okay so in part three of this lecture, we're actually going to to go ahead and use BrowserSync and I'll demo to you how we're going to use it in this course. And we're also going to go through some basics of Git, and how to deploy to GitHub to host your website.
