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 Bootstrap Basics!
You have completed Bootstrap Basics!
Preview
Now we're ready to start building the Full Stack Conf website. First, let's have a look at the project we're going to build.
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
[MUSIC]
0:00
We did a great job building the coming
soon landing page for Full Stack Conf and
0:04
now we're ready to start
building the conference website.
0:08
Once again, the conference organizers
provided a simple mock up of what the site
0:11
should look like along with all the images
and content we need to build the site, so
0:15
let's take a look.
0:20
This is a static png mock up of
the website we're going to build.
0:21
As you can see, there's a simple
navigation at the top of the page.
0:25
And we're going to keep the large headline
and lead text for Full Stack Conf.
0:29
We'll just need to include two call
to action buttons in the header.
0:33
One links to the registration form, and
the other links to the speaker line up.
0:37
In the main content area,
0:42
there's a three column layout with
content about the conference,
0:43
the expert speakers, and a list of
JavaScript topics that will be covered.
0:47
Below this content, we'll need to display
the six speakers including an image,
0:51
name, and a short bio.
0:56
Then we're going to display
a conference schedule,
0:59
listing all the talks and
breaks during the day.
1:02
Right below the schedule, we'll add
a second call to action button for
1:05
registration followed by content
about the conference organizers.
1:09
Now we're going to keep the sign up
form we added in the coming soon page.
1:13
This time it's near
the bottom of the page.
1:17
Then we have a simple
footer at the very bottom.
1:19
If you want to see the final
version of the website,
1:23
I've posted a link to the site
in the teacher's notes.
1:25
You've seen that rapid development is
the biggest advantage of using Bootstrap.
1:31
So just like the landing page we built in
the previous section, we'll use Bootstrap
1:35
to create the design and layout for
the Full Stack Conf site in little time.
1:39
Coming up next, we'll begin laying out
the foundation for the site's content and
1:43
components using Bootstrap's Grid
system and layout options.
1:47
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