Setting up a Development Environment

Quick reference

• 00:04 In this video, I want to talk about setting up a development environment and
• 00:08 getting all the tools that we need in order to write CSS and HTML code.
• 00:12 So throughout this course, I'm going to be using a tool called Cloud9, C9.
• 00:16 And it's a cloud development tool.
• 00:18 Now, since we recorded this course, Amazon.com has bought Cloud9 and
• 00:21 has since shut it down.
• 00:23 So you won't be able to follow along and use the same tool.
• 00:26 Fortunately, CSS and
• 00:27 HTML don't really require any special tools in order to use them.
• 00:31 You really just need a coding text editor.
• 00:33 And that's what we're going to download and set up in this video.
• 00:36 So there are tons of coding text editors out there.
• 00:40 And if you have one that you already like and use and
• 00:42 know how to use, absolutely feel free to use that throughout this course.
• 00:45 If you don't have one that you already use, I'm going to suggest Sublime Text.
• 00:49 It's at sublimetext.com.
• 00:51 And this is one of the most popular coding text editors, it's completely free.
• 00:55 There's a version for Windows, Linux, Mac, any kind of computer you have.
• 00:59 You can use this, and it's really cool.
• 01:00 So we're on Sublime Text 3, and it says here, Build 3207.
• 01:05 If these numbers change by the time you watch this video, no big deal.
• 01:08 Just go ahead and download the latest version.
• 01:10 I'm going to come over here and click this DOWNLOAD FOR WINDOWS button.
• 01:13 And you can save this anywhere you want, I'm just going to save it on my desktop.
• 01:18 And you can see it pops up right here.
• 01:20 Go ahead and click it to run the installation wizard.
• 01:22 And just go ahead and click the Next button and then the Install button.
• 01:26 Now, I've already installed it on my computer, so
• 01:28 I don't need to install it again.
• 01:29 So I'm just going to go ahead and click Cancel.
• 01:31 You'll go ahead and click Install and continue on with the installation.
• 01:35 So once its installed, you can go to your Windows Start menu and type in sublime or
• 01:39 Sublime Text and that will pop right up.
• 01:42 Go ahead and click it, and this is what you'll see.
• 01:44 I'm just going to paste in some dummy text here.
• 01:46 We don't really care what this code is.
• 01:48 We'll get into all this much later.
• 01:49 We just need something in the file to save it.
• 01:52 So now come up here to File and click Save As.
• 01:55 Now, we want to navigate down to our C drive.
• 01:59 And we could save this anywhere we want.
• 02:00 But we want to set up a folder to hold all of the files that we're going to be
• 02:03 creating throughout this course.
• 02:05 So anywhere in here, just right-click and click on New and then Folder.
• 02:10 And let's name this CSS-course.
• 02:12 We can call this anything we want, but it's a CSS course.
• 02:15 So we'll go ahead and name it that.
• 02:17 So then double-click here.
• 02:19 And then inside of here just type in index.html.
• 02:22 That's what we're going to name this file.
• 02:23 And you can see it pops up right here.
• 02:26 So next we want to go over to Project and then Add Folder to Project.
• 02:30 And same deal, we just want to navigate to our C drive and
• 02:33 find that folder we just created.
• 02:34 Here it is.
• 02:35 Don't double-click it and go into it, just single-click it and highlight it.
• 02:39 Then come down here and click this Select Folder button.
• 02:42 And you can see, boom, it pops right up and we're good to go.
• 02:45 In the future, if you want to add more files to this directory,
• 02:48 just right-click here and click on New File.
• 02:51 And then you can see it pops right up.
• 02:52 We go to File, and then Save As, and we're going to need a style.css file.
• 02:58 So we'll just name it that right now.
• 03:00 And you can see, boom, it pops right up here.
• 03:02 So we can close any of these files.
• 03:04 If we want to open them again, we just click them right here, they pop right up.
• 03:08 So it's very, very cool.
• 03:10 You'll notice in the next video, when I start to use Cloud9,
• 03:13 that the Cloud9 screen looks very similar to this screen.
• 03:16 It has on the left-hand side here a list of all our files, on the right-hand side
• 03:21 here, the actual text editor where I'll be writing, typing in code.
• 03:25 You'll type in the code right here on your screen.
• 03:29 In fact, very quickly,
• 03:30 we can actually take a look at my Cloud9 development environment, and this is it.
• 03:34 And you can see it looks very similar to the Sublime Text.
• 03:37 We have files I'll be using on the left the text editor stuff on the right.
• 03:42 The only real difference is this little terminal down here, but
• 03:45 we won't really be using that terminal.
• 03:47 So we can just ignore that.
• 03:49 If you look at Sublime Text,
• 03:50 we have the files on the left text editor on the right.
• 03:53 And the font and colors are different, but it is basically the same.
• 03:57 So when I type something in the videos right here,
• 04:04 You will type the exact same thing in your Sublime Text right here.
• 04:09 The only real difference is to run the project,
• 04:12 I'll click this little run project button at Cloud9.
• 04:15 And it'll pop up in the web browser.
• 04:17 You don't have to do that.
• 04:18 To run your code, all you have to do is, come over here and
• 04:21 right-click on the file, and then click this Open Containing Folder.
• 04:25 And when you do, this little box will pop up.
• 04:28 And you can see, we're inside that CSS-course directory.
• 04:33 And you see this index file right here, and next to it has a little Chrome icon.
• 04:37 That's the web browser I use.
• 04:39 If you use a different web browser like Firefox or if you're on a Linux or Mac and
• 04:43 you use Safari or anything else at all, the icon for it will appear next to it.
• 04:48 So doesn't matter what browser you use.
• 04:50 Just go ahead and double-click this, and when you do, boom, it pops right up.
• 04:54 And you can see up here in the address bar it says we're in C/css.course,
• 04:58 that's that directory we created.
• 05:00 And then here's the file index.html.
• 05:02 And this is our web page, it just says Hello World.
• 05:05 This is not a very sophisticated web page just yet it's just this right here.
• 05:10 But it's just that easy to run your file, run your project in your own web browser.
• 05:14 Very, very cool, the only other difference between this and the Cloud9 is from time
• 05:19 to time in the future in the course, we'll need to work with images.
• 05:23 And in order to save an image here, same deal.
• 05:26 You just right-click > Open Containing Folder, and
• 05:30 then just paste the image into this screen right here.
• 05:33 And it'll pop up in this list, and then you can access it in the same way that I
• 05:37 do throughout the course using Cloud9.
• 05:40 So that's really all there is to creating a development environment for
• 05:44 CSS and HTML.
• 05:45 Very simple, just this one basic free tool.
• 05:48 Like I said, if you have another text editor that you already like and use,
• 05:51 feel free to use that throughout this course, really doesn't matter whatsoever.
• 05:55 So in the next video, we'll move on and start to look at CSS syntax.

Lesson notes are only available for subscribers.