Setting Up a Development Environment

Quick reference

• 00:04 All right, welcome to Intro to JavaScript for Web Development.
• 00:07 My name is John Elder and I'll be your instructor today.
• 00:09 In this course,
• 00:09 I'm going to teach you everything you need to know to start programming with
• 00:12 JavaScript.
• 00:12 These days, JavaScript is just so important for web development.
• 00:15 And it's actually a lot of fun to do and pretty easy to learn.
• 00:17 So before we jump in and start learning how to set up our development environment,
• 00:21 I want to take just a minute to talk about what to expect from the course.
• 00:25 The course is basically split into two halves.
• 00:27 In the first half, we're going to learn computer programming basics,
• 00:30 just essential programming skills, things like variables, operators, strings,
• 00:33 and numbers.
• 00:34 Then we'll move into more intermediate programming concepts like arrays, objects,
• 00:38 functions, if/else statements, and loops.
• 00:40 In the second half of the course,
• 00:41 we're going to be looking at practical JavaScript for websites.
• 00:44 We'll learn about DOM methods and properties, how to manipulate HTML and
• 00:48 CSS programmatically, events and event listeners, and nodes.
• 00:51 And then we'll learn all about form validation.
• 00:53 We'll spend a couple of videos looking at JSON and jQuery.
• 00:55 And we'll finish up the course learning about Ajax.
• 00:58 After that, we're going to build a math flashcard app.
• 01:00 And it's just going to take all the things that we learned throughout the course and
• 01:03 kind of put it together and give us a fun little project to work on and
• 01:05 something for you to put in your portfolio when you're finished.
• 01:08 So that's pretty much the course.
• 01:09 I'm looking forward to it, it's going to be a lot of fun.
• 01:11 And so let's just dive right in and
• 01:12 start talking about setting up a development environment.
• 01:15 So throughout this course,
• 01:16 I'm going to be using this cloud development environment called C9.
• 01:19 It's what you see on the screen right here.
• 01:21 But unfortunately, since we filmed this course, Amazon.com bought this company and
• 01:25 has since shut it down, so you can't use this exact tool.
• 01:29 Luckily, with JavaScript, you don't really need any tools.
• 01:32 All you need is a text editor, something to write code in,
• 01:34 and a web browser to run the code.
• 01:36 So that's what we're going to set up in this video.
• 01:38 So head over to Google and type in Sublime Text.
• 01:42 Now there are tons of coding text editors out there.
• 01:45 The one I like to use is Sublime Text, so
• 01:47 that's what I suggest you use throughout this course.
• 01:50 And just head over to sublimetext.com, click this Download For Windows, or
• 01:53 they also have Mac or a Linux version if you're on a different computer.
• 01:56 And right now we're on Sublime Text 3 Build 3207.
• 02:00 If this number changes by the time you watch this video, no big deal at all,
• 02:03 just download the latest version.
• 02:05 And when you click on this it should download anywhere,
• 02:09 just download it to your desktop.
• 02:11 And as soon as it's done downloading, you can see down here it's downloading very
• 02:15 quickly, you can just click this right here or
• 02:17 navigate to wherever you saved it on your computer and run the installation program.
• 02:21 Now I'm not going to run the installation program because there's nothing really to
• 02:24 show, just follow the prompts and click Next until it finishes installing.
• 02:28 And then head over to your Windows Start menu,
• 02:31 or if you're on Mac or Linux, search for Sublime Text and then open it up.
• 02:35 And this is what you'll see.
• 02:37 I'm just going to very, very quickly paste in a little HTML code.
• 02:41 And we don't care about what this code is, we'll talk about this later on.
• 02:43 But this is just a very, very simple sort of template.
• 02:47 What you want to do is come up here to File > Save As.
• 02:51 And then navigate, you could save this anywhere you want but
• 02:54 I'm going to suggest you go to the C directory.
• 02:57 And then somewhere in here, just right-click and create a new folder.
• 03:01 I suggest you call it javascript-course.
• 03:06 And this is where we're going to keep all the files that we create throughout
• 03:09 this course.
• 03:09 So double-click so you're inside of that directory, and
• 03:13 then just save this as index.html.
• 03:15 And you can notice down here that type in HTML file it always ends in .html,
• 03:21 so index.html and save that.
• 03:23 So next we want to come up here to Project > Add Folder to Project.
• 03:30 And again, we just want to navigate to wherever that
• 03:33 C drive JavaScript directory we just created.
• 03:36 You don't want to double-click, just single click to highlight it, and
• 03:40 then just click Select Folder, and you can see, boom, it pops up here on the left.
• 03:43 And now this will have all of our files that we'll save throughout the course.
• 03:46 If we ever create a new file, we'll just come up here, right-click, and
• 03:50 then just create a new file.
• 03:51 You can see it pops up right here and
• 03:53 then you can save it as whatever you want to save it as.
• 03:57 So like I said, throughout this course, I'll be using C9, which looks like this.
• 04:01 Whenever I type something here in the text editor, whatever I type there,
• 04:06 you'll type in right here in Sublime in the text editor area there.
• 04:11 So that's really the only difference between the two, so
• 04:13 it should be pretty easy to follow along.
• 04:15 Now how do we actually run this in a web browser?
• 04:19 Very, very simple, just head over here and right-click, and
• 04:22 click Open Containing Folder.
• 04:25 And you can see, let me size this a bit,
• 04:28 it opens our Windows sort of file manager thing.
• 04:32 And here's the file right here, and
• 04:33 you can see there's a little Chrome web browser icon next to it.
• 04:37 I use Chrome web browser, if you use a different browser like Firefox or Safari,
• 04:41 or whatever, the icon for that will be next to it.
• 04:43 All you have to do is then just double-click this, this page pops up.
• 04:48 And you can see we're in the C:/javascript-course directory,
• 04:52 here's the name of the file, and here's the page, says Hello World.
• 04:56 Like I said, not a very sophisticated website,
• 04:58 you can see right here it just says Hello World and you're good to go.
• 05:01 So throughout this course, like I said, I'm going to be using the C9.
• 05:04 You should be able to follow along exactly, do exactly the same things I do
• 05:08 in C9, you'll just do it here in the Sublime Text.
• 05:11 And then whenever you want to run your file, just like we did just now,
• 05:15 open it in a web browser and it should absolutely work.
• 05:18 So in the next video,
• 05:19 we're going to look at where to use JavaScript on your HTML page.

Lesson notes are only available for subscribers.