Focus video player for keyboard shortcuts
Auto
- 720p
- 540p
- 360p
1.00x
cc
- 0.50x
- 0.75x
- 1.00x
- 1.25x
- 1.50x
- 1.75x
- 2.00x
We hope you enjoyed this lesson.
Cool lesson, huh? Share it with your friends
About this lesson
Set up the tools you need to use JavaScript.
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 JavaScript, you should set up a new development environment folder on your computer.
Instructions
Create a directory called javascript-course and add that folder to your sublime text.
Hints & tips
- Download Sublime Text from https://www.sublimetext.com/
- 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.