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
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.
[MUSIC]
0:00
We did a great job building the coming
soon landing page for fullstack.com 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 up