3.1 Documentation Page

Hello, and welcome to lesson number eight of this course, where we'll create the documentation page. Previously, we created the customers page, you saw just how easy that was. So for the documentation we have the following structure. Of course, the hero, which has the title and eventual subtitle. But also what's different about this is that we're gonna include a search form that's basically gonna say, Search the documentation. And then we'll have a nav on the side, or we can use the same method that we used here. It really depends on how large the documentation really is. And then it's the main content of the documentation, which really depends on what kind of documentation we have, what kind of content it's gonna present. We're just gonna leave a blank space where the content is gonna be, but we'll focus on the other elements. So if you're doing a website like this, if you're designing it, you need to know in advance what kind of content you'll have in that documentation so you can create appropriate styles. But for now, since we're dealing with a demo website, we don't really know that. So let's start by duplicating this art board. We're gonna call it Documentation. Okay, I'm gonna get rid of this bit. And I'm gonna make it a little bit bigger, move these down. So the documentation should say something like this, What do you need help with? Let's use that as our title. And let's go and search for a form to get some inputs, Subscribe. All right, so we could use something like this. Or if we want something with a bit more emphasis, I think I saw some inputs here that were a little bit Better, yeah, like this basically. But this is the active or the focus state. But we actually should be okay. So let's copy this bit. Let's copy the whole thing, along with the button, and paste it in. Let's delete this label. This is gonna say, Search the documentation. Let's get rid of this. Let's position this at about let's say 60 pixels from that point, from the headline. And actually, I don't think this is working out too well, so I might just end up going back to the default styling of the input. Yeah, I think this is better. Okay, so again, Search the documentation. We're gonna change this to Search. Let's update the size of this button. And I would actually make this a little bit bigger, to be honest. So right now this is 50 pixels in height. I would make it around 90 in height. And I would increase the font size here a little bit. And of course, I would also need to change the height of this button. Okay, and of course, we need a bigger font here. So let's see what kind of fonts we have. Or actually, I'm gonna check out the UI Kit, see if the author has, More button styles. And they do, 60 pixels in height. You know what? I think it's best we follow the UI Kit. So I'm gonna do this. I'm gonna grab that input, simply change the text, and now I'm simply gonna make this bigger. Let's bring up the layout. Let's make this about six columns. Yeah, that should do it. All right, so, Let's position this separator properly. And that's the hero done. Now let's see about the other content. So we said that we need some kind of navigation to go to each individual subsection. I think to keep things simple, We're actually gonna assume that we don't have that many sections within the documentation, all right? So we're going to get the in-page navigation that you see here. All right, so I'm gonna use that, I'm gonna paste that in. In this case, we don't need this separator. Bring that up to 90 pixels. All right, so this will basically be for the documentation. Let's remove that button to free up the space here. And we're gonna have DOCUMENTATION SECTION 1, SECTION 2, SECTION 3, and so on. And clicking these links will basically scroll the page down to each individual section. And as I said, we're gonna leave this blank, because depending on the type of content within the documentation, we can do it in a lot of different ways. So for this page I just wanted to focus on the rest of the things, the frame, if you want, the top part, the actual navigation, and then what follows, the call to action and footer. All right, now in the next lesson, we're gonna build the next page in the resources category, which is articles. So see you in the next lesson.