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?

For example, maybe they do work in different industry like education and

health care.

Or maybe they design websites as well as mobile apps.

For these reasons, it would be nice if users could show more than one featured

image at the top of the page.

However, we still want the image to be large and

prominent and not in the form of a gallery.

A common pattern to solve this problem is an image carousel,

which is sometimes called a slider.

In this pattern, an image is shown for a period of time, and then the next

image is displayed, usually with some kind of sliding transition.

This pattern also sometimes features buttons, arrows, or

controls of some kind that allows the user to choose from the available images.

This feature is a bit more complex and requires some JavaScript.

Fortunately, Bootstrap has us covered.

Frameworks like Bootstrap often include common design patterns like

this because many different types of websites need to use them.

In Bootstrap, these are called components.

Let's take a look in the documentation.

On the left side of Bootstraps' documentation in the list of components,

similar to the nav bar component, we have the Carousel component.

On this page, there are several examples, such as this simple carousel or

carousels with controls and more complex examples.

However, for this example,

we're just going to use the most simple version of the carousel.

So we're going to follow this example and use these classes,

carousel slide, and this data-ride="carousel".

And the carousel-inner and the carousel-item classes.

So let's switch over to our workspace.

And down here on the featured section, I'm going to add

those first two classes, carousel and slide.

And then the attribute data-ride="carousel".

Then, I'll add a div with the class carousel-inner.

And this will act as our container for the carousel, and

then we need some carousel items.

So I'll add more divs, so

this first one will have the class carousel-item.

And then inside that, we'll add an image.

And it doesn't need to have a real source.

We'll just put that there.

And then we just need to copy and paste this three times so

that we have three carousel-items and we set this first one to active.

So it's first when the page loads.

Great, now let's save this.

And this markup will work with Bootstraps' built-in JavaScript that's already

included on the page.

Now let's hop over to our CSS and first,

let's change the featured class to be an ID of featured.

And let's also make that corresponding change in our HTML, and we'll save that.

And the reason we're doing that is because the featured section is

unique on a page and we won't have any others of it.

And we're going to change what's inside here.

So first we're going to remove these first two declarations and

leave the margin bottom and that's it for the featured ID.

For the carousel items, that's where we'll add our

500 pixel height and our background colors.

So by default, give this a value of 90F,

so it'll be this purple color.

But we want the other two carousel items to have a different color than the other

slides in the sequence, so that we can see the transition happen.

So to do that, we'll use

the class carousel item,

and nth-child(2).

And we'll give that a different background color.

We'll doing something like 09F and that will be this nice blue color.

And then, we can copy and paste that and change it to nth-child(3).

And I'll change this color one more time.

Say 0F9, and that will be this nice green color.

Now, let's save this and we'll preview this in the browser.

And you can see the image carousel will start on the first image.

And then after a brief moment, it will transition to the next image and so forth.

This might need some modification with real images in place,

but it's good enough for a prototype.

We can get a pretty good sense of how the layout will look on real devices.

We were able to put together this prototype really quickly.

But even in its current state, we can share this with stakeholders,

conduct user testing, and get feedback on the design.

More than likely, this will lead to one or

more rounds of changes until the basic layout and functionality are right.

At that point, we can jump in for

a complete visual design with fonts, colors, additional interactivity.

And maybe even some quick database tests

to see how the pages look with different sets of images and text.

This has been a brief overview of how webpages can be prototyped in a browser.

There's no right or wrong way to prototype.

But I think this is much better than just the wireframe, even in its current state.

Because we can see the real spacing and

proportions on a computer screen expressed with HTML and CSS.