Open the workspace associated with this video.

And if it's not open already, open the index.html file.

Then open the preview for this page by clicking the preview icon

in the upper-right corner of the workspace window.

And right now this is what this webpage looks like.

Let's go back to the workspace.

And in this index.html file, we're already using the beta version of Bootstrap 4.

And because it's just in beta and

not the final version, it's possible some things in Bootstrap will change.

But the general prototyping principles I'm showing you in this course should remain

the same.

In the file tree, you'll see the CSS and JavaScript folders.

Which contain the CSS for Bootstrap and some JavaScript files for

Bootstrap, jQuery, and the new JavaScript library called popper.

Which is being used for tooltips in the Bootstrap 4 beta.

Now based on our mockup, let's start blocking out some of the major content

areas for the mobile and desktop layouts.

Using Bootstrap, we can do a lot of the work for both layouts in parallel.

Which is one of the big advantages of using a responsive frontend framework.

First, let's get started on the HTML.

I'll title this page Designer Finder.

So I'll create a title in the head of the website, and I'll type Designer Finder.

Then let's make a Bootstrap container and the rows and sections we'll need.

I'll type this out, and then explain it.

So in the body, we'll delete this first level headline.

And I'm just going to make some space to work.

And I'll create a header element followed by a section with the class, featured.

And then another section, With the class, row.

Another section with the class, gallery.

And then, finally, a footer element.

Then we need to wrap these, In

a div of the class, container, and

I'll take that closing div tag and put it at the end.

And let's make sure everything is indented properly.

There we go, I'll just delete some of that extra space.

Then down here at the end, let's add an HTML

comment that says END container, just so

we know that this div is the closing div for the container.

So first, we have a boot strap container here,

which will center the content on the page.

Then inside, we have a header and footer, along with three sections for

the large featured image, the profile details, and the gallery.

The profile area will just use Bootstrap rows and columns,

which is why I've applied the Bootstrap class row.

For the other sections, we'll use a more customized layout.

If you're familiar or you need a refresher on how Bootstrap containers, columns,

and rows work, see the notes associated with this video for

some links to helpful resources.

Now let's start filling in this page from top to bottom, starting with the header.

I'm going to create an h1 element with the website title, Designer Finder.

And then a nav element with some links inside.

I'll type this out, and then I'll explain it a bit more.

So inside of the nav, I'm going to create an unordered list with the class, nav.

And then we're going to create our first list item.

This list item will have the class, nav-item.

And then inside that list item,

we'll create an anchor element with the class, nav-link.

And the href will just be a hash, or pound, sign.

And inside the anchor element, we'll type, Home.

Now let's copy this first list item with the open and closing list item tags.

And we'll paste it three times, one, two, three.

And we'll change this so it says Home,

and then Artists, and About, and

then, finally, Logout.

The nav class in Bootstrap creates a flexbox container

to put all of these elements inside in line.

So instead of having the normal list item style for

an unordered list with the bullets beside it, it should be all in a row.

For more information about how these and other Bootstrap classes work,

see the links to the documentation in the notes associated with this video.

Now let's save this, switch over to our browser, and refresh the page.

And it's not perfect, but the content is there, and that's what matters right now.

So let's keep moving.