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