Complete Intro to Web Development, v2 Course Overview

[00:00:00]
>> Brian Holt: Overview of what you'll be learning in this course.
>> Brian Holt: A large part of what you're gonna be learning today is just terminology, and I'm trying to strip away the ones that you don't need, like there's some in here like monads, and functors, and I know some alumni is gonna be super pissed off that I'm making fun of functional programming, but I don't care.

[00:00:22] I'm sure I've already pissed them off before. There's stuff like that you can just ignore. It's just high and mighty computer science terminology that actually is not going to serve you too much in your day to day. What I'm trying to distill this down to is words that you need today to be able to search for the answers that you need.

[00:00:40] So that's why you're gonna need to know things like HTML tags, and functions, and scope, because that actually is gonna serve you really well when you're trying to solve a problem. And that's a big problem with computer science in general is people want to use the most technically accurate term, like there's a framer called Angular that's quite well known for this, that they'll use things like transclusion, which is, yes, that perfectly describes what they're doing, but most people don't actually understand what that means, which means it's worthless to me.

[00:01:14] So I'm trying to not use terms like that, and I'm trying to give you the best terms to be able to solve your problems, but again, if I use a term that you don't understand I guarantee you that someone else doesn't understand, and so you should definitely stop me and ask about it.

[00:01:30] So let's see, a good limus test, if you should understand the term, like if you should spend the time, if you repeatedly hear it in whatever you're doing you should probably look it up, but if you see a term that you don't understand, at least the first or second time, you can probably just ignore it and move on, at least that's how I handle it.

[00:01:53] Something else, you're going to have to learn three languages today, which is cool, I think [LAUGH]. It's like going into your language class, it's like, by the way, you're going to learn Japanese, German, and Italian today, so buckle up. [LAUGH] Hopefully it's a little bit easier than that, but we're going to learn HTML, CSS, and JavaScript.

[00:02:16] Luckily two of those are kind of considered like they're not programming languages, because they don't actually execute, they don't run, you can think of them more like English that they're declarative in the sense that you kind of state what you mean, and it's like English, but you can run English, you just like say English, right?

[00:02:39] And that's what HTML and CSS are, they're not run languages, they're just, you're stating something, and then a computer later is interpreting what you stated, right, whereas JavaScript is actually a full-fledge programming language that you run, you run JavaScript, right. If that doesn't make total sense right now, when we kind of get into those, hopefully that'll make a bit more sense, but just know that HTML and CSS are declared languages where you're just stating something, whereas JavaScript you're telling the computer to do something.

[00:03:12]
>> Brian Holt: Okay, and then we'll also go over the command line and how to use git, and we'll talk about that when we get there. That'll definitely be tomorrow. So,
>> Brian Holt: Make sure I covered everything I wanted to talk about.
>> Brian Holt: So I wanna make an analogy, and I'm gonna reference this analogy a lot during this course, and that's the analogy of building a house.

[00:03:39] If you're thinking that your website is a house, right, then we can kind of use HTML, CSS, and JavaScript to kind of describe the various parts of it. So you can think of HTML as, like, the raw building material. It's the drywall, it's the 2x4s, it's the frame of the house.

[00:04:01] In and of itself, if I just take a bunch of lumber to a lot and just leave it there, it's not a very good house. Despite the fact that you have everything to make a house, you need to make the house. [LAUGH] You can't just leave the building materials there and expect it to be a website.

[00:04:21] So that's kind of what html is. It's all the raw building materials and then you're going to use CSS and JavaScript to kind of put the house together. So think of html as the raw building materials. You can think of CSS more as like blueprints for the house.

[00:04:36] It's a bunch of rules that you use to describe where you want things to go. So I want this 2x4 to go on the south wall, I want this one to go on the north wall, I want these ones to go on the roof, and things like that, so it's a bunch of rules that describe what you want the house to be organized as, and what you want the colors to be and those sorts of things.

[00:04:58] So the CSS is the blueprints of the house, it's where everything is laid out, it's where everything goes. It's both the layout and the style. So it's like what wallpaper's gonna go on the walls. It's gonna be those sorts of things. So it's the stylistic presentation of your website is what CSS does.

[00:05:22]
>> Brian Holt: And then lastly, so you have the whole house together. You can actually just stop there with HTML and CSS. If your website doesn't have any really interaction with it, like if you're just making a website that describes events happening at your local community center, there's not really much interaction with that.

[00:05:40] It's basically like a flyer that you've put online, [LAUGH] right, or a PDF, right, that you've just put up on the Internet. You can stop there. HTML and CSS is enough to make just that. However, if you want anything to be interactive with your website you need JavaScript, that's the programing language of the web, and I would kind make the analogy of that being like a smart house.

[00:06:06] What if you wanted to drive your car into your driveway, have the garage open, and the thermostat turn, on and it makes you a cup of coffee, I don't know, something like that, you would make a bunch of programmatic things. Like, if this happens then do this, and do this, and do this.

[00:06:24] Like once I do this thing, a bunch of other things should happen, right. That's kind of the smart house mentality, and that's kind of what JavaScript does for you. You're kind of making your website reactive. So if the user clicks this button then send this request over here and show them this dialog, and gather this information from them, and show them this image.

[00:06:47] So it's kind of all these kind of interactions that are happening and that's what JavaScript is gonna buy for you.
>> Brian Holt: Yeah.
>> Brian Holt: So yes you can make website with zero JavaScript, however, most sites on the web now, almost everything is using JavaScript. So you don't necessarily have to have a smart home, but these days almost everything does have JavaScript on it, so it is more common than being a smart home.

[00:07:24] Lastly, we're gonna talk a little bit about servers at the end. We're gonna work with something called node JS, which is a server side programming using JavaScript. So some of you might have heard of things like Python, or Ruby, or Java, or Go, or C#, these are languages that you're going to write on the server.

[00:07:45] We're not going to learn any of those things. One, cuz you definitely don't wanna learn those things from me, [LAUGH] and two, this is front-end masters, so we're gonna work with JavaScript, and the nice thing about working with node is node is still JavaScript. So, we're going to be running JavaScript inside of your browser, which is like the client side code, that's the smart home kind of stuff, and then we're also going to be running it on the server, and you can think of the server like the pizza place in your neighborhood.

[00:08:12] So, you have a bunch of different houses, a bunch of different like people that are browsing your website all calling into the one pizza place. So one server serves multiple clients, or multiple browsers, and phones, and things like that, and you think when you want a pizza, you pick up your phone, you call them, you ask for something, and then they send you something.

[00:08:37] That's kind of the request response cycle of what it's like to interact with this server. So that's kind of what the pizza place is. So to recap here, I just wrote it down if you missed some of that. HTML's the structure. It's going to contain all the texts, the images, kind of just like the raw content.

[00:09:03] Mostly it's gonna be text, text and structuring. The CSS is the blueprint. This is gonna be where everything goes, what color it is, what size it is, what font it is, what the decorative background images are, and like HTML, CSS doesn't do anything of itself, you're not going to be executing anything with CSS, you're just going to be describing what you want.

[00:09:29] Then the frontend JavaScript, which is the JavaScript that is run inside the browser, it's the stuff that you're, the smart home stuff. That's going to be if they click this, then show them the dialog, or download this image, or if they scroll down far enough in their Instagram feed, then we're going to load more images at the bottom.

[00:09:49] That's gonna be the kind of stuff that JavaScript is gonna do for you on the client. And then the backend code, which is the pizza place, that's going to be, someone's going to request more images to show someone in their Instagram feed. So the pizza place is gonna go in, it's gonna find everything that the user asks for, and then it's gonna give it back to them.

[00:10:09] So that's gonna be reading from databases, it's going to be doing server side calculations, anything that you would need to centralize into your server, that's gonna go into that, and one server's going to serve many clients, just like one pizza place serves many households.
>> Brian Holt: Any questions about that?

[00:10:33]
>> Brian Holt: Yes, please.
>> Speaker 2: I still don't understand why haven't we taken HTML and CSS, even though they were created at different times? Why don't we meld them both in the JavaScript and then just use JavaScript for everything?
>> Brian Holt: That's a good question, why don't we just use JavaScript for anything?

[00:10:51] It's a lively debate that we could have. So there are people doing that actually. In fact, one of my other courses, which is Complete Intro to React, React more or less achieves that. It uses JavaScript to generate HTML, which is something very common to do, especially with the modern day kind of infrastructure, but right now it's actually really important for you to understand the primitives that it generates, so the HTML that it does generate.

[00:11:22] It's gonna make you a better programmer. But eventually, I'm not gonna say it's better, but there are people doing it.
>> Brian Holt: I don't know if I have a better answer than that.
>> [INAUDIBLE]
>> Brian Holt: Okay, [LAUGH] that's a good question. So, a note about this course's website. If you see a code sample like this that's on a yellow background, that's kind of probably hard to see, but I promise you that it is kind of a light yellow background there, this code is not editable.

[00:11:52] But if you see something like this, this code is editable, that's hard to say, so if I put like this is super cool you'll see it actually being used down here. So I really hope that as you're following along,
>> Brian Holt: That you are messing with these. That you're breaking them, that you're unbreaking them, and discovering and playing with it, cuz I think that's gonna really help instruct you, and help you understand that if I make this an h5 instead of an h1, it makes it look different and things like that.

[00:12:41] So I spent a bunch of time making this work so you better use it [LAUGH]. That's the sum of my story.
>> Brian Holt: The one thing that I will say is that if you break, if you write something that breaks in here and it breaks really badly, it might actually crash the webpage, so just refresh the page.

[00:13:06] So that is something that you can do, and if you do refresh the page it's going to reset everything back to the way it was. So if you find some code that you're really happy with and you want to keep, you should just copy and paste it into a separate file that you're keeping, so that would be a good idea as well.

[00:13:25]
>> Brian Holt: Any questions about that?
>> Brian Holt: Cool.
>> Speaker 3: So earlier when you said, the lighter color we cannot edit it, it is because of the lighter of the color, or is that the background that make it we can't edit it?
>> Brian Holt: So, that's a good question. I made it look different so that you can tell that you can't edit it, and I did it on purpose, because some of these things, if you edit them, you will definitely crash the webpage.

[00:13:58] So it's to protect you from yourself, or protect you from me, I think is probably more accurate. [LAUGH] So there's no necessary technical reason. It was a reason that I chose to make it now editable. Does that answer your question?
>> Speaker 3: Yes.
>> Brian Holt: Cool.
>> Brian Holt: Anyone else?
>> Speaker 4: Someone was asking inside that, what is that code that you're just editing?

[00:14:26]
>> Brian Holt: You're about to find out. Good question. What is that? I will tell you. Very soon.
>> Brian Holt: And like I'm being cheeky by saying it that way, but there's a very deliberate order that these things kind of build together, and so if we go in too many diatribes too early we're gonna get off track, and there is a lot of content.

[00:14:47] Just so you know, it's insane to try and learn web development in two days. It is just a ton of content, right? So you're gonna kinda have the firehose pointed at you, and sorry, not sorry, a little bit. [LAUGH] A lot of this is to expose these things to you, so you kind of understand the things that you don't understand and this is kind of a theory that I have a little bit.

[00:15:15] You have what you don't know that you don't know, and you can't Google or you can't talk about things that you don't know that you don't know about, right, but as soon as these things enter into this realm that you're like, I know these things exist, and so when I go to try and use that, it's like, I don't know how to use it right now, but I know how to Google it [LAUGH], and I think that's really important.

[00:15:34] So that's kind of like a big point of this is to introduce you to these things. I don't expect you to walk away understanding all these things 100%. What I expect you to be able to do is that you would be able to if you needed to do that, right?

[00:15:47] So I'm exposing you to these concepts so that you can learn them more deeply as necessary. Hopefully that makes some sense.
>> Brian Holt: So if I kind of say I'm not gonna answer right now, that's the reason why I'm doing it, is so I can come back later in the course and teach you some of these things.

[00:16:07] The other thing is that a lot of these, I'm covering this broad range of topics, and what's nice about Frontend Masters is they have a lot of like depth into each one of these. So, for example, we're going to just like scratch the surface of git, but if you want to like deep dive into git, there is an advanced git course on here by Nina Zakharenko that is really good.

[00:16:28] So you can check that out later.