Setting up a Development Environment

Quick reference

• 00:04 Okay, in order to start coding HTML, you need a development environment,
• 00:08 some place to actually write the code.
• 00:10 Now, fortunately, HTML is really, really simple.
• 00:13 And you don't need a lot of tools, or really any tools at all.
• 00:17 All you really need is a coding text editor, somewhere to write code.
• 00:20 And we already sort of looked at the Sublime Text.
• 00:23 That's the tool I recommend that you use throughout this course.
• 00:26 And in this video, we're going to download and set it up so
• 00:29 that we can start using it.
• 00:31 So head over to sublimetext.com.
• 00:33 And this is available for a Windows, Mac, or Linux, or whatever computer you have,
• 00:37 you can use this.
• 00:38 And we're on version 3 right now, build 3207.
• 00:40 If those numbers have changed by the time you watch this video, no big deal.
• 00:45 Just download the latest version.
• 00:46 So head over here to the Download For Windows button, and go ahead and click it.
• 00:50 You can save this anywhere on your computer.
• 00:52 I'm just going to save it to my Desktop.
• 00:54 And you can see it downloads right here.
• 00:56 When it finishes downloading, go ahead and click this.
• 00:58 And this will run the installation wizard.
• 01:00 And so it's really just one screen here.
• 01:03 You click this Next button, and then go ahead and click this Install button.
• 01:06 Now, I'm not going to do that, I've already installed it on my computer.
• 01:08 But you go ahead and click that.
• 01:10 I'll go ahead and cancel.
• 01:11 To run this, just go to your Windows Start menu and type in Sublime.
• 01:15 It'll pop right up.
• 01:16 Click on it, and then this will appear.
• 01:18 So we have this dummy text in here right now.
• 01:21 And we don't really care what this code does.
• 01:23 We'll look at this going forward in the course.
• 01:26 But for now, we just want to go up here to File and click Save As.
• 01:30 And then navigate to your C Drive here, and can save this anywhere you want.
• 01:35 But I'm going to go ahead and
• 01:37 create a directory where we can save all of the code,
• 01:39 all of the files that we're going to be creating throughout this course.
• 01:42 So just right-click and click New > Folder.
• 01:46 And let's call this basic-html.
• 01:48 You can really name it anything you want.
• 01:51 But this is a basic HTML course, so we'll go ahead name it that.
• 01:54 And then just double-click to go inside of that folder.
• 01:57 And now we want to name this index.html.
• 02:01 HTML files always end in .html.
• 02:04 So then, next, we want to come up here to the Project button and
• 02:07 click this Add Folder to Project.
• 02:09 And same deal, we just want to navigate to our C drive, and then find that directory,
• 02:13 that folder we just created which is basic-html.
• 02:16 And then double-click it, and then click Select Folder.
• 02:20 And you can see, boom, it pops right up here and here's our file.
• 02:23 So if we close this and we want to open it again, then we just click on it.
• 02:27 If we want to add new files in the future, we just come over here and right-click,
• 02:31 and create New File.
• 02:33 There it is.
• 02:34 And then we just save it as anything we want.
• 02:37 Now we can call this index2.html if we want.
• 02:40 And you can see, boom, it pops up right here.
• 02:43 If we want to get rid of this file in the future, we can just right-click and
• 02:47 delete it.
• 02:48 And it disappears, very cool.
• 02:50 Now, in order to run this file, it's actually really easy.
• 02:53 And this is what you'll do throughout the course whenever you want to run a file.
• 02:57 Just come over here and right-click, and click this Open Containing Folder button.
• 03:00 And you get this box that pops up.
• 03:02 And you can see we're inside this basic-html folder, and
• 03:05 then here's our file.
• 03:06 And you can see this little Chrome icon next to it.
• 03:09 Now, I use the Chrome Web browser.
• 03:11 If you use some other Web browser like Firefox, or Safari, or
• 03:14 whatever, the little icon for it will appear right there.
• 03:17 So just double-click this.
• 03:20 And then, boom, it pops right up in your Web browser.
• 03:21 And you can see here's our HTML file.
• 03:23 And if you look up here on the address bar,
• 03:26 you can see we're in this basic-html directory.
• 03:29 And then here's the name of the file.
• 03:31 So going forward throughout the course,
• 03:32 those are the main tools that you're going to need.
• 03:33 I'm actually going to be using something a little different.
• 03:36 I'm going to be using this thing called Cloud9.
• 03:39 This is an online development environment.
• 03:41 Basically, it has the text editor and
• 03:43 some other things up in the cloud that you can run in a Web browser.
• 03:47 Now, since we recorded this course, Amazon.com has bought this company and
• 03:52 has since shut it down.
• 03:53 So you can't use this same tool.
• 03:55 But this is the tool that I'm going to be using.
• 03:56 But you should be able to follow along using Sublime Text.
• 03:59 This is the exact same thing here.
• 04:00 This is the text editor, versus now this right here in Sublime.
• 04:06 Here on the left is all of our files,
• 04:08 versus here on the left will be all of our files.
• 04:12 This terminal down here, we won't use for most of the course.
• 04:15 I'll talk about it later on when we actually do use it.
• 04:17 And we'll download a little tool that you can use on your computer that acts
• 04:20 in the exact same way.
• 04:21 But that's not for many, many videos.
• 04:23 So we'll talk about that much later.
• 04:25 So just whenever I type something here, all you have to do is then type it
• 04:30 here in your Sublime Text, and you should be good to go.
• 04:34 So those are all the tools we're going to need.
• 04:35 In the next video, we'll start to learn basic HTML concepts.

Lesson notes are only available for subscribers.