9.1 Layout basics - Video Tutorials & Practice Problems

<v Instructor 1>In this section,</v> we're going to dig in more to the basics of page layout, and we've got a diagram here of some of the typical elements that are used in modern web design. So, you can pretty much do anything in terms of site layout, but there are these conventions that have emerged, right? <v Instructor 2>Yeah, I mean,</v> I'd say that this layout is kind of like, typical of a blog, <v Instructor 1>Yeah.</v> <v Instructor 2>or just an informational site.</v> I mean, this is always changing. There's always different ideas of what makes for a good site. And then on top of that, there's no rules. So you can just do whatever you really want to. If you don't wanna have a page header, don't have a page header, you know? <v Instructor 1>Yeah.</v> <v Instructor 2>But, generally these are kind of</v> the different areas of the page, and different content types that you see on lots of different sites. <v Instructor 1>Yes, right.</v> <v Instructor 2>So things like the</v> the page header and the page footer, <v Instructor 1>Footer.</v> <v Instructor 2>If you talk to someone</v> who also does web development, they're gonna know what you're talking about if you say, oh, I like the way that the links look on the page header. It's just kind of- <v Instructor 1>Yeah.</v> <v Instructor 2>You know, common usage.</v> And then for everything else you know, we talked about this with the hero. Sometimes people have slightly different names for things <v Instructor 1>Mhm.</v> <v Instructor 2>but they're all pretty much the same.</v> So it's just a good general basic idea of what the different parts of a site are. <v Instructor 1>You know, one problem we run into</v> in learning of HTML to be dangerous is that things like this page header and a page footer have a lot of repetition from one page to the next, like, they're basically the same, and we just did it by hand in that case, right? <v Instructor 2>Right.</v> <v Instructor 1>We just like copied and pasted the,</v> say, the navigation links, but that's not the right way to do things. <v Instructor 2>No, no one does it by hand.</v> <v Instructor 1>Yeah.</v> I remember when I first started doing web designs, like basically the beginning of the web, very, sort of rudimentary aspects of site design, and I was just completely confused about how is it that people have the same navigation on every page because they can't just be copying and pasting by hand. Right? That just seems, it seemed crazy. And I even had an early book on, you know, web design and other aspects of the web, and it didn't talk about this at all, but it turns out no, people don't do it by hand, and you know they had all kinds of very primitive ways of doing it at that time, but we're going to use a really nice polished system called a static site generator, specifically one called Jekyll, which we'll talk about in the next section.