 Hi, everyone. Welcome to the course. I hope that you're able to find it okay. I'm hoping some of you have started the course. If you have it, just remember it's PRDB 401 Introduction to JavaScript 1. And it would take you approximately 17 hours to finish this. And we are going to start talking about this next section. First, who am I? I'm Susan Hoyt. I live here in Houston, Texas. I have been in computer science education for about 25 years now. I've been with Sailor for about a year. I love coding. I love to teach coding. I just think it opens up a whole new world to people who haven't had a chance and don't really understand what it is, and it seems so cryptic to them. So it's a it's a joy to teach new people what I love. I do love hanging out with my dogs, reading a great book, and sitting in a chair in the sand at a beach. Those are my things. All right. So this is the first in a series of three courses that are going to cover JavaScript. There's six units in the course. Unit one is HTML and CSS pre-reps. We did that last week. It is in the archive, so you can watch that if you haven't watched it or you haven't done that. And you don't have a lot of HTML and CSS background. Then I highly suggest that you go ahead and do that before starting this unit two. And unit two, it's going to be just the general introduction to JavaScript without going into too much specifics. Unit three does the values, variable statements. Four is conditionals, control flow. Unit five, we hit functions. And then unit six, we hit objects, the DOM, and some best practices. So let's start today with our intro to JavaScript. What did we cover last week? Well, things we talked about in case you missed it and haven't seen it yet. We did discuss certification for this course. How you're going to get it, how would you work through it? So once you work through all the units, then you would take the final exam and you will get your results instantly when you do it. But whenever you do it, you need to make a 70-yard above. If you don't make a 70-yard above, then you have to wait a week and you can retake it again and keep doing that until you do pass the course. Every unit has some end of unit tests that don't count towards your grade, but will help you prepare for this. We also discussed using CodeRunner, which is part of our courses, which I'll show you some of that again today. In CSS, what did we talk about? We just talked about how the style sheet was used and did a few examples and things like that. In HTML, we talked about the different tags. We also talked about files and how you need to know where your files are stored, where things are happening so you can arrange them and make them look nice. If you aren't confident with skills on any of those things I just talked about, again, please do Unit 1 before you try to start this unit too. All right, so this unit starts with a brief history of JavaScript. Then next, we're going to cover how JavaScript works with HTML and CSS, sorry, and the options for writing, editing, and debugging some JavaScript code. Completing this unit should take you about three hours. Again, like I said last week, if it takes you more than three or less than three, that's fine. This is a complete approximate on how long it would take you. Once you finish this unit, you should be able to identify basic elements of JavaScript, how they're used, explain JavaScript in HTML, and understand how to debug and validate your code, identify the tools to write your JavaScript programs, and be able to create a simple webpage using all three of these. All right, so where did JavaScript start? JavaScript started way longer than you probably remember in 1990. 1990, they started to create it so that it could get rid of C++. Well, we both know that C++ is still around and so is JavaScript. So this kind of goes through just a brief history, tells you about it, that 1990 is when it started. It's still here today. It's dominating server side and it's, the Java is server side, I'm sorry, my fault, and JavaScript itself dominates this client side. So it's a great thing to learn. All right, so when you're looking at JavaScript, a lot of me as a teacher have seen my students whenever they're like, oh, I went and found tutorials and we'll be learning Java and they'll find tutorials for JavaScript and they're very close, they are, but they're not exactly the same. So we've got things, oops, I'm sorry, I went backwards. Okay, so we have our primitive types, they're all the kind of same on both, but whenever we get into some of these things, there'll be some different quirky things between JavaScript and Java. So if you know Java, keep that in mind whenever we're going to start doing some JavaScript. So in our unit called what is JavaScript, we're going to talk about, again, what's a high level definition? What is JavaScript? What, what is it going to do? How is it going to help me? It goes through all these different things here, which I'm not going to go through each one of them with you right now. We'll talk about a few of these. And then if you take the course, you get every single one of these, because I'm just doing a quick highlight of them all. All right, so a big overview, and this is what you'll see a lot in this course as we're doing stuff is that we're going to have HTML, we're going to have our CSS, and then we're also going to have our JavaScript. So we're going to have all three of those working together. Again, from last week, HTML was our market language that we used it, and we structured and gave meaning to our web content. So we defined our paragraphs, we defined our headings, lists, tables, all those kind of things. CSS just helped us look nice. So it helped give us some background colors, some fonts, and just made everything look better. JavaScript is going to be our language that enables us to create dynamically updating content. So it's not static, it's not just sitting there. And it will actually update as soon as we change it. It will help you control your multimedia, animate objects, animate images, pretty much everything else. Okay, how do all three work together? Well, let's do a quick example. So let me head over here and let me get my link. Hold on. All right, so this is where we were just looking right now. And if you come down here, you'll see that we have our three layers building on top of each other. So we've got this right here, which is our HTML. We have something down here, which looks like we're making colors and making stuff look nice. So that's going to be our CSS. Then down here, we have our actual JavaScripts. This is our coding down here. So if I click on this, notice it asked me to enter a new name. So I'm going to enter my name. And if I enter my name and say, okay, do you see that my button just switched? So dynamically, I entered something, it changed it. Okay. Now, whenever you look up here, player one was Chris is how I started it, but then down here, I said, let's get a new name. And so I update the name by doing that. So I could change it again. I could change it back to Chris if I wanted. And it'll change it right back. So this is just all three of these working together. And you're going to see that as we go through things. All right, let me go back. All right. So server side versus client side. Client side code is code that's run on your user's computer. So when a web page is viewed, the pages client side code is downloaded. Then it's run and displayed by the browser. In this module, we are explicitly talking about the client side JavaScript. Server side code, on the other hand, is run on the server, then its results are downloaded and displayed in the browser. So examples of some of that that's very popular are PHP, Python, Ruby, ASP.net, and even JavaScript. JavaScript can be used as a server side language, for example, in the popular Node.js environment. As a JavaScript developer, you'll need tools to enter your program code. A text editor is your simplest way to enter code. The IDE will simplify and speed up your development by checking your syntax, your running, your debugging code, and put those all in together. And then we have an online one that is nice for, let's say you're on a tablet or you're on a Chromebook. Maybe you had to borrow one like we give them out to students who might need a Chromebook. And so if they use the Chromebook, they can't download anything on it. So I send them to, and I did that again. I'm sorry. I send them to Replet. So we're going to look at a couple of these. So I'm going to get started and I'm going to show you Komodo. And you notice I put on there that if you go, easy to do. I don't want Komodo Dragon. I want Komodo IDE. Thank you. All right. So if I come here, notice it's got it. I can download it. I want to be able to install it, make it great. This is a great thing to have. I did put that caution because I was going to install it on here to show you, but I'm on a Mac and I have this OS so I did not install it because I didn't want to see what kind of problems are going to occur. Okay. Then we also said that you could go to NetBeans. You can try that. A text editor that I have downloaded is Sublime. And let me just show you what it looks like. So here's my, and you notice I've got stuff in here. I've got some heading stuff here, right there. And then I've got all kinds of things in here. And you notice it makes it look nice for you, but it's just that it's just a text editor. So I may not want to just have that. So what I may decide is that I want to try this replete. So let me go to replete real fast and show you what that looks like. It is actually one of my favorite things to use for everything. So here's replete. I do already have an account because I told you, I, so if I go create, and as I create, notice I've used Java and Python lately, but I can also have a template of HTML, CSS, and JavaScript. So this is great. Now in replete, if you don't change the title here, they give you really funny names. And I don't hear because I'm just going to keep that name right now. And so now if I come here, we have a second, it goes ahead and it throws everything in here. Now notice this is my index HTML file. Here's my JavaScript file. Notice I don't have anything in the actual JavaScript file right now. And here's my CSS. Okay. So if I go back here, you do know that I have a script right here that it says I'm going to run a script. All right. And it tells me where to find it. All right. And then I have something else down here. We're going to learn and we're going to talk about what those things mean. But let's just run this for a second. So I run it and hello world shows up here. So you see a hello world here. And you're like, okay, that's great. Now, if I take it here, and I tell it to open in a new tab, I get the full thing where I have hello world. And you see down here where I have this button called made with red. Okay. So back here. And I change it. Did you see this one? That it's blue. I could even come back over here and I could decide I really hate blue. So I'm going to turn it to green like my sweater. So green. And so I could run it again. And now that one's still blue because I haven't refreshed. But if I refresh it, it's what? Green because I made it green. And so I can even change stuff that's in here. My hello world, I could turn it into hello there. Then again, if I come over here and I refresh, I'm still green, but that's going to say hello there now. So I like it. I totally can use replete for everything. So if you haven't tried something and you need something to try to do your work in, it's a really great IDE to use. Well, it's not really IDE. Sorry. It's an online editor. But those are those examples. Let me get my slideshow going again and make sure I said everything I wanted to say. Yep. Okay. So moving on from that. You saw something that looked like this when I did that. And so I am linking an external script when you see me do this. We are not going to do that so much in this course because our scripts are going to be very short. So we're not going to do this. Is this a great idea to do? Yes, it is. Because then you could keep all of your stuff organized. You could keep all of your scripts together, all of your CSS stuff together, and you could have it nice and organized. Again, our scripts and things are going to be so small to start out with that we're just going to go ahead and we're just going to put them inside here. So ours are going to be inside the HTML. You'll see the beginning header script and you'll see the ending script. And we'll use stuff like that. And this one, they are using an event listener. And they also have console log. So they're using both of those things. Again, you're going to see this use more so with us. All right. So you're getting ready to do all this JavaScript and you're ready to write your stuff and you're ready to become like the JavaScript person. Always remember that there might be some people out there that still don't have JavaScript. So whenever you're doing that, you want to make sure because nothing's more frustrated than when you have a website that you can't see or something because of whatever reason. So always have a plan B for people that don't have JavaScript. At a minimum, always have a short message that says to use this site, please enable JavaScript. You may have seen that it doesn't happen as much now as it used to, but it used to happen a lot. So that would be something that you could put in there. Also, anything you're doing in JavaScript, you should try to replicate it with HTML. Someone without JavaScript sees the same thing everyone else does. So try not to write inaccessible scripts. It's very frustrating for everyone. All right. So as you're going through the course, you'll see examples and actions. And let me show you where this is. So let me give back to the course. And here I am with the course. And we did the JavaScript overview. We just talked about this. There's even some more listed down here that you can use that you can check into. And then we come down here and we go example and action. And so when you get to the example and actions, you always want to run it. Let me get it here. And it's usually a nice video. And as I go through the video, I'm going to watch it. So let's talk about how you actually get JavaScript to work on a web page. And as I'm doing that, I'm going to have my replete or whatever. Also, I've decided I want to use. And I'm going to work through the example that she's doing at the same time she is. So that way I get the most out of it without just sitting here watching a video. I really need to do the hands on at the same time to make sure I'm getting everything out of it. So my god, back. Okay. A second way to add it to the web page was what I just showed you for the external file. This one is getting it from another file called my program JS. Again, you're not going to see us doing that much in here, but she does talk about it and cover that in there too. Holy cow. Sorry. I wasn't a little crazy on that one. Okay. So adding JavaScript to a web page. Okay, we're going to do a quick, quick, quick practice run. That was hard to say. To make sure the editor is working. All right. So we have the JavaScript and CSS all contained with the HTML file in this example. We're going to go to this JS.do online editor. So I'm going to show you this. Let me get back over here. Now we were just in the example in action. So you see where I am here. I can go back here or if I forgot where I was totally, I can go all the way back up to the top. So I'm just going to go back here because I know where I'm at. And I want to do this little practice run right here. I want to make sure that I kind of know what's going on that I can kind of make things work. So any kind of practice run they have, make sure you do it. So first JavaScript program. All right. So I'm going to use the JS. Everybody see that? I got a link on it right here. So when I click on that, it pops up. Okay. Well, that's good. So what does it say to do? Select the create new code button. Whoops. Where is creating a code right there? All right. Once I do create new code, it says copy and paste the following into the editor window. All right. So I got it in there. Great. So if I hit run, I've got a hello world showing up over here. And when I do this, I've got the webpage coming up over here. So that's kind of cool. And the really cool thing is that the color is f22. I have no idea that that's red. So what if I tried to change it to green here? All right. Let's see what happens. My hello world is still there. I didn't change anything with that. But hey, that changed to green. And so when I'm doing this, I'm doing some CSS to make it look nice over here. And then if I'm looking over here, my first job example, that's a title of it. The alert is saying hello world. And what if I decided just to say hi there? Now if I run it again, now it's going to say hi there. That's my alert coming from my script. Have I seen my script right there? So that's coming from my script. And then over here, that's my, this is my webpage, but this over here is helping me. So what if I decided I want to make it 30, let's do 20, so I can make sure we know it. And what if we try changing this to blue? Okay. Okay. It still says hi there because I left that like that. Did you see my font got smaller? And it turned blue. So that's great. That's a good thing to do. And then let's see. I'm making sure I got everything. And then I'm going to show you on Replet what happens if I take this over there. So let's say you were like, I don't want to use theirs. I'm not in the mood. So you go to Replet and let's close you. And in Replet here, I'm going to close everything. I'm going to act like we're starting all over again. And I'm going to close that too. All right. All right. So I'm going to create again. I'm going to do my this. All right. So what if I take all that stuff and I throw it right here? Well, I want to get rid of all this first, right? All right. So let's run it and see what happens. Okay. The alert looks a little different because it's coming from here, but I still see hi there because that's what I copied. Now I copied the blue and the 20 pixels. So if you notice, my blue and my 20 pixels showed up. So whatever I did over here, I can also do over in Replet and it'll be just fine. So I can still change it here. And this just means if you enjoy one editor over others, then just change it and put stuff that we're asking you to do over here. You can work in Replet and then copy stuff back over into the course, whatever works best for you. All right. All right. So now we want to talk about DevTools and let's make sure I'm on the right one and I am. Okay. All right. So DevTools will help us debug. So it can help us step line by line through things. It can help us do a whole bunch of stuff just to help us figure out what's going on with our code without having to do a whole bunch of console stuff and trying to basically print out our own ideas and try to see what the variables are doing and what's happening. So DevTools will be great. And there's a video. And with this video, he goes through more tools than I'm going to show you right now. But I'm going to quickly show you a really fast demo to kind of just show you what you could do with it. So let me get the example here. And it's a great video. He's very easy to follow and it's very easy to do everything that he has done. All right. So and I'm using his same example. That way you have a reference if you go back and you work on the course now. All right. So let's say I put in number five here and number one here. So now if I want to add number one and number two, that should be six, right? So when I do it, it actually says it's 51. So you're probably already thinking, okay, I have an idea what's wrong. But I'm not sure. So, hey, let's go here. So watch. You go to these three dots here. And you go here to more tools. For more tools, I'm going to go to the developer tools. And yes, you can do the shortcuts. But since I'm on a Mac, I didn't want to say what the shortcut was. So that'll get you there every time. So great. Here we are. And you can see there's a whole bunch of stuff in here. So if I go over to this get started, this is my JavaScript. You can see that. And I had a break point set those off. All right. So if you look on here, we can kind of look at the coding. And we can kind of see that we have two numbers being added together, right? And when they're added together, we know that that sum is not correct. So we're thinking there's probably something wrong happening here where we're adding these together. So one thing we can do is we can set a break point. And if we set that break point, we can also watch stuff. We can do event listener break points. We can do a whole bunch of different things here so that we can see what's going on. So I've got a break point set here. So as I've got it done, if I try to run this again, it stops there. Everybody see that? And it says it's paused in the debugger. So then I can come over here and I can look right here. And I immediately because I know I want to add numbers and I see quotes around these. And I go, well, quotes are strings. And I really don't want it to do concatenating a string. So something's wrong there. So some things I can do to check is besides looking at some more things, make some more break points is I can come down to my console here and let's say I type in add in one. It has access to all these. It shows me that five is not a number. So if I did, whoop, I think capital P, sorry, parse it. And if I do parse it and notice it brings this up for me, I did not type that. Add in one plus parse and add in two. That's six looks like a number rather than a string. So that looks like definitely what I would want to do. Looks great. So then I could take this now and I can copy it over here and I can put it right where it needed to be, which is right here. And now I could fix that and I could take off my and I would have to do what before everything happens. I need to save it. So once you have it and you figure out what was wrong and you did this, you need to save it. So therefore it'll update and it'll fix everything. Okay. Let's go back. All right. So again, he'll go through the DevTools and when he's going through it, he will show you where did I go? He will show you some of these over here. He'll show you some event listener breakpoints that you can get to. He also, I think, shows just a few more things. He sets a watch and has a few other breakpoints and it's just really nice to watch. It's a great demo. I highly suggest it. I want to say it's only like seven minutes. So it's really, really good to watch. All right. Back on track. Okay. So what's a linter? Okay. A linter is a program that analyzes your code but it doesn't execute it. Linters will look for syntax errors and then fix the code. It's known as static code analysis. The main goal of using a linter is to increase the quality and consistency of your JavaScript program. So when we're talking about these, in my mind, I always think about if I'm working in Java and I hit compile first and it finds a syntax errors for me, things it's like, this doesn't match up. So that's what I kind of compare these linters to if you have used those. So JS Lint and JS Hint, I both have up here. JS Hint is the newer version of JS Lint and it does have a huge video where it talks about all this. But let me just show you really here real fast. So we're going to start with JS Hint. I just threw something in here that asked them to do the area of a triangle. And so notice here, these are the warnings I got when I pasted it in here. All I did was go here to jshint.com. Let me show you how it looks before the, and so you just get rid of this and you put your code in there. And then once you have your code in there, all this comes up over here. And it tells you warnings. So this is only warnings, except notice this one. What does that say? Missing a semicolon. Okay. So I'm missing a semicolon and it tells me at two. So at two, I'm going to put a semicolon. Okay. So did I get rid of it? No, I believe it's something and I'm sorry. Let's try that again. Let's go here and let's do a semicolon. Sorry about that. All right. There's a semicolon. Now notice that semicolon came off of here. Now what if I did something like I messed up and I put a space here? You see all this stuff came up really quickly here because now it's really confused. It says I need a semicolon. It doesn't know about the identifier, but notice it's all pointing to line five. So we can go look at line five and be like, okay, I really messed up this line somehow. What's wrong? And so I can put that back together. Now what if I just misspelled it and forgot to make that one big? Okay. So did it catch that? Let's see. So I said height value instead of height with a v. Sure did. As it said, height value is undefined and it said height value with a capital v is unused. So immediately I can say, oh, I see what I did wrong and I can do that. So that's why something like this linter is great for you to use and it's really helpful. Now JS lint is even more extreme. It will tell you everything about everything. So as we put the same stuff in, it's got the stuff down here and it tells me what's going on. So if I had the missing semicolon and I put it in there now, I have to lint it again, unlike the other one. And let's see what it says. Well, it got me a thing. It was a little easier to find, I guess, to know that I put that space in there. So if I come over here and I fix that space, and you saw that too, it kind of tells me something's weird there. So then I can lint it again. And this is especially helpful. Say you're doing it in a text editor. If you're doing it in a text editor, then you don't have anybody checking your syntax errors. So this is a great tool to help you do that. And if you notice over here, it will tell me some warnings too. Hey, you're supposed to use double quotes, not single quotes. And it tells me, oh, you didn't declare console, you need to do something with that. So it totally helps me figure out what maybe I messed up on, what I didn't do exactly right. So as you are going through the course, if you are using that text editor, this might be a great thing to happen. And in a minute, whenever we go back to replet, I'll show you if replet can help you, or if you're going to have to go from replet to the linter. Okay. What are we doing here? There we go. All right. So this is just from the example that he actually gives in the video. And so I just, I didn't take his example because it was just more coding than I wanted to have in there for y'all. But it just shows exactly what's going on and what exactly they'll show. All right. So then there's an example in action again. And I told you that, yes, you should always watch these. Now, this one could be one where you're like, I'm not going to use sublime. So I don't really want to install JS hint in there. So if you are using sublime, I highly, highly suggest that you do this so that you can install it. It's only about five minutes long. It is done on a Mac, but it's easy to see how to do it on a Windows machine if you have to. All right. So now let's see where we are in the course. Let's go over here and look. So I am in unit two. I have quickly taken you through a whole bunch of stuff. We did our JavaScript overview. We got started to figure out what kind of IDE are we going to use, or are we just going to use a text editor or just some kind of online one. We talked about how we were going to add JavaScript to our web page. We did an example in action. We did a practice one. We talked about our debugging. And then this example in action tells us how to install and use it in sublime. So if you're not going to do that, that is one you could skip. Now where are we at? We're at the assessment. So if I get to the assessment, okay, continue my attempt. I'm going to go ahead and say that. And it's going to take me back to where I was. I'm going to start in preview. That way everything's new. Now whenever I do that, if things mess up, I can do shift refresh. And that will make everything that may have gotten a little weird or like doesn't look exactly right. That will fix all that. So notice our quiz navigation. We've got 10 things we're going to do. So I'm going to say start in preview again. All right. I'm good. Everything's refreshed. Notice we have all different kinds of questions in here. You have fill in the blank. You've got matching. You've got multiple choice, true, false. Then after you finish those eight, we go to our next page. And now we're going to do some code runner. So if you notice here, we've got our HTML with our CSS with our JavaScript. Now where else have we just seen that? Right here, if you notice, we've got our index, our CSS, and our JavaScript. So you can actually have that over here too. I'm going to go ahead and get rid of these linters because I'm not going to use those right now. And I'm going to get rid of that. All right. So here I am at this assessment. So I always want to read it because on this one, it says in this exercise, you're going to create a webpage that has CSS external selectors. We're going to do the body, the font color, and the size. And then JavaScript in the head element to display an alert box containing the words, hello, welcome to JavaScript, white for the font color, blue for the background. Please use the HTML code for your HTML. CSS for your CSS, use double quotes. Notice what this one says. Don't put anything in the JS code. This is the example of what everything should look like. Okay. It tells you stuff too. So you should read it. Your JavaScript should be placed in the head tag and use an alert message that says, welcome to JavaScript one. And down here, it reminds you to do shift and reload if you should have a problem with this page. All right. So let's say that I just want to check my answer. I haven't done anything. Have I? No. So if I check my answer, it tells me you failed. Okay. Because you didn't do anything. So whenever I failed, everything still seems to work. Right. I can still move these like I need to if I need them bigger because I need to see the coding. I can move them. I shouldn't have to move the JS bigger because he doesn't have anything. All right. So let me get over here and let me grab my code that I want to use. Sorry, I must grab the wrong one. Give me one second to grab it. Okay. So now when I'm getting the alerts, it'll always come up like that. That's why if you noticed up here, it said, right, this code first for your CSS just because you're going to see that alert all the time whenever we do it. And so let me get my CSS here. I totally didn't copy everything I wanted to go. So hold on. I get all this time. Yes, I did. Okay. Now let's go to CSS and my CSS. All right. So I'm going to check it again. Now I got the weird thing. Everybody see how it looks weird right now? So what I'm going to do is I'm going to do shift and I'm going to do refresh. Now everything should look better again. So all my stuff looks better. And you notice is telling me, Hey, you've got all kinds of errors. So I'm going through and I've got a whole bunch of weird stuff happening here. So I'm going to reset my answer because I don't know what the heck happened. Again, it did this. That's fine. I just go shift and it reset it. I still have all my junk in here. I just get rid of it. And again, I'm going to have all of these alerts every time I've got the alert in here. So you have to bear with me on that. All right. So I totally was like, I don't get this. I have no idea. So I go to the next page and try my next one. Will it let me? Yes. Now I can go on totally to my next page. I can come back to that one. Maybe I decided I want to try this first and see if I can get this done and then come back to it. So as I'm coming here, it's going to tell me that I'm actually going to use JS Paying this time. So I'm going to be filling all three of them up. So I'm going to try to fill all three up correctly and see if I can do this. So let's try it. I will go to my HTML and then I'm going to go to my body here. I'm still having issues where I have copied stuff. And then I come down here and I get my script. And I throw it down there. So I think I'm good to go. Hey, my alert works. That's great. So I go and I'm like, okay, let me check it again. And I can look down here and I can see, okay, something isn't looking right. It's not working. So where do I have? I am a paragraph. If I change this here, oops, sorry, you got to deal with all the alert. Hold on. Every time you do something, you see every time I erase something, my alert is going to come up. So sometimes you might decide, I might just go ahead and comment out that alert and do something like that. And then that way, as I am trying to do this and try to figure out what the heck I did wrong, okay, it still didn't work. And I still had that weird thing, but that's okay. All right, just do that again. And it has reset for me. Now, do you see that my text did change down here? So I do know that I'm doing something right here, but I'm still messing up. And I'm like, I don't even know what to do. I'm completely lost. So let's say I finished my attempt. I've just given up. I have just given up, and I'm going to submit it and finish. So I submitted and finished, and guess what? I did not make the grade I needed. It only took me seven minutes, which wasn't very long. But I didn't make it. I got a zero out of 10. So I can go back. I can review my stuff. I can start a new preview. And then that will start me over. And then I can go ahead and start again. And all the errors I had with my code, I might need to go back. I might need to go back and be like, okay, wait, I was having trouble with an HTML thing. Oh my gosh, that's not here. So then I might decide, hey, I need to go back here. And I need to look at my HTML that I didn't do because I thought I really knew it well. And I probably need to go back and check something here because I didn't do something right. So you can always go back to previous stuff, look at it, and come back to your worst. That way you get it right. Let me get back here. All right. So questions one through nine. Oops, on this one, it's one through eight. So that's my bad on this one. One through eight are the mixture of all those. And then on this one, nine and 10 are the live coding box. So you notice when you change stuff, you'll immediately see it. If you don't like coding in the code runner, because you're like, I don't know that feels weird. I'm used to replete now that I've done it, you can take all that code and put it in replete and then copy it back and bring it back over there and it'll work just fine. So here it is, again, code runner will have your HTML, your CSS, and it'll have your JavaScript down here. Here, I drag it, I can make it bigger and smaller so that I can see everything down here. Same thing here. So you'll see all three panes. You can resize them and you can reset your answer at any time. Notice when I reset my answer, if it did that really weird or everything looks kind of weird, that's a shift refresh and then it will show up again. And then once you do enter the correct code, which I did not give you the exact correct code, you'll see an indicator that will say, yes, you did it, you got everything right. So this is what you will see whenever you actually do get all the code right. All right. So summary, this is a course that's just one of three short courses where you can earn your free certificate. It has six units and a final exam. The time for each unit is estimate only you can take less or more time. You can go back and do a unit if you're like, you know, I don't feel really confident on that. I should go back and redo that. Go back and redo it. Do it as many times as you think you need so that you feel comfortable with it. And please, if you do take the entire course, please make sure and do the course feedback survey so that way sailor can do something, make the course even better, add some things that you think might even make it cooler or whatever we might need to do. Next week, we'll be talking about unit three. Unit three is going to be more JavaScript. It's going to be, hey, how do I do a variable? How do I do operator? What are the key words in JavaScript? How do I use values and data types? Operators, statements, right? Simple statements. So we'll be doing a lot more coding that is just JavaScript coding. If you notice today, you're still kind of working with HTML and CSS and not so much JavaScript so far. But next week, we'll start at the same time, 11, 22 at 530 Eastern. I'm central, so it's 430 for me. But we'll start again and I will try to cover unit three and hopefully get you more excited about taking the course. So remember, sign up for the course if you haven't already. Go check it out and get your free certificate.