HTML Structure

Open the workspace associated with this video. 0:00 And if it's not open already, open the index.html file. 0:03 Then open the preview for this page by clicking the preview icon 0:09 in the upper-right corner of the workspace window. 0:13 And right now this is what this webpage looks like. 0:17 Let's go back to the workspace. 0:22 And in this index.html file, we're already using the beta version of Bootstrap 4. 0:25 And because it's just in beta and 0:32 not the final version, it's possible some things in Bootstrap will change. 0:33 But the general prototyping principles I'm showing you in this course should remain 0:38 the same. 0:42 In the file tree, you'll see the CSS and JavaScript folders. 0:43 Which contain the CSS for Bootstrap and some JavaScript files for 0:48 Bootstrap, jQuery, and the new JavaScript library called popper. 0:53 Which is being used for tooltips in the Bootstrap 4 beta. 0:58 Now based on our mockup, let's start blocking out some of the major content 1:04 areas for the mobile and desktop layouts. 1:08 Using Bootstrap, we can do a lot of the work for both layouts in parallel. 1:11 Which is one of the big advantages of using a responsive frontend framework. 1:16 First, let's get started on the HTML. 1:21 I'll title this page Designer Finder. 1:24 So I'll create a title in the head of the website, and I'll type Designer Finder. 1:27 Then let's make a Bootstrap container and the rows and sections we'll need. 1:37 I'll type this out, and then explain it. 1:42 So in the body, we'll delete this first level headline. 1:46 And I'm just going to make some space to work. 1:50 And I'll create a header element followed by a section with the class, featured. 1:54 And then another section, With the class, row. 2:06 Another section with the class, gallery. 2:14 And then, finally, a footer element. 2:22 Then we need to wrap these, In 2:29 a div of the class, container, and 2:34 I'll take that closing div tag and put it at the end. 2:38 And let's make sure everything is indented properly. 2:45 There we go, I'll just delete some of that extra space. 2:49 Then down here at the end, let's add an HTML 2:53 comment that says END container, just so 2:58 we know that this div is the closing div for the container. 3:03 So first, we have a boot strap container here, 3:12 which will center the content on the page. 3:15 Then inside, we have a header and footer, along with three sections for 3:18 the large featured image, the profile details, and the gallery. 3:24 The profile area will just use Bootstrap rows and columns, 3:30 which is why I've applied the Bootstrap class row. 3:34 For the other sections, we'll use a more customized layout. 3:37 If you're familiar or you need a refresher on how Bootstrap containers, columns, 3:42 and rows work, see the notes associated with this video for 3:47 some links to helpful resources. 3:51 Now let's start filling in this page from top to bottom, starting with the header. 3:53 I'm going to create an h1 element with the website title, Designer Finder. 4:01 And then a nav element with some links inside. 4:08 I'll type this out, and then I'll explain it a bit more. 4:13 So inside of the nav, I'm going to create an unordered list with the class, nav. 4:18 And then we're going to create our first list item. 4:24 This list item will have the class, nav-item. 4:30 And then inside that list item, 4:34 we'll create an anchor element with the class, nav-link. 4:37 And the href will just be a hash, or pound, sign. 4:45 And inside the anchor element, we'll type, Home. 4:52 Now let's copy this first list item with the open and closing list item tags. 4:57 And we'll paste it three times, one, two, three. 5:05 And we'll change this so it says Home, 5:10 and then Artists, and About, and 5:16 then, finally, Logout. 5:20 The nav class in Bootstrap creates a flexbox container 5:24 to put all of these elements inside in line. 5:29 So instead of having the normal list item style for 5:34 an unordered list with the bullets beside it, it should be all in a row. 5:37 For more information about how these and other Bootstrap classes work, 5:43 see the links to the documentation in the notes associated with this video. 5:47 Now let's save this, switch over to our browser, and refresh the page. 5:52 And it's not perfect, but the content is there, and that's what matters right now. 6:01 So let's keep moving. 6:07