Introduction to Web Development Exercise 3: Final Questions
This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Exercise 3: Final Questions" Lesson
>> Female Student: Should you be able to scroll down to see the rest or is it just like?
>> Brian Holt: So if you did overflow: auto or scroll, like that really small. Let it scroll.
>> Female Student: Okay.
>> Brian Holt: Whatever you want.
>> Brian Holt: I hate scrolling so I typically don't like to have scroll bars.
>> Brian Holt: Questions about this? Did we for the most part get this? Yeah?
>> Female Student: I just got a question about the form actually in the CSS file. Somebody once told me that there is a certain way the attributes need to be listed in.
>> Brian Holt: Like the order of the HTML file?
>> Female Student: Yeah.
>> Brian Holt: I mean so, the answer is technically no. Technically, the browser doesn't care if you say color green, and then patting ten pixels, or patting ten pixels and then color green.
>> Female Student: It has more to do with somebody else reading the code.
>> Brian Holt: And that's just kind of a preference thing, it's kind of a stylistic thing.
[00:01:17] If your team adheres to one or you want to adhere to one, then go right ahead.
>> Female Student: Okay. I didn't know if there was a standard.
>> Brian Holt: There's not. There's no standard to it. I'm pretty lazy about it. But I just wanna write my code as fast as possible and be done with it.
[00:01:34] I haven't found ordering them a particular way has been helpful at all, I find it took me more time than it was saving me. I guess, it's kind of my limitless test as I might saving more time than I'm spending, right? So, if I could save me a ton of time down the road, then I would be all over it.
[00:01:51] But the fact that I'm spending a ton of time right now for no savings later.
>> Male Student 1: The question I was checking, how could use inline-block instead of float?
>> Brian Holt: So we haven't really talked about inline-block. We've talked about this block level elements and we've talked about inline elements, right?
[00:02:11] We have not talked about inline-block. We're going over there's many ways to skin a cat kind of idea, right. There's many ways to do this. So, let's do it without floats. So now, we have these around the same different lines, right? And now we can say, I hate that, we're gonna say display inline-block.
>> Brian Holt: And then you're gonna have to save margin zero, I think. Yeah, so I mean we're close, probably if I said 24% it would do it correctly. What inline-block is doing is it's gonna treat it like an inline element, right? Like an image or a span or something like that.
[00:03:09] You're changing the way that the CSS is going to treat it. Inline-block is kind of a hybrid between block level elements, like divs, and inline elements like spans. And there's kind of this hybrid approach called inline block that it's going to trigger like an inline, mean it's gonna try and treat essentially like text.
[00:03:27] But it's going to respect width and height and padding and all that stuffs because if you try to get like spans, like width through height, it just ignores them. Right? It doesn't know what to do with them but inline-blocks, it will actually try and respect your widths and heights.
[00:03:46] And, I'm sure there is a way to get rid of the spacing here between them, I can't remember off the top of my head. So, floating's easier I think, personally, but it's kind of up to you, whatever you wanna do.
>> Brian Holt: Good question. So, since we are on the subject, display has a lot of uses, you can say display none, it's an easy way to hide stuff, right?
[00:04:12] I just hid all the picture groups. Let's get rid of this and say go back to flow left. Get rid of this. Put that back in. Okay. So if I said, I no longer want any images ever to show. I'd say image display none. Okay all images are now going to go away.
[00:04:41] The browser treats them as if there not there.
>> Female Student: Do they get sent to the browser from the server, still?
>> Brian Holt: Are you talking about the images themselves?
>> Female Student: Yeah.
>> Brian Holt: It will not absolutely overflow the images. The browser is smart enough that it has display none on them, it will not actually load those images.
[00:04:57] As soon as you actually make them visible, then it'll actually go out, fetch those images and bring them back. Yeah. So they will exist in your HTML but they will not affect document flow. As you noticed, the text pushed up, right? Let's say I wanted the text actually stay where it was, right?
[00:05:17] There's a property called visibility, and you say hidden.
>> Female Student: [COUGH]
>> Brian Holt: What that means is I want you to still exist, I want you to still take up space, I just don't want you to actually show anything. Right? In this case the image just appeared but it is still actually taking up that same space.
[00:05:38] Kinda weird but occasionally it is useful, so.
>> Brian Holt: Yeah.
>> Male Student 1: What's the order that the HTML and the CSS is loaded, because isn't it walking the dog while it's loading the CSS?
>> Brian Holt: [COUGH] So HTML is always loaded first, definitely. Then your HTML, or sorry your HTML is always loaded first, then in your head element you should have all of your CSS, like we showed you that head block row, that's where you stick your CSS.
[00:06:33] Then after that, it is up to you how everything is loaded. You can put your CSS in different places and have it load different ways. Just best practices dictate that you load it at the top. Does that answer your question?
>> Male Student 1: Yeah. Because it's parsing it while it's loading, right?
>> Brian Holt: I really don't remember to tell you exactly. That seems to make sense to me, but I'm not gonna say this because I don't remember. But that would be a great thing to go read.
>> Brian Holt: Other questions? So how did we do with the exercise? Do okay? Get it for the most part?
[00:07:22] Seeing mostly head nods, which makes me really happy. I think this is one of the most fun parts of web development, is kind of molding the HTML to kind of fit your vision of what it should be. It's very for me, at least, a pretty creative process.
>> Male Student 2: So, a couple questions about the choice of techniques.
[00:07:47] Does it matter, the width of the browser at all for either of these two techniques that we used, the boarder, or the float?
>> Brian Holt: So it certainly does. Imagine taking this page and putting it, iPhone size would be like this size, right, which is just like a terrible experience.
[00:08:09] What you would want this to do, and here we're getting back to responsive web design. Responsive design means that between this width and this width of the browser display it like this. And when you're on desktop do this. When you're on essentially a tablet size browser do this.
[00:08:25] Or when you're on a mobile size browser then do this. I'll give you a really basic example of that. We did it on /marketplace/feed, there we go.
>> Brian Holt: Okay, so, this is like a full size browser width, right? And then I'll use the, let's put this on the side.
[00:08:53] Okay? So, full size desktop browser and then once you start getting down to tablet sizes then it reorganizes itself and has three. And then when you get down to an iPhone size, he has one and eventually two, right? This is the idea of what we'd call responsive web design.
[00:09:09] It's different css rules that apply to different sizes. Now, the next question you ask is how do you do that?
>> Male Student 2: Show us the code for that. [LAUGH]
>> Brian Holt: I mean, it's not actually too bad, it's all in Sass though, so a little bit different than what we've been talking about.
[00:09:28] But, they're called media queries, and off the top of my head, because I always write them in Sass, I don't actually remember how to write them in Raw css but you say between this width and this width apply these rules, right? These rules only have effect between these widths.
[00:09:43] These rules only have effect between these widths, right? And then once you get outside those widths, those rules no longer have effect.
>> Male Student 1: With the total frame?
>> Brian Holt: Of the browser, right?
>> Male Student 1: The view port?
>> Brian Holt: The view port precisely. Yeah. So that's kinda what we would.
>> Brian Holt: Did I get away from it?
[00:10:05] What the hell happened? All right, I guess we went to a new, there we go. All right, so, this is again, what I would do in this is I would stack it differently at different widths. You would have four on one line, so they'd take up 25% on desktop.
[00:10:21] Then on tablet, you would have them take up 33%. Then they would stack three next to each other. Then on mobile, they'd stack up 50% right, and have two of them on one line.
>> Brian Holt: But kind of a more of an advanced technique. There's other cool Frontend Masters courses on that kind of stuff so.
[00:10:43] Definitely would recommend checking those out.
>> Brian Holt: Good question. Other questions?
>> Female Student: Okay, so in HTML, going back to HTML, you referenced the kitten photo. When you need to reference something from your own file is it different? What's the difference in importing that into HTML?
>> Female Student: So if I have an image.
[00:11:17] This is my own picture, and I wanted to import it into image source here, how?
>> Brian Holt: How do you reference it?
>> Female Student: Yeah.
>> Brian Holt: We'll go more into that tomorrow when we're talking about node, but the sum of the story is, in fact, you have a whole slide.
[00:11:35] I think Nina has a slide on relative and absolute paths don't you? Yeah, I'll let Nina explain it. She's way smarter than me, so.
>> Female Student: Tomorrow, okay.
>> Brian Holt: Yeah, I think it's tomorrow.
>> Female Student: Okay.