Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Using our mockup, let's start blocking out 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 front-end framework.
Resources
- Bootstrap 4 Basics: Layout in Bootstrap - Check out this video from the Bootstrap 4 Basics course for some helpful review.
- Bootstrap: Layout - If you need a refresher on how to use the Bootstrap 4 grid system, check out this link to the documentation.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up