Complete Beginner to JavaScript Developer Series | Martin Kenny | Skillshare

Complete Beginner to JavaScript Developer Series

Martin Kenny, Author of "Malibu Code: Learn HTML, CSS and JavaSc

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (33m)
    • 1. 1

      6:39
    • 2. 1

      6:13
    • 3. 1

      3:01
    • 4. 1

      6:58
    • 5. 1

      5:32
    • 6. 1

      4:42

About This Class

This course has been designed as a step by step guide for the complete beginner to web development that has never done it before.

In this course we will start with some of the most basic elements of what happens when you click a link in a browser. From there we will continue through HTML building the foundation that will serve us throughout our journey into JavaScript and beyond.

In CSS, we learn the importance of taking ownership of a project and the powerful feeling that comes from being able to make changes to a website based on your knowledge and taste. This is the section of the course where we redefine what a successful web development career looks like and the importance of involvement and commitment.

JavaScript is where we let our foot off the gas and turn everything up a notch. With the core skills we have learned from HTML and CSS we can start to build dynamic and interactive websites that allow us to show more- or less of our personality or make a statement about what we do. So if you're ready to step up to the higher opportunity and better challenge, join me on this journey into JavaScript.

Let's get coding and have some fun!

7a18ee9b

Transcripts

1. 1: welcome. And this is going to be your crash course for JavaScript. Now, for a lot of you guys were coming into JavaScript with different outcomes. You're looking for different things out of JavaScript. I know. For some of you, you're interested in JavaScript. It's kind of Ah, hot topic. Right now, it's something that a lot of people want to learn. So whether you're someone who's just interested in learning about JavaScript, maybe you have a little a bit of knowledge. There's things you'll pick up here as well that you may not have known, or you're someone who is looking to get a job or go into a new career and kind of make a career pivot. This is the course that's going to allow you to make those changes and to help you to come at Java script from the right place. And there's so many different ways to tackle JavaScript. But what this course is gonna allow you to do with something that you can go through again and again. So really, wherever you're coming out from two Javascript, rather where we're coming from, you're going to get a new angle here, and it's gonna help you to put JavaScript really into perspective and help you to really understand some of the finer points of JavaScript in how you can really get yourself on the fast track to figuring out JavaScript as soon as possible. So JavaScript is very interesting, and there's a lot of either in society or the mainstream. There's a couple of misconceptions that people have about JavaScript. They think that it's the end. All be all they think, that it's the Onley programming language that you need to know, and it'll fix all your problems. It's it allow you to do everything you need, and that's true. And it's also not true. So in some ways it's very true that JavaScript is a very dynamic tool, and it's gonna help you to achieve a lot of results. And without it, Ah, lot of things are impossible, especially when you take a look at the way that the world is changing the way that the Internet is affecting the world. JavaScript in many in many ways conceive as be seen as a cornerstone toe those kinds of things, and it definitely is important wherever you're going to go in program in or any really avenue or field. You decide to take this in this. Whatever your next step is going to be. It's important toe have JavaScript toe lay a really solid foundation, and that's one of those principles were going to come to again and again throughout this course about laying a really solid foundation for your job script knowledge. So ah, lot of people they want to learn as fast as possible, and sometimes you can find interesting ways to cut your learning curve. But there aren't really any shortcuts. At the end of the day, when you're learning JavaScript, you can speed up that process. But it starts with building a really solid foundation, and that really comes back to that metaphor of having a car. So if you have an old beat up car can get you toe point a to point B. But once you try to get on the freeway, it's very difficult. Now. If you have a NASCAR Formula One racing car, you can go 0 100 like that, and it's nothing, so that's very similar to what this course is going to allow you to do. It's gonna let you go from 0 to 100 very quickly and that all starts with a solid foundation. Now, if you've done some studying of HTML and CSS, and if you have a night, encourage you to go back and do a little bit of studying, because when we talk about the foundational aspects, it's very difficulty them many times to start talking about Java script. If you haven't looked into CSS, if you haven't even started with some very practical HTML, because all of these things really build off each other. But when we talk about HTML, we talk about that being the body. So if you think of ah ah person, you think of them having a body and they were probably wearing some kind of clothing. Hopefully and then they have their behavior. So the behavior of a person. So that's how we think about JavaScript. JavaScript is the behavior. It's not the skeleton. It's not like the bare bones, and it's also not the style or the appearance. It's the behavior. It's really the mannerisms, the gestures, those things on that on that level. So that's how we like to think about JavaScript as being the behavior. So how does this really what's the application to this when I'm creating my website? Or I want to create some specific change to my personal blogger, whatever the case may be, well, it's something like a button that when you hover over it, there's going to be some effect that takes place. Maybe it gets highlighted or kind of pops off the screen a little bit, So that's what we mean when we talk about behavior. It's specific transformations that you're making in the code that are gonna change the way that that code has really the page and how it behaves. So the way that the person is sitting down and looking at your website of your blog's or whatever the case may be, there's some behavior aspect. Were the client and, you know, decline is the person who is using the computer. They're taking some action, and the browser can respond. So JavaScript is what allows the brass or to respond in a specific way. So we're going to talk more about all of those things. So this course is really going to be aimed at people who have never done any work with Javascript before, So you've never done any JavaScript you haven't worked with Java script. It's not even necessary in. This court's for, you know, have a lot of background knowledge about HTML and CSS, although that would be helpful. So that's going to give you a very basic idea of what Javascript is because very often people think that JavaScript is that end all be all, and it's the, you know, one ring to rule them all. It's the magic pill, but very often JavaScript is something that is like a layer cake where it's kind of the last layer. So that's really what Java script is. And in this course, we're going to get down to the nitty gritty. The brass tacks, all of those things that you need to know so you can start implementing JavaScript right away. 2. 1: so right here, we're gonna kind of peg these different front end programming languages. You could call them against each other and start to look at just some very basic similarities and differences. So if you haven't done any studying of HTML, this will be a very helpful section for you because it's going to allow you to get some background information on H two male. So again, we talked about that metaphor of hte emails. The body. It's kind of the skeleton, the bare bones where a CSS is that style. It's piercings, tattoos, clothing, something that gives style to that picture. Now JavaScript is the behavior. It's how the gestures, the mannerisms, how a person reacts or behaves in different situations. That's really the best metaphor for how JavaScript really works in a really useful way to look at it. H. Two males. The what again? So it's the body. It tells your browser how Web Page is going to look so you could think of it. Well, we're asking the browser these different questions, or rather, it's asking us. And the browser wants to know what what's the structure? What's the what? What is the structure that's holding all of this together, and that's what's going to determine what your website ultimately looks like. So HTML is so important because again it builds that foundation. It's the what it's the bare bones, the structure that you need to get going again. The other difference between these two is that JavaScript is interpreted by your browser. I talked about how JavaScript, when it's rendered in the browser when it's activated through the code, is that and we're going to talk about how all these things play out when it's when it's activated in the code The Java script. The browser needs to understand what specifically that job script is telling it to do. And that's why, in Web development again, one of these running themes that we're going to find is that you always have to be so explicit and so very clear and specific in whatever instructions that you give the browser whenever you're writing code, because you could be just a hair off, and that could throw everything out of whack. So again, JavaScript is interpreted by the browser because you're laying down directions for a specific behavior that's going to be put into effect when someone hovers over a button when someone clicks on, something in a pops up. So that's what it means when it says JavaScript is interpreted by the browser. Now, each to Mel again is purely presentational. It's not dynamic like JavaScript is because in HTML, nothing is changing your just kind of laying down. You're you're laying down the blueprint. Okay, this is the structure for this house, The house being the website that you're creating. You're saying this is the blueprint? This is kind of the nuts and bolts. This is the foyer. This is the living room. Whereas in javascript or saying Okay, well, this is the part of the house that is going to change. So maybe this is a lighting scheme so fits for Christmas or for Hanukkah or whatever the holiday being, you're going to set up some light. So that's dynamic. It's changing. So H two males purely presentation again. It's those bare bones. There's nothing really stylistic in anyway, because that's all in the CSS. Nothing behavioral, their dynamic because that always handled by javascript. You can see how these things really layer on top of one another to create a really rich user experience. No in this kind of intruder. HTML and I mentioned a little bit earlier this idea of the client in the server. So the client and the server very briefly is just the interaction. What's happening between these two computers? So whenever you sit down to a computer and you're on a website, will you have to imagine? Well, how does that website get to me? And it's very simple. It's just another computer that's kind of sending a ah feed. It's a feedback loop where your computer, the client is sending some information, really a request to another server, another big computer. That is kind of this warehouse storing all of this data and information and it's saying, will send me back this website and then it accepts or rejects the request based on, you know, is it clear? Is that website even in existence And again, that's why you get that four or four air. So if you're ever curious about the 404 error, that's all about you trying to make a request verse on website and it doesn't come back because that request was made in an incorrect way. So decline in the server. It's just decline your computer, your laptop, your desktop, your smartphone making a request to another computer, the server saying, Bring me this website, Give me this website or take me to my email so I can check my email. That's really all that's going on there. And, well, how do they transfer that information while they need their own language? They need their own form of communication, and that's what HTML is in CSS and JavaScript. It's and that's really why they call it programming languages. It's this channel, this medium of communication between thes two computers so that they can get the information as concisely and as quickly as possible so that, you know, you're not waiting five minutes to get into email, and we all know how frustrating that can be. So that's what decline in the server are really all about. It's really just a interaction between two computers where you want some kind of information and you're asking for it, and it's getting sent back again through this programming language, 3. 1: So again, JavaScript is different. It's a really program in language. Many people don't consider HTML or CSS to really be programming languages. Well, what does this really mean? It means that Java script is being interpreted by the browser. There's variables, things are in motion and there's a line of execution. Now we're going to go deeper in this course and all those things, how they really play out when you're writing your code and you're making things work. But for the most part, is focused on that one idea, this idea that JavaScript is dynamic. It doesn't just kind of sit there and say, Well, this is who I am, I'm not changing, Javascript says. Well, if you interact with me in this way, I'm going to do this. If you interact in another way, I'm going to do this. If the sequence is a certain way, I'm going to react in a different pattern. So it's very much like a chameleon. It's something that changes based on what the environment or what the scenario is, what is it used for? Java script is really used for anything from creating a pop up, which we talked about when you click on something that pops up. So again, if you if someone wants you to enter your email very often, you'll get a pop up there or again, those very aggravating banner ads, those air very similar to pop ups all the way up to full fledged games and applications. So with Java script, it's really the backbone of many comprehensive applications. If you think about well, what's your favorite app? If it's yelp if it's Facebook, whatever your favorite app is, JavaScript is at play there because JavaScript is really the glue that is holding together so many of the functions, and what makes that a really complex and rich at that you love to use. Now, if you haven't done any study of Java script, and since this is a crash course, it's safe to say that you haven't. The really incredible thing about JavaScript is that it was created in such a short span of time. 10 days I mean, the way that this programming language was put together, just such a rapid clip is really incredible. And not only that, you'd expect that for a language that develops so quickly, it wouldn't have a long shelf life, it would kind of Peter out. The amazing thing about JavaScript is that it was created in such a short span of time, and it's really lasted. It's really stood the test of time, really 10 days. That's the blink of an eye for a programming language. 4. 1: now this is where we're going to talk about Statements and statements are really crucial because you have to think about every line of Java script as an instruction. Now, when the browsers reading through each line of code, it's understanding how to make an execution, how to put something into action. Now, down at the bottom here, we're just gonna look at the basic composition of a statement and JavaScript or line of code. This is something we're going to run into a lot of times throughout this this course, this idea of console log console log is really just a very simple way to interact with your local computer. So we're gonna be doing some exercises throughout the course. And one thing that's really important to bring up throughout all of those exercises is that for all of these exercises, all of the changes were making are going to be on your local laptop or desktop or wherever you're taking this course. So you don't have to worry at all about what am I changing this site? Am I going to make some change to the website I'm working on or or could this anyway affect my date? and the answer is no, because none of these changes were making. There's going to be an exercise a little bit later. There's not gonna be any changes you're making to the website. These are all changes that you're making to your local computer. So don't worry about making any changes in in that kind of damaging anything. So again, the console is one way that we can write some code and just see it acted out right in front of us so we can start getting comfortable making these statements, telling, making an instruction and then seeing the results. So consul dot log Hello. That's a great one. That is just really gonna make a pop up that is going to say hello to you. Now, throughout this course, we're gonna be looking at different code and different fonts and syntax and highlighting rather syntax highlighting because it's going to make it much easier for you to see patterns between the code and why certain things are done. Certain ways and what you're going to see with the's JavaScript statements is that there's certain rules in place for how you make a certain instruction and how the browser has to read an instruction for it to take the correct action. So it's just much easier for you to be able to take a look at these different pieces of JavaScript code when you can kind of differentiate and start to see the patterns, the broad strokes between Why certain things air highlighted in a way or colored in a different way so that you can start to make distinctions between what's this kind of code in what's another kind of code and start to draw some parallels there as well. So another reason why this is so important is that when you really start to write, sit down and you start to write your own code. You're starting to go out and you want to create an application or you want to create some kind of game or whatever vision you have of what you want to create. You have to have a really solid understanding of what a statement is and how different statements measure with each other. We talked about how JavaScript is very dynamic, so you have to understand it's not a very stagnant where things aren't moving around. All of these different pieces affect one another, and if you right a sloppy piece of code in one place, you're going to run into problems down the line. So you have to be really careful about that. Now, when you're actually developing your code and writing it, you want to be using a text editor. And sublime is a great text editor that you can use, and the great thing about a text it or what it allows you to do is it's been rehearsed and used by developers over time and time again, and they've really figured out some really great ways to make it easier to write your code . Find mistakes in your code etcetera center, and one of the really powerful things they do is they have a color and scheme very similar to what you're going to get in this course, where it's very easy to differentiate pieces of your code because everything's color coded and you're going to see that in this course as well. The semi colon. So again you may understand the semi colon when you're writing an English paper to mean one thing. But remember, JavaScript is its own program in language, so that means that everything needs to be interpreted a little bit differently. It's like if you go to France and you speak French, things aren't translated word for word anymore because of the culture. Because of the way things have evolved over time, things mean different there. There's not a direct translation. Different words have different connotations in different meanings there. So in that context, when you travel toe Paris, you have to be very aware of that so that you know that you're sending the right message across. So for a semi colon, this is very similar to what we understand as a period in the English language. So it's what tells the browser this is the end of this statement. So at the end of your JavaScript statements, you need to have this semi colon. It's like a having a period. It's absolutely necessary. And again we talked about how, when you're writing your JavaScript, you can make the slightest mistake, and that has the ability to throw everything off so it can view be very aggravating. When you're starting to write your code, you make one small mistake. Maybe you go back and change things in. Rearrange all these things only to find out later that it was because you just missed one miney tiny little minuscule semi colon. So as a rule of thumb, always try toe when you're looking back at your code and you're looking for Okay, where could I possibly have made a mistake? Always be looking. Well, what's the smallest mistake I could have made? Because it only takes ah, very small mistake for the whole code to be thrown off. Yeah, and of course, for your and to not get the result that you were looking for. 5. 1: So let's take a look at these Java script comments now for JavaScript comments. These are all starting with two forward slashes, and that's again the framework of the structure that you're going to find when you are using JavaScript comments. So that's really the what a deeper question is. Why? Why use a Java script comments? And there's a ton of different reasons for this. Very often, you're going to use the Java script comment because you want to make in addition to a piece of code. Or there's something that you want to change and you want toe. Make a note of it so very often comments or like notes like just how you might have a sticky note on the fridge that says, Go grab some more milk because we're about to be out. That's very similar to what a comment is. It says. Well, this is the change I want to make in my code. Don't forget to add this this button or this pop up or this effect to the code. What are some other ways that you can use these JavaScript comments? Well, think about if you're working with a team very often for some of you you're interested in getting a job, maybe switching careers and working as a Web developer. Well, in that case, you're gonna be working alongside shoulder to shoulder with other Web developers. And very often the strength of a team is going to be determined by the strength of their level of communication. And when you're working on these large projects together and you don't have a way to communicate, that's really gonna make you suffer. And it's going to really change in for the for the worst part, the quality of whatever piece of code you come out with. So comments are another way for you to communicate amongst a team of developers, a group of developers so that one developer makes a change and later down the line, a developer dozen rearrange things by accident because you didn't know that another developer and made that change earlier. So it helps to Pete keep people on the same page, especially when they're working in teams of developers. Now the last thing is to really remind yourself very often what will happen is you'll be working on a project and then you'll get a new idea and you kind of want to put that on the whole, you'll put that project on the shelf. You'll say, Well, you know, I was going to create this app that would allow me to sort my favorite YouTube videos in a really cool way or store them there or make it so I could download them really easily and just watch them off line. But then I got this new idea where I wanted to be able to create an app that would allow me to store on my Pokemon go Pokemon and be able to share them amongst my friends. So when you put it a project on the shelf like that very often you'll go back to in months later and we'll be looking at the code like What was I? What was I even doing here? I I don't even know what's going on, and we'll comments allow you to do is you can write a comment your future self and say, Hey, this is this is the structure. This is where I was going with this so that months down the line, when you pick that project back up again, you have something to go on. It's not like you're going back to square one or trying to start everything from scratch. It really does help you to start from Ah, it really does help you start from a better place. So that again you're not gonna have to rehash everything and try to figure out where you're coming from it. It's just a very simple way to save yourself a lot of time down the road. And again, we're going to talk about what's known as best practices, things that take a little bit more time up front. But down the line, just save you gobs of time, multi line comments. Now these can be pretty long and you know very often, ah, common mistake that you see people make especially early JavaScript developers is that they get confused about what are comments, code or, you know, our comments going affect how my code operates. And the answer is no. As long as you make sure your comments are inside these two forward slashes and then this slash and then a star, the browser is going to read those lines of code and understand that it it's not a Java script statement. So here we're making a distinction again between what's a Javascript statement of what's a comment? Well, a comment is not going to be executed by the browser. It's not something that when the browser is going through those lines of code, it understands to make an adjustment to the actual way that the code is being understood and rendered by the browser. It's not dynamic, you could say now with the comments, they're very similar to HTML, but they're not being rendered. So html is rendered in the browser because that could be something like a text file. But comments aren't code. They can co exist along with code. So don't worry about well, are my comments gonna be changing the way that my website appears, or or what? These different styling effects are rather behavioral effects on my on the website are gonna appear, and the answer is no. Comments are not code, but they can be in co exist right along next to code 6. 1: so again, they're very similar to just notes for yourself. So you want you want have a way so that you don't make those really common mistakes of going back and changing things when you figured out that there wasn't a problem to begin with. And that's what comments are so great for their so great at helping you save yourself a lot of time by just updating your future self for communicating with others that you're working alongside. Now again, we're going to get into this idea of things like semantic html. But for now, just focus on understanding that if you see comments in your code because of this idea of syntax highlighting and again, what is sin tax? Highly? Well, it's that idea we talked about earlier, where different pieces of your code, because there's very common things. For example, if we were to show if I were to show you a paragraph, you would see a lot of periods, a lot of comments, maybe a cold and maybe a semi colon. Well, in any book, any any long novel you read, there's gonna be a lot of periods and commas and Coghlan's and different punctuation. That's the same thing in when you're writing a programming language when you're writing code, there's gonna be a lot of those same kinds of punctuation, except they mean something different in that context. So context is a really important idea to understand in programming in general. And it's something that you can really delve pretty deep into. For the most part, just focused on understanding syntax, highlighting as being different color coding, schematics and color coding ways that you can look at a piece of code and understand instantly what each piece of that code is all about, what it's referring to. And throughout this course, you're going to get a ton of experience looking at syntax, highlighting and really get in deeper sense of how it works. So again use comments to explain complicated, complicated pieces of code. Now, here's another mistake that a lot of beginning JavaScript developers make, or people interested in learning about JavaScript to build their own APs to create games. Whatever the case may be, very often they go overboard. They start writing a ton of comments and so many comments that it starts to get overwhelming, especially again if you're working with other developers. It's okay toe to write a comment when it's specific when it makes sense, when this is an area of a code that may change or other developers are working on. But when you go overboard, when you start to just write comments willy nilly, just for the sake of writing a comment, you can easily confuse yourself and it's just not productive. So there's a balance. There is also on the other side of the spectrum, writing not enough comments where it's a very complex piece of code, very complicated. Ah, lot of changes going on there, and people need to be updated on those changes. So you don't want to be on either side of that spectrum where you're right in way too many comments, and it's just overboard too much. And then on the other side, where you're not doing enough comments. So you want to find ah, happy medium where there's a more complex piece of code into writing a comment about it, or you're reminding your future self and making sure you're writing a balanced number of comments. So don't overuse them and don't never write them. So again, it's okay to use them and make sure you're using them in the right places again. It's that idea of context. Think about well, how complicated is this piece of code? Or think about? Well, how many other developers are going to be looking at this? And how important is it that everyone stays on the same page? Really, As a general rule of thumb here, you want to write code that's straightforward and clear enough that you don't even really need comments in the first place. It's very clear to see what your intentions are and where you're going. The last thing here is always update your comments for that piece of code that is a little bit more complicated, a little bit more stressful. Make sure that you do update your comments so that if you send out a piece of code to another developer, but it has outdated comments on it that can lead to a lot of downstream problems. So make sure that whenever you update a comment, make sure you date that update and make sure that your always updating all of your comments whenever changes made to the code