Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Prototyping in the Browser!
You have completed Prototyping in the Browser!
Preview
Next, let's work on the HTML for the profile section and the image gallery.
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
Now we're finished with a header section,
0:00
let's just indent this properly and
remove this extra space.
0:03
And the next section is
the featured section, but
0:09
we're actually gonna leave this blank.
0:12
It's just gonna be a large image or
block of color that we'll add in later.
0:16
So, let's move on to this profile area.
0:20
I'll type this out and then explain it.
0:24
So let's open up this section, and
0:28
create a div with the class col, or
0:32
column, lg for large -4.
0:36
So at the largest responsive size,
this will take up 4 columns.
0:40
And then we'll also at
the class profile-info
0:47
to help us identify it
later if we need to.
0:52
And then I'm going to add an image inside
of this div with the class float-left.
0:57
So that the image is floated to the left
of a name and location text we'll add.
1:04
Then the source will be this image,
nickpettit.jpg, that I just added.
1:13
I'll include this with your workspace,
1:19
but feel free to add your
own image if you'd like.
1:21
So that's just a picture of me.
1:25
And then you should always
include some alternate text.
1:29
I'll say this is a Photograph,
Of Nick Pettit.
1:33
And then we'll close that image.
1:40
Then right after the image,
we'll use an h2 for
1:43
the name, And
feel free to type your own name there.
1:47
And then a paragraph with the class,
text-muted.
1:52
That's a bootstrap class
that we'll style this text.
1:58
And I'll put in my location of Orlando,
Florida.
2:02
But feel free to put in
your own location there.
2:05
So, to review this div is
going to be 4 columns across,
2:10
and inside, we have a profile picture.
2:15
And an h2 for a name, and
a paragraph for the persons location.
2:20
So right after this div, Let's
2:28
create another div with
the class col-lg-5, so
2:33
that will be 5 columns wide.
2:38
And inside of there, We'll type
2:41
a short paragraph about myself,
feel free to write about you.
2:45
We'll say Hi, my name is Nick!
2:51
I'm a teacher at Treehouse and
2:55
I enjoy designing websites.
2:59
So like I said,
this will be 5 columns across and
3:06
it will hold a short bio, or
other information about the designer.
3:10
And then finally, we'll add one more div,
3:15
With the class col-lg-3,
3:20
Inside there, and create a paragraph and
an anchor element with,
3:28
The class, btn for button.
3:36
btn-block, or a block-style button which
will fill up the width of the container.
3:40
And then btn-primary, or
3:49
button primary which will
give it a color of blue.
3:52
And then after that, add an href and
we don't need that to point anywhere, so
3:59
we will just put a hash.
4:04
And then inside,
we'll make this the Send Message button.
4:06
So we have 3 columns here,
which take up 4, 5, and 3 columns across.
4:13
And that will only occur if we're
at the largest responsive size.
4:21
Otherwise, this will collapse into
a column that's just one column
4:26
wide with all of these elements
stacked on top of one another.
4:31
So let's save this and take a look in
the browser to see where we're at.
4:36
Right now, this looks pretty messy
because nothing is sized properly.
4:44
The profile image dominates the page.
4:49
And the featured image is nonexistent
because it doesn't have any height or
4:52
content inside, and so forth.
4:57
We need to add CSS to make all
the elements proportional.
5:01
However at this point, we're still just
concerned with the basic HTML elements.
5:05
The CSS will come after the remaining
content is in place, so
5:09
let's work on the gallery now.
5:13
I'll switch back to our workspace,
type this out and then explain it.
5:16
So inside of the gallery, we're just
going to create a bunch of links.
5:21
So I'll create an anchor element that goes
no where, and inside I'll create an image.
5:26
And this image will also go nowhere.
5:35
So we'll just have a hash for
the source and
5:40
href, and
we'll create a whole bunch of these.
5:43
Here's one, two, three, four,
5:47
five, six, seven, eight, nine.
5:51
So here, we've just created this
container in gallery section, and
5:56
there's links with images inside.
6:01
If we save this and
look at it in the browser,
6:04
It won't look like anything at all yet,
because the images are blank and
6:11
the links are in line, so
they also appear blank.
6:16
In the next video, we'll start sizing
some of these content areas so
6:20
that they're proportional to one another
and actually take up some space.
6:24
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