1
00:00:00,025 --> 00:00:04,689
[MUSIC]

2
00:00:04,689 --> 00:00:06,583
When you start to build a website or app,

3
00:00:06,583 --> 00:00:09,820
how often do you ask yourself what
front-end tools should I use?

4
00:00:09,820 --> 00:00:10,760
What about the layout?

5
00:00:10,760 --> 00:00:14,020
Should I use floats, a grid system,
or venture in a flexbox?

6
00:00:14,020 --> 00:00:16,910
Do I use pixels or ems for
the typography and media queries?

7
00:00:16,910 --> 00:00:18,870
What about browser compatibility?

8
00:00:18,870 --> 00:00:20,840
And so on and so on.

9
00:00:20,840 --> 00:00:23,540
Sometimes the toughest part
about building a website or

10
00:00:23,540 --> 00:00:27,530
app is knowing where to start or
how to design and build the thing.

11
00:00:27,530 --> 00:00:29,940
I'm Guil,
a fine-art teacher here at Treehouse.

12
00:00:29,940 --> 00:00:30,510
In this course,

13
00:00:30,510 --> 00:00:34,030
I'll teach you how Bootstrap, one of
the most popular open source front-end

14
00:00:34,030 --> 00:00:37,660
frameworks can help you build a functional
design and layout in little time.

15
00:00:37,660 --> 00:00:41,565
One of the biggest advantages of
using Bootstrap is development speed.

16
00:00:41,565 --> 00:00:46,325
Bootstrap makes web development faster and
easier, using some of the latest and

17
00:00:46,325 --> 00:00:48,358
most advanced front-end tools.

18
00:00:48,358 --> 00:00:52,212
So instead of designing and
coding your site app from scratch, you can

19
00:00:52,212 --> 00:00:57,200
take advantage of Bootstrap's ready-made
components to help you get started.

20
00:00:57,200 --> 00:01:01,710
The bootstrap framework comes with
reusable HTML and CSS for common elements,

21
00:01:01,710 --> 00:01:05,140
like buttons, forms, navigations,
grids and lots more.

22
00:01:05,140 --> 00:01:09,660
And you can easily add interactivity to
many of the components with over a dozen

23
00:01:09,660 --> 00:01:14,290
custom JavaScript plugins without having
to write a single line of JavaScript.

24
00:01:14,290 --> 00:01:18,020
And one of the best parts about Bootstrap
is cross-browser compatibility.

25
00:01:18,020 --> 00:01:21,580
There's no need to spend hours testing
how your responsive design looks and

26
00:01:21,580 --> 00:01:24,670
works in IE, Safari, Firefox, and Chrome.

27
00:01:24,670 --> 00:01:27,340
Bootstrap already figured
out that part for us.

28
00:01:27,340 --> 00:01:31,880
It offers you tried and
tested cross-browser code that just works.

29
00:01:31,880 --> 00:01:34,190
In fact,
your code will work on every device,

30
00:01:34,190 --> 00:01:37,410
from phones to tablets to desktop devices.

31
00:01:37,410 --> 00:01:40,190
This will all start to make
more sense once we crack open

32
00:01:40,190 --> 00:01:43,480
the Bootstrap documentation, and
begin building a website for

33
00:01:43,480 --> 00:01:46,990
a fictitious JavaScript conference
called Full Stack Conf.

34
00:01:46,990 --> 00:01:50,460
By the end of this course, you'll know
how to use Bootstrap to streamline and

35
00:01:50,460 --> 00:01:52,420
speed up your front-end work load.

36
00:01:52,420 --> 00:01:57,090
But before we start, this course assumes
you have a basic understanding of HTML and

37
00:01:57,090 --> 00:01:59,950
CSS, so make sure you complete
the prerequisites for

38
00:01:59,950 --> 00:02:01,160
this course before continuing.