Introduction

[00:00:00]
>> WebDevSimplified: Welcome everyone. Thanks for coming. We're going to be doing a getting started with JavaScript workshop here, so really going all the way from the very beginning of what even is JavaScript and how do you get started with it, all the way to really being able to build out some applications with JavaScript and understand how it works. My name's Kyle. I run the WebDevSimplified YouTube channel, which is probably where you know me from if you've seen me before, but my whole teaching style is really about trying to simplify how things work.

[00:00:24]
So I'm going to try to take these complex topics, make them a little bit easier for you to understand. And before we even really get started, I actually want to say a huge congratulations to you for coming and actually watching this presentation. There's a million things you could be doing right now, but the fact that you decided I'm going to come and try to learn JavaScript really means that you're dedicated to actually improving and trying to learn web development, and that right there is already a hard step.

[00:00:46]
So just congratulations on that. That's impressive. Now we also have a few more things we need to talk about before we can even dive into learning JavaScript itself, and that is talking about how JavaScript is actually quite difficult to learn. Learning any programming language is tough. There's some that are easier, some that are harder, and JavaScript falls somewhere in the middle. I kind of want to talk about why this is difficult to learn so that you understand that as you go through this, by the end of this presentation, we're going to be covering a lot of stuff, but it doesn't mean you're going to be an expert in JavaScript to perfectly understand how things work.

[00:01:15]
You're still going to run into problems and that's perfectly OK. Now, a few reasons why JavaScript feels really hard to learn is that it's constantly changing. For example, the web is a very fast moving space and programming, it's one of the faster moving spaces out there. So there's tons of different ways to do things which can make it difficult to narrow down exactly what you need to do. Also, since web development is incredibly popular, there's a lot of information out there, whether it's on Frontend Masters, on YouTube, in blogs, in books, it doesn't matter.

[00:01:44]
There's just a million different people teaching you web development, so you can get a lot of conflicting news on maybe old ways of doing things versus new ways. So I'm going to try to hopefully set that straight and try to teach you the most modern way to do JavaScript so it's easier for you to follow along and know the actual correct way to learn JavaScript. Now the purpose of this workshop, like I said, it's going to help you understand JavaScript.

[00:02:03]
I want to be able to make it so you can actually write applications using JavaScript, debug different issues that come up because we're going to be talking about debugging at the very end of this workshop. And finally, I just want to build up your confidence so that you feel confident in actually building out applications on your own, because that's one of the hardest parts of getting started with learning any programming language is just feeling like you can actually do it.

[00:02:22]
So hopefully by the end of this you'll feel confident enough to build applications on your own. Now, obviously, this is a single workshop, I can't cover every single thing there is to know about JavaScript, so I'm really going to be focusing on more of these beginner concepts to help build up that confidence so you can build applications on your own. To get the most out of this particular workshop, the best thing you can do is to learn by doing.

[00:02:44]
That means instead of just watching what I'm talking about and seeing what I'm doing, instead you should try to actually follow along and practice yourself on various different exercises. If I start talking about something and you think, I wonder how this particular thing works. First, obviously you can ask me a question that's perfectly OK, but secondly, just try it yourself. If you wonder what happens if I change this variable to this variable name or something like that, try it in your own code editor and just see what happens.

[00:03:08]
That's pretty much the way everyone learns to program is just trying out different things and seeing what works. And in my opinion, that is the best thing you can do to learn to program. Now moving on again, I said it's really hard to learn JavaScript, so I don't want you to get discouraged. It's really easy for you to see people that look like they're professionals in this space and they're never making mistakes, but the reality is every single person makes mistakes when they're programming.

[00:03:31]
It's kind of the whole point of programming. It doesn't matter if it's me, if you're just getting started, if it's you, if it's a professional, your friend, every single person makes mistakes when it's programming, so it's perfectly OK to make mistakes. And when you make mistakes, don't think about it as you failing or not able to learn web development. Really, that's just you learning what does and does not work, so you can hopefully narrow it down and work towards what does work.

[00:03:53]
The entire process really of programming looks something along the lines of this. You have an idea of something you want to build. You write some code to build that in JavaScript in this case, and then you're going to run into different errors and bugs inside your code that you need to fix. You try it again, more errors, fix it, and you have this cycle that's just going to constantly repeat itself.

[00:04:09]
So just know when you write code and it doesn't work the first time, that's actually normal. Usually if I write code and it works the first time, I just assume I did something wrong because that never happened. It's literally impossible. Now to actually get started with JavaScript, we have a few tools we need to download. First one, hopefully you already have if you're watching this, is a web browser.

[00:04:26]
I would recommend using Google Chrome because that's what I'll be using throughout this workshop, and there's a few places that I'll reference it directly, but you can use any browser you want, whatever one you prefer, they're all pretty much going to work exactly the same. You also are going to need Node.js. Now we're not going to be using it much inside this workshop, but Node.js is just a way for you to download JavaScript and use it inside of a non-browser based environment.

[00:04:50]
So our browser, Google Chrome is where we can run our JavaScript for the browser, and Node.js is where we can run the code for non-browser environments. So if you just click on this link right here, that'll take you to a page to download Node.js. There's two versions you can download. There is the current version and the LTS or long-term support version. I would recommend downloading the current version just so you have the most up-to-date version of it.

[00:05:11]
The long term support version is much better for more enterprise production level software, but when you're just developing on your own, this current version is going to work just fine. The final thing you need is some form of text editor to actually write the code you're going to be using. I highly, highly recommend Visual Studio Code, also called VS Code. This is the editor that pretty much everyone in web development uses.

[00:05:32]
There's other alternatives, for example, WebStorm or Cursor that you could be using if you prefer, but VS Code is what I'm going to be using in this workshop, and it's pretty much industry standard that most companies, the developers in that company, are going to be using Visual Studio Code or something very similar to it. So I'd recommend that you have these 3 tools installed because that's going to make it so you can follow along with this entire workshop all the way through.

[00:05:56]
Now there's a few extensions that would be really useful to install inside of Visual Studio Code, and the very first one is called Live Server. The whole purpose of this Live Server extension is it takes essentially the entirety of what you do inside your web page, and every single time you make a change to your code, it'll automatically refresh your page for you. So to install this Live Server extension, there's two different ways.

[00:06:17]
First of all, if you're on this exact page that I'm on, you can copy this command right here and inside VS Code, hit Control P, paste that in, and it'll install it automatically for you, or you can use the extensions manually. So if we go over to Visual Studio Code, that's what I have on the left hand side of my screen here, we'll make it a little bit larger so it's easier to see. And if you click on this button that looks like these boxes, this is the extensions button where you can search for different extensions that you want to install and work with.

[00:06:41]
Now if I were to just search for Prettier. Mine is already currently installed, but this first one that is by the Prettier company with a check mark next to it, it's going to have a ton of installs, currently 60 million. All you want to do is right here where mine says disable. Yours will say install. Just click that button and that'll install Prettier into your VS Code, and this is going to help you with making sure all your code automatically formats itself.

[00:07:01]
Now also, we're going to want Live Server. Which is the one I was talking about. So we're going to come in here with Live Server. It's the exact same process. You're going to want this one by Ritwick Dey. It again has about 60 million different downloads. Click the install button right here, and that's going to be the two extensions that you're going to want to have 100% when you're doing JavaScript development.

[00:07:20]
I can't pretty much do any development without these two different extensions. Now, the purpose of Live Server, like I said, is to refresh your page automatically for you. So all you need to do is to create an HTML page. If you click this button in the top left-hand corner, this will create a new file. I would recommend calling it index.html just like that. I already have this file created. And what you want to do when you're inside this file, you'll have nothing to start with.

[00:07:43]
Just type in the exclamation point keyword and click tab or enter, and that'll give you all this boilerplate code for you that is essentially just a boilerplate HTML setting that you can use. Now I'll go back to mine that I had because it has a little bit of extra CSS styles added, but now when you're inside this file, you can write in some code inside of here and of course when we save this, nothing happens.

[00:08:01]
So we want to open that up with Live Server. To do that over on this HTML page right here, right click it, and you can click this Open with Live Server button. What that's going to do is it's going to open up your web browser and it's going to render out that code as you can see here. Now I already have this open up on my side, so I'll just refresh this page and you can see right here is that text inside the page.

[00:08:22]
And now that we have Live Server running, as soon as I change this text, for example, I change it to say Hello World. And I click save, you can see it automatically updates on the right hand side with that text. So anytime I change my code in my HTML or if I change code in other places in my project that are being referenced, it'll refresh that code for me, which is really nice because manually refreshing the page every time is a bit of a pain.

[00:08:43]
So it will save you from having to do that every single time. Now if we move on a little ways, I kind of jumped ahead as I talked about Prettier. Prettier is a way to automatically format your code for you. It's kind of the exact same thing we already showed you how to install that as an actual extension. But the interesting thing to understand about JavaScript is it doesn't really matter how you format your code.

[00:09:02]
These two sections of code are technically exactly the same thing. They both work exactly the same inside JavaScript, but the difference is that this top one. It's really ugly to look at and I don't really know what's going on, while this bottom one is much easier to understand what's going on. What Prettier does is every time that you save your code, it's going to take this really ugly looking code and it's going to format it into a proper looking piece of code, so it's much easier to work with.

[00:09:22]
So I already showed you how to install Prettier, but there's a few configurations you're going to want to make after you get it installed. First of all, you're going to want to open up your settings and you're going to want to copy these settings into whatever file you're using. So I'm just going to copy over these settings. We're going to move over into VS Code. The easiest way to open up your settings is holding down Control or Command if you're on a Mac, and clicking comma, that'll open up your settings directly.

[00:09:44]
And then what you want to do is you want to go into this section right here, which is the JSON button. So on the top right corner you can see Open Settings in JSON, and now you can see all the different settings I have enabled. Yours will probably be completely empty if you just installed VS Code, but all you need to do is inside of your curly brackets, what you're going to want to do is go to the very bottom of where your settings are and paste those two settings in.

[00:10:05]
Just make sure if there are already settings in there, you add a comma to the very last one, and then it'll add in these two settings. The first one right here just makes it so that Prettier is the formatter that you use for your code. So whenever you try to format your code, it'll use Prettier. The second makes it so that every time that you save your code inside of your editor, it'll use that formatter to format it for you.

[00:10:23]
Now these are showing with yellow squigglies because in mine I already have this set up since I use Prettier for all my different projects. So I'm going to remove those but leave those in there for you because, you know, you don't have that in there already. So now if we show you what that looks like real quick, I'm going to come over here. I'm going to copy that really ugly piece of code over. This is just some JavaScript code.

[00:10:42]
Technically it works, but it's really ugly to look at. So as soon as I save my file, you'll notice my code automatically formats itself to look the correct way. You can see it's much easier to work with. And if I were to come back here and add some extra stuff in here and click save, and again, it'll just format itself perfectly, so I highly recommend using Prettier because it makes it easier to write code since you don't have to worry about formatting and Live Server is great because it'll automatically refresh your page for any time that you make a different change.

[00:11:05]
And that's pretty much all the different tools that we need to have installed for this project to work. So now we can actually dive into the whole point of this workshop, which is understanding JavaScript, and to do that we need to understand what JavaScript is.