 Welcome to Sailor Academy's Introduction to JavaScript, this is of course PRDV401. If you're just joining us now, make sure you go over to Sailor Academy and take the course. You can find the links in the description below and if you have any questions as you're watching this there, you can leave your questions in the comment section or in the chat and we'll try and get to them if you have any questions about what's going on here. But I will just hand this over to our great instructor to introduce herself and I will get out of the way unless I'm needed later. Hi, I'm Susan Hoyt and I'm being instructor today for PRDV401, Introduction to JavaScript. This is a new course that has just come out so we're excited to introduce it. I'll tell you really quick something about me. I am here in Houston, Texas where the Astros just won the World Series so life is fun here. I've been a computer science educator for 25 years. I have been with Sailor for one year. I love teaching coding. I think it's a great opportunity for people to see something that they may not have ever had a chance to see and it opens a lot of opportunities for them. I do love to hang out with my dogs and read some books even though they might be on my iPad, I still like to read a book and I do like to hang out at the beach. So that's enough about me. Let's start talking about the course. So this course is a first in a series of three courses that will cover the JavaScript language. There's going to be six units in this course. Unit one will be HTML and CSS Pre-Rec overview. You may not need to take that. We'll talk about that in a minute. Unit two is going to be Introduction to JavaScript. Unit three has values, variables and statements. Unit four will be our conditional statements and control flow. Unit five will be the basics of functions. Unit six, the objects, the DOM and best practices. We're going to start today with unit one, HTML and CSS Pre-Rec overview. So what are the Pre-Recs? Well, unit one will help you if you don't have all the Pre-Recs but you still may need to go back and do some more HTML and CSS if you don't know it at all. It's not intended to be the full course. If you've never, ever looked at HTML, you've never looked at CSS, I would suggest you go do another course first before you come here and do this. This is more like a review, like, hey, in case you don't remember, this is how you do this. It will cover the HTML structure, headings, elements, tags and attributes. And CSS will cover the colors, the font size and the backgrounds. If you're comfortable with all that stuff, then you can totally skip this section because you're like, I already know it all. I don't need to do this. If you're not familiar, go ahead and do this. Or if you haven't done it in a while, go ahead and do this section. Wait, it can be fresh in your mind as you're going through all this other stuff. How does this course work? Well, once you register for this course, you're going to see it on your dashboard. And once you see it on your dashboard, on the left, you'll pick what unit you're working on and it'll show up in the main window to the right. OK, so then I'm going to show you really quickly what that looks like. Well, let me go back. Sorry. So here I am on my dashboard. I have already signed up for this course. So I went to courses and I found it and I signed up for PRDV 401. So as I do it, I click on it and notice it shows up over here and it tells me which unit and you see that there are six units over here. It tells me how long it would take me to take this course. And it tells me that as I complete this course, if I meet the conditions, I will get a free certificate. All right, whenever I'm over here, I'm going to pick unit one because that's where we're going to start. And as I come here, it will tell me that completing this unit should take me about three hours. So if I can't devote that three hours to this time right now, then I can work on it and come back. There's no time limit that I have to complete it all of three hours at once. And it may take you four or five hours. It may take you one hour. It's OK. This is just an estimate or guideline. It doesn't mean that's how long it should take. As you get here, if you click on this part right here, it will make your screen bigger so that you can see things. And as you see right here, what we're going to do is we're going to be talking about unit one. And so we're going to go through all of these little sections here and I'm going to tell you how it works and kind of give you an overview of what is covered in those. And at the end, we'll talk about the assessment because you want to take the assessments. They don't count towards your grade, but they are what is going to help you prepare for that final exam so that you can get your certificate. All right, so let me head back over here. All right, so now we have registered and we are now at unit one and we're ready to work. One big thing to remember is as you finish a unit, you always want to mark it as completed because you wanted to know that you completed every unit as you've gone through. So you will see that, which I will show you again when I go into there, but you'll see the mark is completed after each little section. How do you get that free certificate? Well, after you've completed every section in the course, then you take the final exam. The final exam has to be. Met with a score of 70 or above, it will be calculated as soon as you complete it. So once you are done, you hit submit. It tells you what your score was. If you didn't earn a 70 that first time, you can retake it and you can continue to retake until you do get that 70. But just remember, there's a seven day waiting period between each time. Once you do pass with that 70 or higher, then you will get your free course certificate and we'll talk about the actual exam in a later video after we get to all the units. All right, so what are we going to try to complete in unit one? Completing this unit should take you about three hours. Again, I said, don't say, oh, my gosh, it took me four hours. I did really bad. No, that's fine. And if you took you one hour, you can be like, wow, I really knew that stuff since it is kind of a review. That's OK, too. After you finish this unit, you should be able to identify types of HTML five tags and attributes in a document. Explain how CSS is used in HTML five. Illustrate the use of CSS rules and create a simple web page using HTML and CSS. So notice, I didn't say anything about doing JavaScript at this point. We're just doing the HTML and CSS. Oops. So what is HTML? Well, it's a markup language. It will have text and tags. There are four HTML tags that are considered standard for all web pages. These tags are HTML, head, title and body. This template right here is really handy to have and keep because if you're going to design another page, you're going to do something. You can just copy paste this, throw that in there and then change it around and add whatever you need to add. Notice that any time I have a HTML, I also have a closing tag for that HTML. For head, I also have a close for that. For title, I also have a closing for that and on body. So each one of these tags, there is a close. So opening one and closing one. That's very important. So in our contents that we're going to do in this is we're going to talk HTML. Then the text tags and attributes, standard tags, document structure tags and a simple web page that you will make. And then a quick check. Once you go through all that part of the checks or I'm sorry, all this part of this unit, then you will mark it as completed and then you'll next go to the next section, which is HTML text fundamentals. So give me one second to show you this navigation real fast. So here I am and I was at this course and I started it. So I want to go to my HTML basics, so I'm going to come here. And as I get here, I see a table of contents over here that tells me where I'm at right now and where I'm headed. And then I have a quick check at the end. As I go through here, it gives me this heading, which will follow me as you watch whenever I click that heading is still there. However, my content down here is changing. So this is where I want to be looking at stuff and reading it and trying any examples they may give me so that I can try it and try to learn it. So as I click through, I will click through. I will find examples that they have here, things they want to do. And I can go next page down here or I can go next page up here. And if I'm like, OK, I don't even know where I'm at. I got lost. I can always jump here down at the bottom and get back to where I think I might need to be. OK. OK. So let's me look at my list here. What I wanted to do next. Sorry. Arts here. OK. So that was our table of contents that we looked at and it was on the right side. So now we're at the text fundamentals. So whenever we come here and we get to this practice, they go through and it does an introduction. It talks about your basics on your headings and your paragraphs. And it talks about lists. The lists are hugely important and they have some great examples in here that you can use to do your list. I highly, highly recommend that any time they give you these examples that you work through them. The cool thing about it is that you have these live examples and live output as you're working through the course. And so I'm going to show you one of those real fast. And let's see. I have the little link here. Give me one second. OK, so if you see down here as you come through this, here's an active learning section right here. So if you notice right here, our active learning is a really cool part where we have live output. So right here, we have some editable code. So if I'm here and I go, oh, my gosh, I have absolutely no idea what they're asking me to do. I don't have any clue. I can show the actual solution and it will show me what I should have known. And so I go, oh, gosh, I really now I understand what they needed. So I can reset it and after I reset it, then I can try it again myself. And then if I'm still struggling, I could do a show solution again. So I can go back and forth between these, which is really helpful as I'm trying to learn through all this stuff. And then I have a second one of those live ones to show you real fast. Okay. And this is where we're getting into the list, which are very important and very helpful. So as you notice, they're giving you these examples are showing you how to do list. Then they tell you, hey, make up your own list here and let's go ahead and do it. So again, we have another live output with some editable editable code from like I was saying, edible, edible code. So when you are here again, you went, oh, gosh, I don't remember what to do. Well, if you want to try it first, come up here, look at the examples and see if you can type that in here and make it work. Again, if you can't show the solution, see what they did and then go, oh, that's almost the same example that was up here. OK, let me try myself now and then you can redo it. OK. So then after we leave the list, then we go into files. Now, whenever we get into files and naming and trying to organize for our web pages and stuff, it's super important that we listen to this stuff. We've gotten spoiled by Microsoft and how we can name stuff and put spaces in between and give it all kinds of weird stuff in it. We don't want to do that here. So we're going to look through as we're going through these sections. And we're going to say, how should I name my folders? Well, everything should be named, good names, and we'll see what they're saying. Why do I need an index dot html file? That's a huge question that you need to have answered. What is the purpose of a file path? You need to know what a file path is and what it means and why you need to know where to find stuff. I, as a high school teacher, have found that file paths blow some of my students away who can do all kinds of stuff on their phones. They just don't understand where the file path happens. So that's really important to pay attention there. And why should file names be written without spaces and with words separated by hyphens? Another thing on conventions and how you should name stuff coming from, again, a high school teacher who has seen crazy, crazy names and stuff and students can lose their files all over. This section is really, really important in all aspects. All right. So if you notice here, they will go through. And oops, sorry, keep hitting my thing. It will go through and it will tell you how to set up a folder. And it will say set up your folder like this. It will have you put your index.html file in there. It will have you make a folder for your images. That way they're all in there together. It'll have a folder for your scripts and a folder for your styles. And as you go through and follow the course there, it will have you set this up. I can't suggest enough times that you make sure that you posit if you need to take a break and get your stuff set up like this because you really, really need to follow it and understand how this all works together. Once you have that done, they start to talk about some examples in action. So that's our next section after we get through all the file stuff. Examples in action are huge. They are an expert going through talking a lot of times just typing out the code and showing you something they're creating using the stuff that you are learning. This one example in action is someone who it's about 15 minutes long, which seems long. But if you're working on your own computer doing the same exact kind of stuff he's doing on his, it's not boring to watch through it all because he's showing you exactly what to do. So instead of just watching the video, you should be watching it while you're doing hands-on. Pause it when you need to take a chance. Oh, let me go set this up. Oh, wait, I didn't understand that. Rewind it. Go back and look. So in this, he talks about some different editors that you can use to do your HTML. He talks about Adam using notepad and brackets. There are so many out there. There's tons. And you do not have to simply use these because he's using them. If you have some editor that you always like to use, just use that but still follow what he does and make sure that you are trying to create the web pages he is creating so that you can make sure you understand the content. That is my house. Okay. So as you go through, you'll see the video and he has his screen up like this. And you literally watch him create this document to show you exactly what each part means. Notice he's got his HTML. He's got his head. He's got his clothes for his head. He's got his title, clothes for his title. He's got his body, his clothes for his body. And it goes through all those steps that you should have just seen from going through the other two parts of this unit. And it is super helpful. This is him using Adam. And so he's in his index.html here. And so you'll see that he's got a whole set up like yours. Your folder where you may have all your website stuff may be named different than his. But you definitely want to follow along. Do it at the same time. I can't suggest that enough times. So then after you go through his, which is at least 15 minutes, if not longer, I would suggest it being as long as you need to make sure that you get everything done. Then it will go into a practice review. The practice review will follow the steps and you'll create a webpage that will have a document header. So this is almost the exact thing you just watched him do, except now you're going to do it on your own. You're going to have a document header, an image tag, some heading tags. You're going to do a list and you're going to have a link in your website. So after you're starting to do this and you're working through it, then let me show you this real fast. Oops, let me get that link. Okay. And as you go through, it has told you we have gone through this whole section now. We're in the finished webpage. We've gone through everything here. And so it says, try the practice exercise to see how well you understood this unit. And so we started way back over here and we did what they said. So we are coming over here and we're making our webpage and we think we have finished. So I should have a webpage that ends up looking like this at the end. And I'm so excited because I'm ready to look at mine and mine doesn't look right. Mine looks funky. I don't know what happened. My picture isn't showing up, which is a common thing that happens, is that that that link to that picture isn't set up right. Your file path messed up or something like that. So that's something that could happen. So it says right here, if you get stuck, you can compare your work with our example code. So you can click on that. And if you go over here, here's all the code. And so you can compare it to yours or you can actually copy it, put it over there and look at it. But either way, you have the whole answer here. So don't panic as you're going through this. If you're like, I don't know what I did wrong. I have no idea. There's always answers. There's always something here to help you. So you can make sure that you're on the right path. All right. So then after we finish our HTML, then we want to go into CSS. Now remember, this is kind of a review. So it's not really, really specific, but it should like refresh you if you kind of know this stuff already. And CSS is our cascading style sheets. It's our language to specify how the HTML documents are presented to users. The fonts, the colors, everything that makes it look nice and makes us want to look at that website and enjoy it. CSS will define the way a page looks separate from your HTML. So CSS is just kind of an enhancer. It makes it look better. You will learn about three types. You have the inline CSS where you're using that style attribute inside your elements, embedded in internal CSS using the style and a head tag, and external CSS using that link tag to an external CSS file. All of these are covered in there. So as you go through it, it will talk through each thing, and you definitely, again, want to work through every example and try it on your own. So what else could we do if we had HTML paired up with CSS? Well, we can make animations happen. We can change our backgrounds. We can add borders to where things look nice around our webpage. The colors, because everybody knows, nobody just wants to look at a black and white webpage. Images. Images definitely grasp our attention. We look at them longer. Tables, because you really have to have stuff organized. I can't stand when I look at a webpage and I can't figure out how something goes from top-bottom, left-bribe, what is it? And text, and so much more. So CSS is huge for making things look great. So here's just an example of HTML with CSS. If I wanted the main heading on my page to be red text, then I can change it into some red, okay? So this is the kind of things you'll be doing in the CSS unit. And let's see, hold on. Whoops, sorry, one, two, four, sorry. Okay, so CSS. Boom, we've gone through it all. We've learned how to make our webpage look nice, how to make it attractive, how many people want to stay on it. So now we're ready for our practice assessment. The practice assessment is great because it helps prepare you for that final exam. So you always want to make sure you try your best on these practice assessments because you want to be able to go back and look at them again. And I'll show you, we'll kind of look at it here in a second. But each unit will obtain questions. So in this one, it's one through nine that are a mixture of drag and drop. Fill in the blank. Matching, multiple choice and tree falls. So you get all kinds of different questions that you can look at here. Question 10 is going to be the one I really want to show you how it's set up because it actually has a live coding box. And the coding box will use HTML and CSS. Although you will see that there's a place that we could put JavaScript, we won't use that this time. So to prepare for this assessment, the quick check at the end of the units will help you. This assessment will not count towards your grade. It's only for practice. So let's see what it kind of looks like before I take you over there. So here is Code Runner and how it looks. It has HTML section up here. It has a CSS section here. And it has a JS for JavaScript section down here. Your page will show up right down here. So whenever you do it and put your code in here, it will show it down here. You can always reset it to where it's backward started. If you wrote some ridiculous code and you're like, okay, that didn't work at all. I'll just reset it. So let's go over and look really fast at this. What? Where am I? Hold on. Hold on. Let's close that. And I want to go back. So I'm going to go to sections. I could go all the way to the top. But I'm going to go to unit one because that's where I'm going. And as I have gone through here, I've gone through everything. I've marked it all completed. So now I also finished this and I marked everything completed. So now here's where I'm at. I'm at the assessment. Again, it says it doesn't count towards your grade. Once you submit your answers, you will see the correct ones. Use that to help you study for the final exam because it's not just the answers. It explains why they are. And you can take it as much as you want anytime you want. So if I open it up and I actually had an attempt a minute ago, so let's go ahead and continue my attempt again. And I want to go to the previous page first. And as I look through here, this is where it would show up for you. I'll do start a new preview. Let's do that. That way you don't see my other stuff. So I'll start off. It says drag and drop. I will drag and drop things. I will fill in the blank kind of things, but it gives me some stuff to do. I'll do a little bit of matching. Of course, we got to have a multiple choice. Some true or false. And then some little short answer that you write stuff. And then another thing where you write, hey, what is the value of this? And then another one where you're writing stuff. So then once I go through all those, I will go to the next page. And now it tells me I'm going to develop a simple HTML page. It tells me exactly here what I'm going to do with it. And then it tells me right here how to complete it. So if you notice, it says use the HTML pane to enter your HTML code. So you see my HTML pane here. I've already got a little bit of code in here for you, but you're going to be adding to it. So if I need more room, I will come over here and I can drag it down so that I can see my code better. And if I'm done with it and I want to close it up, I can do that. Now down here is my JavaScript. And if you notice up here, watch, it says this exercise doesn't contain JavaScript code. So that means you should not be putting anything down here in JavaScript. And so let's say I just accidentally wrote something in there. I don't know. I just wrote something. And I went to check it. Well, first of all, I messed up because it didn't pass any of the stuff. And so it's like, I don't know what you're doing. So I'm going to just reset my answer. Oh, did you reset? I thought let's do show differences. Let's start an preview. Let's just do that real fast. Okay. So let's go back to the chat. All right. So that was me checking it and resetting it. Now, I'm going to be using the HTML and I'll be using the CSS. When I am done and I check it, I will have my stuff show up down here. Now, if I check it right now again, it's going to say, hello, you didn't do anything. So if I asked it to show the differences, it'll say you basically did nothing. So it won't show me any answers yet. So I have got to at least attempt and try to do some stuff. Now, when I finish, I just click finish attempt and it's told me, hey, you haven't done anything, but I'll go ahead and submit. And then I can check my answers. I can go through. I can review it. I can start a new preview, which is always good to do and make sure that I understand everything. The biggest thing you want to remember in Code Runner is that all of your code will go in here and you can move it however you might need to move it. So that you can check it. And then JavaScript can say little because on this one, we're not using it. Later on in the course, you will be putting things in the JavaScript and your page will always show up down here. So let me go back here and I'll show you. Once you get it to work and you have the correct code in and it will show your page down here and it will say, hey, you did it right. Good job. You'll get expected match and that you got the match and you are good. They'll give you all your little green checks and then you'll be perfect. Now, you can always go back, try it again. Make sure you understand it. You can take that test as many times as you want, reset it, do it again. It's great practice. And Code Runner is a great little editor that you can put all your stuff in, run it, see your code. Without having to keep going to your computer. So it's a great thing to have. All right. Summary of this course. It's one in a series of three courses. So this is the very first course that you would take. You can earn a free certificate. There are the, that you have to have a 70 on that final exam. So the course will have the six units and that final exam, but you have to make that 70 on that final exam to get that free certificate. The time for each unit is an estimate. They will not be timing you to make sure you spent that much time. You can take less time or more time. Just take your time and make sure you're understanding it. Another big thing that Sailor would appreciate is that you take the time to do that course feedback survey. Tell us what you liked, what you didn't like. Hey, these, these live coding sessions were great. Hey, the video was okay. I didn't really like it or any kind of feedback like that that we could take and make the course better for later on. And that is it. That is it for our introduction to JavaScript one. That's our quick go through the course. And now I hope you decide to take it and I hope you sign up for it because it's a great course and I'm so glad we're offering it. I can't hear you. You might, I was going to say, don't give feedback that you didn't like the videos, but maybe do now. But again, thank you. Thank you for taking us through that. Thank you everyone for watching the video. We'll have more of these coming in this series. Again, you can check down in the description below, for a link to the course. If you haven't started the course yet now, you can get on board and catch up with us. And if you have any questions, feel free to leave them in the comments below. But again, thank you everyone for joining us and watching the video. Thank you. Thank you.