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
Featuring an image at the top of the page helps to call out a designer's best work, but what if they want to feature different types of images? It would be nice if users could show more than one featured image at the top of the page.
Resources
- Bootstrap: Carousel - This section of the Bootstrap documentation details the carousel component, which can be used to cycle through a series of images, text, or other HTML content.
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
Featuring an image at the top of the page
helps to call out a designer's best work.
0:00
But what if they want to feature
different types of images?
0:06
For example, maybe they do work in
different industry like education and
0:10
health care.
0:14
Or maybe they design websites
as well as mobile apps.
0:15
For these reasons, it would be nice if
users could show more than one featured
0:19
image at the top of the page.
0:24
However, we still want
the image to be large and
0:27
prominent and
not in the form of a gallery.
0:30
A common pattern to solve this
problem is an image carousel,
0:34
which is sometimes called a slider.
0:38
In this pattern, an image is shown for
a period of time, and then the next
0:41
image is displayed, usually with
some kind of sliding transition.
0:47
This pattern also sometimes
features buttons, arrows, or
0:52
controls of some kind that allows the user
to choose from the available images.
0:56
This feature is a bit more complex and
requires some JavaScript.
1:03
Fortunately, Bootstrap has us covered.
1:08
Frameworks like Bootstrap often
include common design patterns like
1:11
this because many different types
of websites need to use them.
1:16
In Bootstrap, these are called components.
1:20
Let's take a look in the documentation.
1:23
On the left side of Bootstraps'
documentation in the list of components,
1:26
similar to the nav bar component,
we have the Carousel component.
1:30
On this page, there are several examples,
such as this simple carousel or
1:36
carousels with controls and
more complex examples.
1:42
However, for this example,
1:48
we're just going to use the most
simple version of the carousel.
1:50
So we're going to follow this example and
use these classes,
1:55
carousel slide, and
this data-ride="carousel".
2:00
And the carousel-inner and
the carousel-item classes.
2:05
So let's switch over to our workspace.
2:11
And down here on the featured section,
I'm going to add
2:17
those first two classes,
carousel and slide.
2:26
And then the attribute
data-ride="carousel".
2:31
Then, I'll add a div with
the class carousel-inner.
2:43
And this will act as our container for
the carousel, and
2:53
then we need some carousel items.
2:57
So I'll add more divs, so
2:59
this first one will have
the class carousel-item.
3:02
And then inside that, we'll add an image.
3:10
And it doesn't need to have a real source.
3:14
We'll just put that there.
3:19
And then we just need to copy and
paste this three times so
3:21
that we have three carousel-items and
we set this first one to active.
3:25
So it's first when the page loads.
3:32
Great, now let's save this.
3:35
And this markup will work with Bootstraps'
built-in JavaScript that's already
3:36
included on the page.
3:41
Now let's hop over to our CSS and first,
3:44
let's change the featured
class to be an ID of featured.
3:48
And let's also make that corresponding
change in our HTML, and we'll save that.
3:58
And the reason we're doing that is
because the featured section is
4:09
unique on a page and
we won't have any others of it.
4:13
And we're going to change
what's inside here.
4:17
So first we're going to remove
these first two declarations and
4:21
leave the margin bottom and
that's it for the featured ID.
4:27
For the carousel items,
that's where we'll add our
4:35
500 pixel height and
our background colors.
4:40
So by default, give this a value of 90F,
4:45
so it'll be this purple color.
4:52
But we want the other two carousel items
to have a different color than the other
4:57
slides in the sequence, so
that we can see the transition happen.
5:01
So to do that, we'll use
5:06
the class carousel item,
5:11
and nth-child(2).
5:15
And we'll give that
a different background color.
5:19
We'll doing something like 09F and
that will be this nice blue color.
5:23
And then, we can copy and paste that and
change it to nth-child(3).
5:28
And I'll change this color one more time.
5:31
Say 0F9, and
that will be this nice green color.
5:34
Now, let's save this and
we'll preview this in the browser.
5:41
And you can see the image carousel
will start on the first image.
5:46
And then after a brief moment, it will
transition to the next image and so forth.
5:50
This might need some modification
with real images in place,
5:57
but it's good enough for a prototype.
6:01
We can get a pretty good sense of how
the layout will look on real devices.
6:03
We were able to put together
this prototype really quickly.
6:10
But even in its current state,
we can share this with stakeholders,
6:13
conduct user testing, and
get feedback on the design.
6:17
More than likely, this will lead to one or
6:21
more rounds of changes until the basic
layout and functionality are right.
6:24
At that point, we can jump in for
6:29
a complete visual design with fonts,
colors, additional interactivity.
6:31
And maybe even some quick database tests
6:36
to see how the pages look with
different sets of images and text.
6:39
This has been a brief overview of how
webpages can be prototyped in a browser.
6:45
There's no right or
wrong way to prototype.
6:49
But I think this is much better than just
the wireframe, even in its current state.
6:52
Because we can see the real spacing and
6:58
proportions on a computer screen
expressed with HTML and CSS.
7:00
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