Locked lesson.
About this lesson
What tools do you need to write CSS?
Exercise files
Download this lesson’s exercise file.
Setting Up a Development Environment.docx60 KB
Quick reference
Setting Up a Development Environment
In this video we'll set up our development environment.
When to use
Any time you create an app using CSS, you should set up a new development environment folder on your computer.
Instructions
Create a directory called css-course and add that folder to your Sublime text.
Add a style.css file.
Hints & tips
- Download Sublime Text from https://www.sublimetext.com/
- 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.