1
00:00:05,750 --> 00:00:11,360
Hello and welcome to the bootstrap class brought to you by the creative mind school.

2
00:00:11,430 --> 00:00:12,310
My name is key.

3
00:00:12,310 --> 00:00:14,610
Then I'm going to be your instructor.

4
00:00:14,610 --> 00:00:19,040
I've been doing website design in development for about 20 years now and I've taught over a hundred

5
00:00:19,040 --> 00:00:23,680
students in both the classroom as well as on my all different aspects of the web.

6
00:00:24,570 --> 00:00:28,140
In this class let me show you how to quickly build a web site using bootstrap.

7
00:00:28,140 --> 00:00:34,500
For now this we built on each team on CSSA as well was just a little bit of a query that helps expand

8
00:00:34,500 --> 00:00:36,710
on the bootstrap capabilities.

9
00:00:36,720 --> 00:00:41,480
So here's an example of a bootstrap template similar to what we're building in this class.

10
00:00:41,480 --> 00:00:46,980
And just to show some of the benefits of using bootstrap bootstrap carbides this whole framework where

11
00:00:46,980 --> 00:00:53,800
you can easily and quickly build a website using some predefined CSX bootstrap is what's helping create

12
00:00:53,800 --> 00:01:00,570
things like buttons and the grid here and the menu and the logo and everything that falls within it.

13
00:01:00,610 --> 00:01:06,420
It helps stylized images and provides space scene and keeping things uniform from page to page.

14
00:01:07,820 --> 00:01:14,730
And also helps you do things like pricing tables as well as interactive map that you can do.

15
00:01:14,730 --> 00:01:19,370
This is the part that's going to require a little bit of a query but it's very easy to use.

16
00:01:19,460 --> 00:01:23,560
It also helps create in-style as things like Quantic farms.

17
00:01:23,700 --> 00:01:28,150
But the real power strip I feel that comes in when it comes to responsive design.

18
00:01:28,560 --> 00:01:33,570
As you can see I have my menu up here and my logo and all my content it's like let's go back to the

19
00:01:33,570 --> 00:01:34,910
home page right now.

20
00:01:35,830 --> 00:01:41,750
And you can see a little bit better what happens as this starts to respond to different browser sizes.

21
00:01:41,770 --> 00:01:46,510
So as I make my browser a little bit smaller you can see that everything goes from the three column

22
00:01:46,510 --> 00:01:49,530
format to slightly smaller three columns.

23
00:01:51,780 --> 00:01:58,360
To a single column and in some cases two columns were all this stuff you can define and as I start to

24
00:01:58,360 --> 00:02:04,130
get smaller you can see that the menu goes into what they call the hamburger menu where it expands contracts

25
00:02:04,180 --> 00:02:06,140
when you click on that.

26
00:02:06,230 --> 00:02:08,090
Now they still continue to make it even smaller

27
00:02:11,290 --> 00:02:17,750
page continues to be responsive and then react to the size of the browser says you can see this is more

28
00:02:17,750 --> 00:02:22,710
like what mobile site might look like whereas something like this might be what you would see in a tablet

29
00:02:23,420 --> 00:02:26,240
and then on different sized desktop browsers.

30
00:02:26,400 --> 00:02:30,700
So there's a lot of benefits to using bootstrapping and looking forward to getting into it showing you

31
00:02:30,740 --> 00:02:32,220
all the pieces that make it up.