Introduction to Web Development CSS Conclusion

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian: Like HTML, there's a lot of fun stuff to CSS. It's a very expansive topic. We only scratched the surface of all the different properties you can use. Seriously, single-digit percentage of all the different properties that are available to you in CSS. Like there's, yeah go ahead.
>> Speaker 2: Opinion on floats versus position.

[00:00:23]
>> Brian: Yeah, I mean it really depends on what you're doing. There's no hard like that, we have all these tools because they fit different things. And it's kind of like the conundrum of the hammer and the nail, right? Like if you have a hammer, everything looks like a nail.

[00:00:37] Like you just want to hammer the shit out of everything, right? In reality, you have a whole toolbox because of your counter of screw, right. Like you need to pull out your screwdrivers and then use that. Like if you're gonna use a hammer on your screw, you're gonna have a bad time.

[00:00:52] So, my opinion is use the one that's correct. There are certainly wide uses for both of those properties. Just personal opinion like, if floats apply, then I would say use floats, right? If it makes sense to use a float, I would use a float over position. Position for me is kind of the last resort, there's no other way I can reposition something.

[00:01:18] Good question though. Cool, anymore questions? Yeah?
>> Speaker 3: Just curious, if you have advice on next steps, are there like sites that kind of guide you through, try to recreate this, you know cause that's kind of fun [LAUGH].
>> Brian: For sure, I know a friend, at Masters, [INAUDIBLE] has additional CSS courses.

[00:01:41]
>> Speaker 2: The big one is responsive web design.
>> Brian: Yeah, and that-
>> Speaker 2: That's actually a really, really good course.
>> Speaker 3: I guess I just meant more like practice exercises, or.
>> Brian: Like someone giving you a comp. And then you coding up a comp, when I say comp, like a PSD, like a Photoshop document and just coding it up to look like that?

[00:02:03]
>> Speaker 3: Yeah.
>> Brian: I don't have a resource off the top of my head, but they exist, definitely. And even more so, if you want to make a bit of money, there's lots of people that will pay you to do that. [LAUGH] But yeah, that's actually a really good practice.

[00:02:18] It's a really common pattern in web development is here's a image, right, like I designed in Photoshop. Please code this up to look similar to it, so.
>> Speaker 2: Good, as a lot of free PSDs, you know, Photoshop templates out there that you can, pull down. And then just, as a practice exercise, see how close you can make it.

[00:02:42]
>> Brian: Yeah, for sure. That would be a great way to practice your CSS.
>> Speaker 2: And, at that point, you have a little bit of portfolio, you said you can use PST and then turned it into this and you also have, you can ask better questions that you were more experienced than you because you're actually struggling with something real versus Yep, totally, good question, great.

[00:03:07]
>> Speaker 4: Yeah, he was just asking about a real world example, where you went with absolute instead of using the floats.
>> Brian: Yeah, let me think about that for a second. So, why absolute positions can be really, really useful is that, you need something on top of something else, right?

[00:03:24] So, I have this image, and I wanna overlay text on the image, right? Because image are void text, you can't actually put text inside of an image. You actually need to use position relative or position absolute to move that text on top of the image. There are other techniques you can use to accomplish that.

[00:03:43] But let's, for sake of argument, say that. So, I was asked a question. Could I elaborate a little bit more of position absolute versus floating?
>> Speaker 4: And- He wanted like a real world example where you can use that absolute.
>> Brian: Yeah, so. I just like while we were away for a second, I coded up a little example right here.

[00:04:05] So, let's just say I was making a cute cat picture with inspirational sayings or something like that, right? So, I had this image tag. There is no way to, because image is a void tag, you can't put anything inside of it, right? So, I need to take something that's not inside of image and I need to overlay it on top of the image.

[00:04:28] This is where position absolute is useful because you can move things where they would not otherwise be. In this particular case, I need to put text over an image, so what I am doing here is, I'll just go ahead and delete these stuff. That's kind of a half baked idea.

[00:04:47] Okay, so I have this image and then next to it exists, this paragraph which is what I want that be over the kitten picture. So, what I've done here is I've put position absolute, which saying like, I need you to position this absolute on the entire page, right?

[00:05:01] I'm going to give you coordinates. In terms of the entire browser. So, I'm saying from the top of the browser, so everything is from position right here in the top left. From the top of the browser, go down 180 pixels and go, from the left, go 180 or go 80 pixels, right?

[00:05:23] So, sometimes people do find it as like top, left, right, kind of annoying, right. You're not going left 100 pixels. It's from the left, you're going 80 pixels. So, you're moving something to the right. So in this particular case, from the top, I'm going down 180 pixels from the left.

[00:05:40] So again, to understand we're using this to overlay it on something else. This is not the only case when you would do this. There are other cases when you'd use position absolute. But I would say this is a common use case when you wanna kind of stack elements that otherwise would not stack.

[00:06:00]
>> Brian: Does that make sense? It's not super common. I don't use position absolute daily, right? Cool. Yeah?
>> Speaker 2: Is there a way of positioning text inside of an image that might be different sizes? Is it resized on the screen? So, say I just want this text centered on this image, regardless of what size the image.

[00:06:28]
>> Brian: Yeah, so what you kinda get into at this point is, you have to go and do background images. So, you have to essentially allow CSS to govern the image. So, you're gonna say background-image. And you're gonna say URL, and inside the URL you're gonna put this picture.

[00:06:50] So, let's just get that, cut it out, delete this, right? And now I'm gonna have this background image in here. So, and I'll have to make this like, with a hundred pixels, height, hundred pixels, or rather four hundred sorry. Okay, so now I have this div and its background is an image.

[00:07:21] And now I'm free to kind of mess around with it as I like. So, now I can say, p color: white, text-align: center, right. And I'm just gonna cheat and say like, margin-top or actually you can even do another one which is line-height 400 pixels. And we'll do like text size, or font size rather,

[00:07:52]
>> Brian: 30 pixels or something like that. So, that's how you would, kind of like, and I would probably recommend going this route than the other way I showed you. This is easier to kind of wrangle, right? The issue is that sometimes it's difficult to know those URL's ahead of time.

[00:08:14] Sometimes you have to wait for your server to know what the image is to sync it there. That's a problem that I constantly struggle with. But yeah, this will work.
>> Speaker 3: What's the line-height do?
>> Brian: So this is one of those hacks I was just telling you about.

[00:08:28]
>> [COUGH]
>> Brian: First of all, this will only work if the text is short enough to fit. So, if I do this, it's gonna look weird, I think. Maybe not. Maybe it's just not gonna wrap. All right, cool, whatever anyway, so line height. Line height is you know whenever you were in high school you wanted to double space all of your stuff, this is the same thing that governs those spaces between.

[00:08:58] So, if I had like lines height two, it says like whatever your normal line height it's going to be double it, so it would be like double spacing something, right? Or in this particular case, you can actually tell how many pixels high you want the line spacing to be.

[00:09:13] A hack for vertically centering something is to set the line height the same as the height of the div that it's in, that it needs to be centered in. In this particular case, I already know that the heights gonna be 400 pixels, thus I know I can set the line height to be 400 pixels and it will vertically center it.

[00:09:35] That only works if you know what the height is gonna be ahead of time, which I would say most of the time you don't. So, does that kind of answer your question in a very verbose way?
>> Speaker 3: Yeah.
>> Brian: Cool. More questions about this kind of stuff? All right.

[00:09:51] So, going back here. Yeah, don't worry if this felt like drinking from the fire hose, don't worry if you have not memorized every property that we've talked about it's all super available online. Not only are you not the first beginner but there has been like two decades of beginners that have started on it, so the internet is just full of people saying how the hell do I do this, right?

[00:10:18] So, every question that you're gonna have, guarantee it, you are not the first person that's had this question. So, if you just say like how do I vertically center a div? Or something like that, someone else has asked it. And someone else has already answered it on Stack Overflow.

[00:10:33] Stack Overflow's gonna be one of your best things. I recommend going through CSS tricks. Chris, the guy who writes CSS tricks, puts a lot of research into what he does. And like will give you a very layman's kind of terms for it. And then the MDN, if you want the technical explanation, like what does it suppose to do?

[00:10:51] What does it do in this edge case? Then the MDN is really good place to go.