1
00:00:05,420 --> 00:00:06,230
Welcome back.

2
00:00:06,290 --> 00:00:13,340
Let's finish off this crash course for bootstrap with a project assessment exercise sort of complete

3
00:00:13,340 --> 00:00:15,930
the section testing out your new bootstrap skills.

4
00:00:16,190 --> 00:00:22,220
And as you kept mentioning the key to understanding bootstrap is really being able to go to the documentation

5
00:00:22,310 --> 00:00:27,350
and utilize components that you haven't directly had experience with yet you'll be able to understand

6
00:00:27,380 --> 00:00:32,310
and break down documentation examples and implement that same code inside your own.

7
00:00:32,350 --> 00:00:33,400
Tim all files.

8
00:00:33,590 --> 00:00:38,920
So for this project you're going to be building out a carousel picture site from some skeleton code.

9
00:00:38,930 --> 00:00:44,600
Keep in mind we haven't actually gone over carrousel pictures from Bootstrap in our previous lectures.

10
00:00:44,780 --> 00:00:50,120
That's because we want you to grow that skill of going to documentation seeing something you haven't

11
00:00:50,120 --> 00:00:53,000
used before and then implementing it into your own web site.

12
00:00:54,940 --> 00:00:58,110
Now underneath the bootstrap folder there's two HTL files.

13
00:00:58,240 --> 00:01:03,260
One is called Project main and the other one is called Bootstrap project sign up for its T.M..

14
00:01:03,310 --> 00:01:07,750
So go ahead and open those up in your text editor and we're going explore what tasks we need to accomplish

15
00:01:07,750 --> 00:01:08,950
for this project.

16
00:01:08,950 --> 00:01:12,960
Keep in mind there's also a subfolder for bootstrap project solutions.

17
00:01:12,970 --> 00:01:17,260
Those are the solution files so don't peek at those yet unless you directly want to jump to the solutions

18
00:01:17,260 --> 00:01:18,190
lecture.

19
00:01:18,190 --> 00:01:23,330
Let's open up these two files in our text editor and explore what tasks we need to finish.

20
00:01:23,340 --> 00:01:23,710
All right.

21
00:01:23,710 --> 00:01:28,360
Here you have both h tim l files open this first one that I'm looking at the larger of the two.

22
00:01:28,390 --> 00:01:35,690
This bootstrap project main h t m l and the second one is bootstrap project Sign-Up the h t l.

23
00:01:35,920 --> 00:01:37,780
So let's go over what you need to do.

24
00:01:37,840 --> 00:01:41,080
Essentially your task is to complete the commented suggestions here.

25
00:01:41,080 --> 00:01:42,790
Inside the skeleton code.

26
00:01:42,850 --> 00:01:48,490
So step one you can see there's the h tim Skelton but you need to add in the bootstrap for links.

27
00:01:48,490 --> 00:01:54,850
So those were the links to the CSSA the javascript and the query from the first documentation page.

28
00:01:54,850 --> 00:01:57,560
So you just copy and paste those for step 1.

29
00:01:57,640 --> 00:02:04,150
Step two is to add a dark nav bar here with a link to a separate sign up page so you to jump over the

30
00:02:04,150 --> 00:02:09,580
documentation figure out what class calls you need to do to make the navigation bar dark and then add

31
00:02:09,580 --> 00:02:15,030
in a list item with an anchor tag in it that actually links to the other team I'll file.

32
00:02:15,040 --> 00:02:17,200
So this him off all right here.

33
00:02:17,230 --> 00:02:22,090
Remember you can always pasan a local HTL file for the ref instead of the anchor tag.

34
00:02:22,120 --> 00:02:30,000
As we discussed in the h tim l crash course step three is create a Jumbotron class division and here

35
00:02:30,000 --> 00:02:34,020
you're going to add in a heading 1 just call the site whatever you want something like puppies look

36
00:02:34,050 --> 00:02:36,250
school and then add in some form ipsum.

37
00:02:36,250 --> 00:02:42,840
So like two paragraphs of lore if some text inside of that Jumbotron then step four is the big part

38
00:02:42,840 --> 00:02:47,510
of this project is trying to figure out how to put these six image links right here.

39
00:02:47,520 --> 00:02:53,700
So it says source is equal to this large splash dot com and put those in a carousel at the bottom of

40
00:02:53,700 --> 00:02:54,550
the page.

41
00:02:54,600 --> 00:02:59,700
So you need to figure out how best to actually implement that will give you a lot of leeway as far as

42
00:02:59,700 --> 00:03:03,140
what the carousel type should be or what it should finally look like in the end.

43
00:03:03,360 --> 00:03:07,530
But keep in mind this is the big part of the project being able to go to the documentation.

44
00:03:07,620 --> 00:03:12,030
Look up carrousel something we haven't worked with before and then implement them with your own image

45
00:03:12,030 --> 00:03:13,080
files here.

46
00:03:14,020 --> 00:03:18,400
Once you've done that remember that we wanted you to link to a separate Sign-Up page inside the navigation

47
00:03:18,400 --> 00:03:18,860
bar.

48
00:03:19,030 --> 00:03:23,950
So upon clicking that link you should go to this h tim l file and we've actually already put in the

49
00:03:23,950 --> 00:03:25,930
bootstrap links there at the top.

50
00:03:25,960 --> 00:03:30,120
But your job here is to just copy and paste the nav bar from the other page here as well.

51
00:03:30,280 --> 00:03:34,990
So you get that continuous nav bar no matter what page you're on and then you can create your own form

52
00:03:34,990 --> 00:03:37,540
here instead of a jumbotron and container.

53
00:03:37,580 --> 00:03:39,140
Does it really matter what the form is.

54
00:03:39,160 --> 00:03:44,500
You can just do something simple like email password and then sign up or really make it as complex as

55
00:03:44,500 --> 00:03:45,180
you like.

56
00:03:45,190 --> 00:03:50,230
Main idea here is that you're going to implement a bootstrap form with those nice classes right below

57
00:03:50,300 --> 00:03:51,310
this nav bar.

58
00:03:51,570 --> 00:03:51,870
OK.

59
00:03:51,880 --> 00:03:55,120
So let's take a look at what the completed project should look like.

60
00:03:55,120 --> 00:03:55,380
All right.

61
00:03:55,390 --> 00:03:59,590
Here I have with the completed solution should look like we have this Wellcome nav bar.

62
00:03:59,590 --> 00:04:02,100
Notice there's a sign up over here all the way on the right.

63
00:04:02,170 --> 00:04:06,820
We have this Jumbotron it's inside of a container it says cool puppy looks that's the heading one.

64
00:04:06,910 --> 00:04:10,290
And then I have this Loar ipsum text so two paragraphs alarm at some.

65
00:04:10,480 --> 00:04:15,190
And then at the bottom I've been able to create this carousel of these cute puppy pics from those on

66
00:04:15,190 --> 00:04:19,540
Splash links and if you click on the carousel you can end up cycling through them.

67
00:04:19,780 --> 00:04:22,290
Again we haven't actually shown you how to make a carousel.

68
00:04:22,360 --> 00:04:26,020
You need to go up in the documentation and figure out how to add those in.

69
00:04:26,020 --> 00:04:30,760
Keep in mind these pictures are really really large files as far as the project goes.

70
00:04:30,760 --> 00:04:32,480
You don't need to worry about resizing them.

71
00:04:32,500 --> 00:04:37,510
You can just have a huge carousel at the bottom but if you opt for a bonus you can edit the width and

72
00:04:37,510 --> 00:04:41,470
height and figure out how to do that as well through some extra CSX calls.

73
00:04:41,650 --> 00:04:44,920
But for the most part don't really worry about the images being really large.

74
00:04:44,980 --> 00:04:48,240
We would expect this carousel to be really big at the bottom.

75
00:04:48,290 --> 00:04:54,260
OK so back to the nav bar you should be able to click seinen and that should link you to the other HVM

76
00:04:54,320 --> 00:04:56,030
L that Sign-Up h t m l.

77
00:04:56,170 --> 00:05:00,740
And then here we see a container a Jumbotron log in tree email and password.

78
00:05:00,820 --> 00:05:04,800
And here we have email password and don't worry about redirecting on a submit.

79
00:05:04,810 --> 00:05:09,600
Once you submit you can just refresh this page essentially meaning you don't have any action inside

80
00:05:09,610 --> 00:05:10,590
of this form.

81
00:05:11,020 --> 00:05:11,560
OK.

82
00:05:11,590 --> 00:05:14,160
Coming up next we're going to walk you through an example solution.

83
00:05:14,230 --> 00:05:14,770
We'll see you there.