This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Course Overview" Lesson
>> 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: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?
>> 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: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: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.
>> 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: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.
>> Brian Holt: Yeah.
[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: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?
>> Brian Holt: Yes, please.
[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.
>> 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.
>> 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?
>> 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.