1

00:00:00,780 --> 00:00:05,970

So let's go a little bit further and start setting up our landing page, the very first page for our



2

00:00:05,970 --> 00:00:11,000

site, and what I have right now is I have this index, that HTML file open.



3

00:00:11,010 --> 00:00:14,910

I'm going to close that and I'm going to go over to my desktop.



4

00:00:14,910 --> 00:00:21,180

And if you look at the course resources for this page, you will find a file called Images, Dot, Zip,



5

00:00:21,180 --> 00:00:21,900

download that.



6

00:00:22,560 --> 00:00:25,340

And when you expand it, it will expand to an images folder.



7

00:00:25,360 --> 00:00:29,220

And what I'm going to do is on my desktop, you can do it wherever, but remember where you put the



8

00:00:29,220 --> 00:00:29,610

files.



9

00:00:29,970 --> 00:00:34,140

I'm going to create a new folder and I'm going to call it working HTML.



10

00:00:34,530 --> 00:00:36,930

You can call it anything inside of that.



11

00:00:36,930 --> 00:00:42,170

I'm going to put my images folder that I just extracted from the zip file and I'm going to put the indexed



12

00:00:42,180 --> 00:00:44,330

HTML file I've been working on right along.



13

00:00:44,880 --> 00:00:49,500

And the reason I'm doing that, what I'm going to do is go back to my text editor.



14

00:00:51,400 --> 00:00:57,910

Right here and I'm going to open that index up file index that is Schimel file that I had in the working,



15

00:00:57,930 --> 00:00:59,890

but I just moved into the working e-mail folder.



16

00:01:00,210 --> 00:01:02,510

So this is our our HTML file.



17

00:01:02,520 --> 00:01:08,520

And I can go back to my Web browser and I'll have to close that and reopen it because it's in a different



18

00:01:08,520 --> 00:01:12,330

location now and reopen that file and everything should work the same.



19

00:01:12,540 --> 00:01:15,590

Now, there's a reason I did that, and the reason is pretty straightforward.



20

00:01:16,110 --> 00:01:24,270

If you look at the structure of our application, which is right here in Goaland, and let me open up



21

00:01:24,270 --> 00:01:24,990

the file.



22

00:01:24,990 --> 00:01:32,250

I've been working on bookings in Harris file, which is right here.



23

00:01:32,820 --> 00:01:39,130

We created a couple of lectures go this static folder, and that's where all of our static images are



24

00:01:39,180 --> 00:01:42,300

static images and JavaScript and siestas files.



25

00:01:42,480 --> 00:01:46,860

Anything that's not an HTML template, which will we actually convert it to?



26

00:01:46,860 --> 00:01:51,180

A good template will be a go template handled by a handler.



27

00:01:51,580 --> 00:01:55,010

Anything that's not one of those has to live in a static folder.



28

00:01:55,020 --> 00:01:57,660

So to do that, I would say have to do one more step.



29

00:01:57,840 --> 00:02:03,320

I need to create a static folder, static and then move images inside of that.



30

00:02:04,290 --> 00:02:10,020

And the reason I've done this is when I work on my HTML, which we're going to do right now, I'm going



31

00:02:10,020 --> 00:02:11,700

to delete everything in the body tag.



32

00:02:12,300 --> 00:02:16,550

We need our images and so forth to be somewhere that the template can find them.



33

00:02:16,710 --> 00:02:23,040

And if I create the structures of folders, as I just did, it means that the path is path to images



34

00:02:23,040 --> 00:02:28,550

and so forth will be exactly the same and go templates as it is in the demo file.



35

00:02:28,560 --> 00:02:29,540

And it just makes it easier.



36

00:02:29,550 --> 00:02:35,310

I don't have to go fix a bunch of path names to files and images and so forth after the fact.



37

00:02:35,820 --> 00:02:37,530

All right, so we're going to create a landing page.



38

00:02:37,560 --> 00:02:42,330

So let's go look at Bootstrap because that's what we're going to use as the Cyesis framework.



39

00:02:42,390 --> 00:02:48,210

Let's go back to get bootstrap dotcom and let's look at examples to see what the kinds of things we



40

00:02:48,210 --> 00:02:48,560

can do.



41

00:02:48,570 --> 00:02:51,630

So here are some custom components and album pricing.



42

00:02:51,630 --> 00:02:54,360

Check out a headline.



43

00:02:54,600 --> 00:02:55,260

What's this one?



44

00:02:55,350 --> 00:02:56,090

A carrousel.



45

00:02:56,700 --> 00:02:57,750

Let's have a look at that.



46

00:02:59,580 --> 00:03:05,740

So at the top, we have a navigation bar that we can do things, we might have a search feature, we



47

00:03:05,740 --> 00:03:07,460

won't do that yet, but we might do it later on.



48

00:03:07,860 --> 00:03:09,390

And then we have this top thing.



49

00:03:09,420 --> 00:03:10,830

This is called an image carousel.



50

00:03:10,830 --> 00:03:15,870

And it's a means where you can show text with some kind of background image, which they don't have



51

00:03:15,870 --> 00:03:16,090

here.



52

00:03:16,440 --> 00:03:18,000

This looks like it might be useful.



53

00:03:18,060 --> 00:03:20,770

So let's have a look and see how we might do that.



54

00:03:20,790 --> 00:03:25,900

So let's go back and go documentation and let's start with some very basic things.



55

00:03:27,180 --> 00:03:30,780

I want to put that carousel there and I want to have that navigation bar there for sure.



56

00:03:30,870 --> 00:03:37,470

OK, so you'll notice here in this section where it says, start our template.



57

00:03:37,620 --> 00:03:41,740

We've looked at this one already and I said, let's ignore this query stuff for now.



58

00:03:41,760 --> 00:03:43,080

Well, let's not ignore it this time.



59

00:03:43,680 --> 00:03:46,960

And I have a little bit to say about January, but that'll come momentarily.



60

00:03:46,980 --> 00:03:48,540

Let's just get a few things working first.



61

00:03:49,020 --> 00:03:51,390

Obviously, it says I need one of the two.



62

00:03:51,390 --> 00:03:56,150

I can either have Jake a popper and bootstrap jazz or I could have this one.



63

00:03:56,170 --> 00:03:58,800

Well, let's make sure that we're going to get everything we might possibly need.



64

00:03:58,800 --> 00:04:03,690

So I'll copy this one except for the comments and I'll go back in here.



65

00:04:03,700 --> 00:04:04,670

And where does it go?



66

00:04:04,680 --> 00:04:06,510

It goes just before the closing body.



67

00:04:06,840 --> 00:04:13,270

OK, so I can do that, paste those in their format a little bit better and save it.



68

00:04:13,680 --> 00:04:15,130

Now, let's go back and look at this again.



69

00:04:15,180 --> 00:04:23,550

Now, this is a really basic one because we built that our page wound up looking like this, which isn't



70

00:04:23,550 --> 00:04:23,880

great.



71

00:04:24,300 --> 00:04:27,180

So let's just put a few things that I know we're going to have to have.



72

00:04:28,500 --> 00:04:34,100

When you create something in Bootstrap, you typically wrap it in a special HTML tag.



73

00:04:34,110 --> 00:04:37,440

We've seen ones like this p p for Paragraph's.



74

00:04:37,770 --> 00:04:43,800

Well, we can also use dips and a div is just a division and this would have to have an opening tag



75

00:04:43,800 --> 00:04:44,690

and a closing tag.



76

00:04:44,700 --> 00:04:49,860

And this is going to wrap all of the content, the displays for our users and we're going to give that



77

00:04:49,860 --> 00:04:58,300

div a class and a class is just the name of a CSC or cascading style sheet directive.



78

00:04:58,890 --> 00:05:06,150

It's a collection of things inside a main part of the CSC file that says take all of the styling I define



79

00:05:06,150 --> 00:05:07,990

here and apply it to this class.



80

00:05:08,010 --> 00:05:09,510

So we'll see how this works in just a moment.



81

00:05:09,900 --> 00:05:11,580

But we're using one this class.



82

00:05:11,580 --> 00:05:12,630

Where does this exist?



83

00:05:12,630 --> 00:05:17,100

Will it exists in this bootstrap file that I included up here?



84

00:05:17,230 --> 00:05:19,410

So it's one that's built by bootstrap for us.



85

00:05:19,680 --> 00:05:22,230

And I'll put div class equals container.



86

00:05:22,650 --> 00:05:23,110

OK.



87

00:05:24,150 --> 00:05:26,940

So that affects everything inside this div.



88

00:05:26,970 --> 00:05:34,980

Now, if I actually put this in here, put in something like this, H1, my title slash H1, let's see



89

00:05:34,980 --> 00:05:36,530

what changes that made.



90

00:05:36,840 --> 00:05:40,100

Well I reload this and I should see only that title I just created.



91

00:05:40,560 --> 00:05:41,770

But notice how it's moved over.



92

00:05:42,070 --> 00:05:42,960

Well that's interesting.



93

00:05:42,990 --> 00:05:46,470

OK, so that container actually did something.



94

00:05:46,500 --> 00:05:48,620

It moved it to the left or to the right.



95

00:05:48,630 --> 00:05:49,800

So at least we know it.



96

00:05:49,800 --> 00:05:55,710

Did that get rid of that for now inside of the div class container, I'm going to put another div div



97

00:05:55,710 --> 00:05:57,570

class equals row.



98

00:05:58,200 --> 00:06:00,000

And of course that has to have a closing tag.



99

00:06:00,390 --> 00:06:00,860

All right.



100

00:06:01,200 --> 00:06:02,850

What if I put my H1 in there now?



101

00:06:03,240 --> 00:06:09,450

H1, whatever, H1 save reload.



102

00:06:09,630 --> 00:06:13,290

OK, well it didn't seem to change anything inside of that row.



103

00:06:13,740 --> 00:06:21,300

I'm going to put another to div class equals call for column and I'll wrap that, I'll put that around



104

00:06:21,690 --> 00:06:27,330

this H1 tag now formatted again so we don't get lost in our HTML and you should get in a good habit



105

00:06:27,330 --> 00:06:29,010

of indebting things just as well.



106

00:06:29,340 --> 00:06:29,700

All right.



107

00:06:29,700 --> 00:06:34,770

So I put a column in there, so now I have a container a row and then a column inside that row.



108

00:06:35,100 --> 00:06:35,730

Let's reload it.



109

00:06:36,470 --> 00:06:39,690

OK, moved it a little bit, but I'm still not sure what's actually happening.



110

00:06:40,320 --> 00:06:43,710

Well, I'm going to copy this entire div class equals call.



111

00:06:44,010 --> 00:06:49,150

I'm going to paste it below it once inside my heart.



112

00:06:49,170 --> 00:06:49,680

Try tried again.



113

00:06:50,010 --> 00:06:51,180

Div class equals call.



114

00:06:54,840 --> 00:07:00,780

And I'll paste it once, twice, three times, so now I have four deals with class equals call and I'll



115

00:07:00,780 --> 00:07:06,090

call this whatever, whatever one, whatever, two, whatever three just so we can see where they go



116

00:07:06,390 --> 00:07:06,870

and not one.



117

00:07:06,870 --> 00:07:09,360

I reload this look, I put them in columns.



118

00:07:10,110 --> 00:07:22,850

All right, what if I close this row or after this row closes, I put another div class equals row give



119

00:07:22,860 --> 00:07:26,530

and inside of that I will put just a paragraph of text.



120

00:07:27,150 --> 00:07:34,530

This is some text which I will not copy and paste a bunch of times just so it gives me a paragraph piece



121

00:07:34,780 --> 00:07:38,150

paper space based paste p save.



122

00:07:39,360 --> 00:07:40,920

Well, you can probably guess what's going to happen.



123

00:07:41,070 --> 00:07:49,320

These four columns exist in one row and this one thing exists by itself.



124

00:07:49,410 --> 00:07:51,140

Now I should have a column around that I don't.



125

00:07:51,150 --> 00:07:51,980

Let's see what happens.



126

00:07:52,530 --> 00:07:53,110

Reload.



127

00:07:53,160 --> 00:07:53,660

All right.



128

00:07:53,670 --> 00:07:56,940

Now you see, because that doesn't have a column, it doesn't actually line up with this one.



129

00:07:57,180 --> 00:07:58,320

Let's put a column around the.



130

00:08:00,190 --> 00:08:08,860

Div class equals call, and then down here I'll do another one, close it now that I've wrapped it this



131

00:08:08,860 --> 00:08:11,290

way and I save it.



132

00:08:11,320 --> 00:08:13,300

Let's see what happens now.



133

00:08:13,310 --> 00:08:15,580

That lines up much, much better.



134

00:08:15,640 --> 00:08:22,750

OK, so I have now a row and a row and inside this row I have four columns and inside this row I have



135

00:08:22,750 --> 00:08:23,320

one column.



136

00:08:23,800 --> 00:08:33,090

Let's try third row div class equals row has a closing give and I'll put two columns this time.



137

00:08:33,100 --> 00:08:45,010

Div class equals column div to class equals call div.



138

00:08:45,310 --> 00:08:45,740

All right.



139

00:08:47,110 --> 00:08:54,330

And inside of this I'll put a left call and inside of this output right call.



140

00:08:55,120 --> 00:08:55,930

Let's save that.



141

00:08:57,730 --> 00:08:59,170

And it does exactly what I want.



142

00:08:59,440 --> 00:08:59,950

All right.



143

00:09:00,280 --> 00:09:03,380

Well that's, that's a good start, but it's still kind of ugly.



144

00:09:03,430 --> 00:09:05,380

I really want to make this a little more attractive.



145

00:09:05,380 --> 00:09:08,450

I really want to have that navigation bar at the top.



146

00:09:08,470 --> 00:09:12,400

Let's do that first, because we need a means of getting around the various pages of our site.



147

00:09:12,850 --> 00:09:13,200

All right.



148

00:09:13,210 --> 00:09:16,180

I'm in the documentation for Bootstrap and I'm going to go down.



149

00:09:16,180 --> 00:09:17,200

Is it on your layout?



150

00:09:17,740 --> 00:09:19,080

Layout says Grid.



151

00:09:19,090 --> 00:09:22,660

Now, we're talking about the grid right now, so we'll come back to that content.



152

00:09:23,650 --> 00:09:26,170

Typography, code, images, tables now.



153

00:09:26,170 --> 00:09:28,960

Components, components.



154

00:09:29,830 --> 00:09:31,690

No, that's what we want right there.



155

00:09:31,710 --> 00:09:32,430

So let's look at that.



156

00:09:33,400 --> 00:09:37,450

So it describes it and it says Navarros require a rapid navaira, blah, blah, blah.



157

00:09:37,450 --> 00:09:37,750

Good.



158

00:09:37,780 --> 00:09:39,520

We'll just scroll down to look for the example.



159

00:09:39,520 --> 00:09:40,450

Here's an example.



160

00:09:40,450 --> 00:09:45,370

I'm going to copy this entire example, which I can do by clicking copy.



161

00:09:45,850 --> 00:09:48,460

And I will put that up here.



162

00:09:48,460 --> 00:09:50,920

Let's put it outside of the container, see how that works.



163

00:09:50,930 --> 00:09:52,060

OK, so there it is.



164

00:09:52,570 --> 00:09:55,180

I'm not going to bother formatting this right now because I'm going to change it.



165

00:09:55,450 --> 00:09:57,910

Let's go back and reload and see what happens.



166

00:09:58,990 --> 00:10:02,440

OK, so I now have a drop down menu.



167

00:10:02,470 --> 00:10:03,700

I have a home button.



168

00:10:03,700 --> 00:10:04,870

I have great.



169

00:10:04,870 --> 00:10:06,640

OK, maybe I don't like that color.



170

00:10:06,640 --> 00:10:08,110

Can I do anything else with this.



171

00:10:08,110 --> 00:10:09,790

Let's go back to never.



172

00:10:10,120 --> 00:10:12,010

So that's really not the color that I want.



173

00:10:12,820 --> 00:10:15,220

I want a darker no just because I do.



174

00:10:15,760 --> 00:10:18,370

Let's keep going and see if we can find a color schemes.



175

00:10:18,820 --> 00:10:20,680

Theming for the Naver has never been easier.



176

00:10:20,680 --> 00:10:21,310

Blah blah blah.



177

00:10:21,310 --> 00:10:22,570

Background, color, utilities.



178

00:10:22,570 --> 00:10:28,810

So it says nav class equals nav bar, nav bar dash dark and big dark.



179

00:10:28,810 --> 00:10:29,480

Let's try that one.



180

00:10:29,830 --> 00:10:30,730

So where does that go.



181

00:10:30,730 --> 00:10:31,930

That's this.



182

00:10:32,290 --> 00:10:34,000

The nav class equals.



183

00:10:34,000 --> 00:10:36,700

Do we have a now class equals we do.



184

00:10:36,910 --> 00:10:37,480

All right.



185

00:10:37,480 --> 00:10:38,800

Now he's got naver.



186

00:10:39,340 --> 00:10:44,740

When we copied we had never light and light and here they have never dark.



187

00:10:44,740 --> 00:10:50,530

And Wigdor let's just replace those two parts because the other classes are probably doing something



188

00:10:50,800 --> 00:10:52,510

and I'm not going to overwrite them.



189

00:10:52,510 --> 00:10:56,920

So let's pace that save go back and reload our page.



190

00:10:58,960 --> 00:11:00,070

OK, it's darker.



191

00:11:00,070 --> 00:11:00,790

That looks better.



192

00:11:00,940 --> 00:11:01,570

Excellent.



193

00:11:01,570 --> 00:11:04,300

OK, I don't want this search bar for right now, so let's get rid of that.



194

00:11:05,740 --> 00:11:08,200

And that appears to be right here.



195

00:11:09,850 --> 00:11:11,170

Form class equals.



196

00:11:11,170 --> 00:11:12,190

Yeah, that's my search.



197

00:11:12,190 --> 00:11:14,770

OK, and it's got a starting form Tegana closing a form tag.



198

00:11:14,770 --> 00:11:17,620

Let's delete that and reload it.



199

00:11:17,860 --> 00:11:21,370

OK, and now we have some links here so we have a home.



200

00:11:21,370 --> 00:11:23,770

We definitely want that to be our home page.



201

00:11:23,800 --> 00:11:27,130

OK, and we're going to want that.



202

00:11:27,130 --> 00:11:28,600

I'm not going to worry about this thing right now.



203

00:11:28,600 --> 00:11:29,500

We'll change that later.



204

00:11:29,650 --> 00:11:31,510

Link dropdown disabled.



205

00:11:31,810 --> 00:11:33,520

So let's have what are we going to have?



206

00:11:33,520 --> 00:11:38,170

We're going to have our homepage, which is what we're working on right now.



207

00:11:38,620 --> 00:11:40,120

And what other pages are we going to have?



208

00:11:40,120 --> 00:11:42,280

Well, we have to have a page maybe about.



209

00:11:42,280 --> 00:11:45,420

So let's change that link to about.



210

00:11:46,060 --> 00:11:47,110

So let's find Link.



211

00:11:47,290 --> 00:11:52,090

We'll change it to about an all I have to do is change the Texas between the tags.



212

00:11:52,420 --> 00:11:54,970

So about home is fine.



213

00:11:54,970 --> 00:11:55,870

I can leave that alone.



214

00:11:55,990 --> 00:11:58,810

And then we have this dropdown, but I don't want to call it dropdown.



215

00:11:58,840 --> 00:12:00,220

That's this menu right here.



216

00:12:00,550 --> 00:12:03,580

Maybe I'll make that for my rooms, rooms.



217

00:12:05,110 --> 00:12:06,520

And how many rooms are we going to have?



218

00:12:06,520 --> 00:12:07,450

We're going to have two.



219

00:12:07,900 --> 00:12:09,790

So let's say room number one.



220

00:12:09,880 --> 00:12:12,490

Now we have to come up with a good name for our room.



221

00:12:12,490 --> 00:12:16,990

So let's go with the generals quarters.



222

00:12:17,740 --> 00:12:19,780

And I'm just making this stuff up.



223

00:12:20,080 --> 00:12:25,100

And the second one will be Colonel COLB in detail.



224

00:12:25,180 --> 00:12:26,050

How do you spell Colonel?



225

00:12:26,050 --> 00:12:26,740

I can't do that.



226

00:12:26,740 --> 00:12:32,290

So let's go with Major Major's suite and then I don't care about these things, so I'll just delete



227

00:12:32,290 --> 00:12:32,620

those.



228

00:12:34,270 --> 00:12:35,230

Let's save that.



229

00:12:35,470 --> 00:12:41,530

And I don't care about the disabled, but maybe I want that to not be disabled and I want to have a



230

00:12:41,530 --> 00:12:42,430

contact page.



231

00:12:44,420 --> 00:12:45,360

Seems to be useful.



232

00:12:45,490 --> 00:12:48,430

It would be useful to have people give people a way to contact us.



233

00:12:48,700 --> 00:12:49,480

Let's reload this.



234

00:12:50,710 --> 00:12:51,150

All right.



235

00:12:51,160 --> 00:12:57,040

So we have never which will fix at some point home about rooms and contact and rooms, gives us general



236

00:12:57,040 --> 00:12:58,180

quarters a major suite.



237

00:12:58,330 --> 00:12:58,800

All right.



238

00:12:59,380 --> 00:13:01,510

Now, these are currently link.



239

00:13:01,510 --> 00:13:04,660

If you look at the home page, for example, here's the home page.



240

00:13:04,840 --> 00:13:09,160

It links to hash, which means don't do anything that just don't go anywhere.



241

00:13:09,290 --> 00:13:13,010

Actually, in some cases, if you're way down on the page.



242

00:13:13,030 --> 00:13:15,950

If you have a long page and you click on that, it will actually jump you to the top.



243

00:13:15,970 --> 00:13:16,830

Well, that's not what I want.



244

00:13:17,080 --> 00:13:19,450

I want this to go to the homepage of my site.



245

00:13:19,990 --> 00:13:27,400

And by default, pretty much every site out there uses this slash for your homepage, the same as when



246

00:13:27,400 --> 00:13:35,350

we if you go to Apple dot com or unbe Ambedkar or Google dot com, you don't have to put anything after



247

00:13:35,350 --> 00:13:36,040

the domain name.



248

00:13:36,370 --> 00:13:41,520

And if you just put a slash, it just says go to the default page for this site.



249

00:13:41,650 --> 00:13:42,820

So we'll leave it there.



250

00:13:43,730 --> 00:13:51,130

Well I think a good you URL for that would be slash above and down here where we have general quarters



251

00:13:51,130 --> 00:13:52,180

and Meijers.



252

00:13:52,180 --> 00:13:52,690

Sweet.



253

00:13:53,050 --> 00:14:00,760

I'm going to put those like this room's generals quarters with no punctuation other than the hyphen



254

00:14:01,570 --> 00:14:06,970

and for the major suite algo rooms, majors suite.



255

00:14:06,970 --> 00:14:09,490

And again, no no apostrophe in there.



256

00:14:09,490 --> 00:14:10,090

You don't want that.



257

00:14:10,090 --> 00:14:12,070

You just want to go with letters and dashes.



258

00:14:12,350 --> 00:14:14,470

That's the simplest and safest way to go with it.



259

00:14:14,470 --> 00:14:15,490

Or numbers for that matter.



260

00:14:16,090 --> 00:14:20,320

And contact will be slash contact, of course, slash contact.



261

00:14:20,420 --> 00:14:25,270

I can change these at any point, but for right now, let's make sure these actually would point to



262

00:14:25,270 --> 00:14:25,960

those pages.



263

00:14:25,960 --> 00:14:31,960

So if I go to rooms and roll over generals quarters and look down on the very bottom right hand corner



264

00:14:31,960 --> 00:14:36,430

of my window, it says, yes, it's going to go to slash room, slash generals quarters, good contact



265

00:14:36,430 --> 00:14:43,790

will go to slash contact, major suite, major suite, a boat, a boat and home takes me to the default.



266

00:14:43,930 --> 00:14:45,550

OK, so I have a navigation bar.



267

00:14:45,550 --> 00:14:47,800

I don't have anything to link to yet except for the home page.



268

00:14:47,800 --> 00:14:50,550

I can click on that and that takes me to here.



269

00:14:51,100 --> 00:14:53,830

So but it will on a web server, take me where it's supposed to go.



270

00:14:54,550 --> 00:14:56,140

So I know that's actually going to work.



271

00:14:57,030 --> 00:14:57,520

All right.



272

00:14:57,550 --> 00:14:59,410

Now let's put some other things in here.



273

00:14:59,420 --> 00:15:02,020

One of the things that I said I wanted was a carousel.



274

00:15:02,290 --> 00:15:09,850

And if you go back to the the documentation and you look under components in bootstrap, you're going



275

00:15:09,850 --> 00:15:11,140

to find Carousel right there.



276

00:15:11,630 --> 00:15:12,030

All right.



277

00:15:12,400 --> 00:15:13,240

And a carousel.



278

00:15:13,240 --> 00:15:13,990

How it works.



279

00:15:13,990 --> 00:15:14,860

I can read all that.



280

00:15:14,860 --> 00:15:16,630

You can read about all that at your leisure.



281

00:15:16,850 --> 00:15:18,880

What I want, again, is an example.



282

00:15:18,880 --> 00:15:20,500

So I'm going to copy this example.



283

00:15:24,050 --> 00:15:29,060

Again, I'm going to click copy button and go back here and think about where I want it, do I want



284

00:15:29,060 --> 00:15:30,290

it inside the container?



285

00:15:30,350 --> 00:15:31,260

Let's try that first.



286

00:15:31,280 --> 00:15:38,240

OK, so if I pasted in here and formatted a little bit better, so I'll just move it over like that.



287

00:15:39,230 --> 00:15:44,060

And I have div id equals carrousel example slides only.



288

00:15:44,240 --> 00:15:46,840

OK, I'm not sure what that is yet, but I'll leave it alone.



289

00:15:47,090 --> 00:15:50,280

Classes carousel slide data ride equals carousel.



290

00:15:50,570 --> 00:15:51,020

All right.



291

00:15:51,020 --> 00:15:52,530

We have image source.



292

00:15:52,550 --> 00:15:58,250

Well I actually can't use dot dot dot for the image source in HTML.



293

00:15:58,820 --> 00:16:05,060

When you want a picture on your, on anywhere on your page you have to give it a source and a source



294

00:16:05,060 --> 00:16:09,020

can be a complete you if you're pointing to an image on somebody else's site.



295

00:16:09,020 --> 00:16:09,860

But that's impolite.



296

00:16:09,860 --> 00:16:11,900

So don't do that more often.



297

00:16:12,080 --> 00:16:18,200

It's a relative you URL that says look on this server and look in this path for the images.



298

00:16:18,260 --> 00:16:20,750

Now I'm going to go over here.



299

00:16:21,140 --> 00:16:23,150

We put in our working e-mail folder.



300

00:16:23,150 --> 00:16:24,620

We created a static folder.



301

00:16:24,620 --> 00:16:32,950

Inside of that, we have images and then we have outside ping, tray, ping and woman Dasch laptop ping.



302

00:16:32,960 --> 00:16:35,150

Let's go with that one first woman dash laptop.



303

00:16:35,330 --> 00:16:36,830

So I'll put in my path name.



304

00:16:37,520 --> 00:16:44,240

And because my file, which is this is right here and inside of that, are right beside that is a folder



305

00:16:44,240 --> 00:16:46,370

called Static and then a folder called Images.



306

00:16:46,550 --> 00:16:48,560

And then we have a woman laptop typing.



307

00:16:48,560 --> 00:16:51,890

I'll just copy that first part of the name, save myself some typing.



308

00:16:51,890 --> 00:17:00,860

So when I was going to go to static images, woman laptop typing and alt, this is the alternative text.



309

00:17:00,860 --> 00:17:05,510

If somebody is using a browser with images disabled, as sometimes people do, if they have very slow



310

00:17:05,510 --> 00:17:08,120

bandwidth, you need to give it some descriptive text.



311

00:17:08,270 --> 00:17:11,120

So I'll just put a woman and laptop.



312

00:17:12,510 --> 00:17:17,660

OK, now I'm not sure what the class block 100 are, but I'll figure that out later.



313

00:17:18,020 --> 00:17:23,420

I need to have my second image, so I'll just copy this to save some typing and we will paste this in



314

00:17:23,420 --> 00:17:26,230

here and we'll change the image bit in a minute.



315

00:17:26,750 --> 00:17:29,930

What were the other two images called Treh and outside?



316

00:17:30,620 --> 00:17:31,040

So.



317

00:17:33,500 --> 00:17:45,890

Outside and Trey, all right, and here we should put in some alternative text trade with coffee and



318

00:17:47,800 --> 00:17:52,610

it doesn't matter what I'm putting in there right now, but I'm going to say that, OK, so I've saved



319

00:17:52,610 --> 00:17:52,770

it.



320

00:17:53,150 --> 00:17:54,600

Is there anything else I need to do?



321

00:17:54,650 --> 00:17:56,660

Let's go back and look at the documentation.



322

00:17:57,290 --> 00:17:59,980

OK, so we have this I says with controls.



323

00:17:59,990 --> 00:18:01,730

Well, I won't worry about the controls right now.



324

00:18:01,850 --> 00:18:04,160

Let's just reload the page and see what happens.



325

00:18:05,390 --> 00:18:06,380

Oh, it didn't work.



326

00:18:06,830 --> 00:18:12,680

So woman and laptop, it didn't work because I started with a slash here, which I'm going to have to



327

00:18:12,680 --> 00:18:15,140

do in the final version of this.



328

00:18:15,290 --> 00:18:19,400

But because I'm not actually serving this from a real Web server, I'm just loading a local file, I



329

00:18:19,400 --> 00:18:21,110

need to remove that opening.



330

00:18:22,250 --> 00:18:23,210

All right, let's try that again.



331

00:18:24,410 --> 00:18:25,190

Hey, look at that.



332

00:18:25,190 --> 00:18:25,910

I have a picture.



333

00:18:28,700 --> 00:18:29,540

Is it going to move?



334

00:18:31,070 --> 00:18:32,100

Yes, it did.



335

00:18:32,170 --> 00:18:34,970

OK, it was very slow, but it slid left or right.



336

00:18:35,300 --> 00:18:39,830

I now have a picture, but really I need those pictures pretty big.



337

00:18:39,840 --> 00:18:45,080

And if you open them up in Photoshop or your favorite editor, I really don't want this space on the



338

00:18:45,380 --> 00:18:46,970

right and on the left.



339

00:18:47,190 --> 00:18:48,590

Is there any way I can get rid of that?



340

00:18:48,680 --> 00:18:52,550

Well, a minute ago I said, should we put this inside the container?



341

00:18:52,550 --> 00:18:53,350

And we did.



342

00:18:53,360 --> 00:18:58,530

But because it's intact inside the container, it actually adds that spacing on the left and the right.



343

00:18:58,550 --> 00:19:07,460

So let's move it out of there and format a little better and save this and get rid of these spaces and



344

00:19:07,460 --> 00:19:08,540

let's see what happens now.



345

00:19:09,350 --> 00:19:12,450

Wow, that's pretty big, but that looks good.



346

00:19:12,470 --> 00:19:14,780

It actually takes up almost the entire screen.



347

00:19:15,500 --> 00:19:22,250

OK, but when I looked at the preview for the carousel on the bootstrap site, it actually allowed me



348

00:19:22,250 --> 00:19:23,640

to have text over top of it.



349

00:19:23,660 --> 00:19:25,280

Can I have text over top of it?



350

00:19:25,310 --> 00:19:31,460

Well, let's go back to her bootstrap site and go down and see if there's any more examples with Indicator's.



351

00:19:32,990 --> 00:19:33,830

What's this down here?



352

00:19:33,860 --> 00:19:36,800

Those are just indicators with captions, with captions.



353

00:19:37,520 --> 00:19:38,000

Here we are.



354

00:19:38,000 --> 00:19:38,540

Captions.



355

00:19:38,540 --> 00:19:39,540

Maybe I can do it that way.



356

00:19:39,950 --> 00:19:41,900

So what they include is the inside.



357

00:19:41,910 --> 00:19:42,580

Let's go back here.



358

00:19:42,590 --> 00:19:44,630

They have a div with these indicators.



359

00:19:45,230 --> 00:19:47,420

Oh, copy those two just to see what happens.



360

00:19:48,740 --> 00:19:53,020

And where did those go right after the opening div tag.



361

00:19:53,150 --> 00:19:55,970

So they have three slides and so do I.



362

00:19:55,970 --> 00:20:01,430

So I should be able to put my indicators right here that let's just try that first before we try to



363

00:20:01,430 --> 00:20:02,970

get the text working properly.



364

00:20:04,130 --> 00:20:05,750

OK, that back.



365

00:20:07,170 --> 00:20:14,340

For about that later, OK, so this says, well, let's look at this again, carrousel example, captions,



366

00:20:14,340 --> 00:20:20,310

carrousel example, captions, carrousel example, captions that says my target is carrousel example,



367

00:20:20,310 --> 00:20:20,880

captions.



368

00:20:21,720 --> 00:20:23,010

Let's go back and look at theirs again.



369

00:20:23,490 --> 00:20:25,140

Where's their carrousel example?



370

00:20:25,140 --> 00:20:26,010

Captions.



371

00:20:28,290 --> 00:20:37,260

I'm sorry to hear so what I need to do is make this match these so I'm going to call this just my main



372

00:20:37,620 --> 00:20:39,720

carrousel and that is an ID.



373

00:20:39,750 --> 00:20:45,030

And the thing about IDs is that they have to be unique on the page.



374

00:20:45,030 --> 00:20:48,660

So you can't have what you can, but you shouldn't have to.



375

00:20:48,660 --> 00:20:53,330

IDs exactly the same for any two elements on your Web page.



376

00:20:53,610 --> 00:20:59,910

And I'm saying here, when I click on this, apparently it's going to go to whatever ID is specified



377

00:20:59,910 --> 00:21:00,120

here.



378

00:21:00,120 --> 00:21:05,280

So I'm going to copy this, which doesn't have a hash tag and I'm going to pasted here.



379

00:21:05,280 --> 00:21:06,930

But leave the hash tag.



380

00:21:06,930 --> 00:21:11,010

I'll do the same thing here and the same thing here.



381

00:21:12,870 --> 00:21:19,470

And the same thing here, so now it apparently when I click on whatever this indicator is, it's going



382

00:21:19,470 --> 00:21:23,430

to take me to Main Carasso, main Carasso, OK, down here.



383

00:21:23,430 --> 00:21:26,730

Do I have any other examples of those ideas?



384

00:21:27,360 --> 00:21:33,800

Noxubee OK, so let's see what happens when I reload my page, reload and there are my indicators.



385

00:21:33,810 --> 00:21:34,620

And do they work.



386

00:21:35,190 --> 00:21:35,760

They do.



387

00:21:36,000 --> 00:21:37,390

I can jump all over the place.



388

00:21:37,590 --> 00:21:38,160

Perfect.



389

00:21:38,250 --> 00:21:43,920

OK, now we wanted to get back to our captions, so let's find out how they did these captions so they



390

00:21:43,920 --> 00:21:46,200

have carrousel inor.



391

00:21:46,200 --> 00:21:53,100

Do I have a carrousel error or do you write here they have image and then they have this, this is some



392

00:21:53,100 --> 00:21:54,420

text was copy that.



393

00:21:56,010 --> 00:22:01,700

And it went right after the image and before the closing tag for the carousel item.



394

00:22:02,190 --> 00:22:06,390

So after the image and before the closing tag.



395

00:22:06,630 --> 00:22:08,310

So that says second slide.



396

00:22:08,310 --> 00:22:08,940

That's not good.



397

00:22:09,660 --> 00:22:13,850

Let's call this first slide and I'll just copy this.



398

00:22:14,880 --> 00:22:16,890

So it was here.



399

00:22:16,890 --> 00:22:18,740

Div class equals Carasso item.



400

00:22:19,590 --> 00:22:23,630

So this div matches that and these are inside there.



401

00:22:24,180 --> 00:22:29,310

Let's copy that and do it for a second right after the image.



402

00:22:30,010 --> 00:22:31,470

We'll call it second



403

00:22:34,200 --> 00:22:38,980

and the third right after the image third.



404

00:22:40,590 --> 00:22:42,720

OK, let's save it and see what happens.



405

00:22:42,720 --> 00:22:43,610

Reload the page.



406

00:22:44,100 --> 00:22:45,120

Hey I have some text.



407

00:22:45,390 --> 00:22:46,710

It's not formatted the way I want.



408

00:22:46,710 --> 00:22:49,350

It's hard to read with the background, but I have text there.



409

00:22:49,350 --> 00:22:50,730

I can do the formatting later.



410

00:22:51,090 --> 00:22:52,860

And second and third.



411

00:22:52,860 --> 00:22:53,850

It works great.



412

00:22:54,330 --> 00:22:54,960

Perfect.



413

00:22:55,600 --> 00:22:56,130

All right.



414

00:22:56,130 --> 00:23:03,090

So we now have a navigation bar at the top which disappears.



415

00:23:04,060 --> 00:23:04,890

We'll fix that later.



416

00:23:04,890 --> 00:23:06,510

OK, there must be a way to make that stick there.



417

00:23:06,840 --> 00:23:08,610

Then we have some text underneath this.



418

00:23:08,610 --> 00:23:15,450

What is text isn't great and I probably want a little bit of space between this slide, the carousel



419

00:23:15,450 --> 00:23:17,430

at the top and whatever I put below it.



420

00:23:17,730 --> 00:23:19,890

So let's have a look at how we might do that.



421

00:23:19,890 --> 00:23:24,480

First of all, I don't need two columns here, so I just get rid of this first thing altogether.



422

00:23:24,480 --> 00:23:28,590

This first div class equals row and I want some space there.



423

00:23:29,220 --> 00:23:31,740

Div class equals row, div class equals call.



424

00:23:31,740 --> 00:23:33,420

So let's give it a title to start with.



425

00:23:33,690 --> 00:23:35,190

Each one will be a title.



426

00:23:35,550 --> 00:23:42,360

Welcome to and we need to have a name for our bed and breakfast and we'll just make something up.



427

00:23:42,360 --> 00:23:43,300

What shall I call this.



428

00:23:43,320 --> 00:23:44,160

Welcome to.



429

00:23:44,400 --> 00:23:48,990

Well I used military titles for the rum majors and generals and things like that.



430

00:23:49,260 --> 00:24:00,300

So welcome to Fort and I need a name for Smyth Bed and Breakfast.



431

00:24:00,600 --> 00:24:03,570

And I close my check and then I'll just put some text in here.



432

00:24:08,540 --> 00:24:17,210

Your home away from home and again, I don't care what this says, your home away from home set on the



433

00:24:17,210 --> 00:24:22,250

majestic waters of the Atlantic Ocean.



434

00:24:26,240 --> 00:24:31,100

This will be a vacation to remember.



435

00:24:31,160 --> 00:24:31,770

That's enough for now.



436

00:24:32,060 --> 00:24:35,800

I don't really care what that text says, and I'm not really actually going to be booking any rooms.



437

00:24:35,810 --> 00:24:37,550

I'm just demonstrating how things might work.



438

00:24:37,560 --> 00:24:39,510

So let's before we go any further, let's save that.



439

00:24:40,220 --> 00:24:41,000

So there it is.



440

00:24:41,030 --> 00:24:43,310

OK, maybe that should be centered.



441

00:24:43,820 --> 00:24:45,830

And I can do that really easily.



442

00:24:45,830 --> 00:24:51,270

In bootstrapped class equals text center, text center.



443

00:24:51,350 --> 00:24:56,210

So I'm adding one of bootstraps building classes and I'm saving for this H1 tag.



444

00:24:56,330 --> 00:25:01,280

I want you to send it text center does that for text and it's now centered.



445

00:25:01,580 --> 00:25:03,860

And I also want some space on top of it.



446

00:25:03,860 --> 00:25:08,080

And here's some really useful utility classes that are built into bootstrap.



447

00:25:08,330 --> 00:25:15,950

I want a margin at the top of this element, the H1 tag, and I want it to be choose a number between



448

00:25:15,950 --> 00:25:16,610

one of five.



449

00:25:16,620 --> 00:25:22,400

Let's try three margin top three and look at moved it down maybe a little bit more.



450

00:25:22,400 --> 00:25:25,960

Margin top for save.



451

00:25:25,970 --> 00:25:26,720

Go back now.



452

00:25:26,720 --> 00:25:27,780

Sits right here right now.



453

00:25:27,800 --> 00:25:30,890

Put my cursor right beside it so you can see how tall it is.



454

00:25:31,160 --> 00:25:34,130

And when I reload the page it moves it down a little bit more than that.



455

00:25:34,140 --> 00:25:35,450

Spacing looks a little bit better.



456

00:25:36,740 --> 00:25:40,340

I really don't need those right column in the left column, so let's get rid of those.



457

00:25:43,370 --> 00:25:48,290

And now what do we want to have after that, we'd probably want some pictures of our rooms, but we



458

00:25:48,290 --> 00:25:53,270

haven't don't have those yet, so I'll just put a little bit more text in here so it looks a little



459

00:25:53,270 --> 00:25:53,690

bit better.



460

00:25:53,690 --> 00:25:56,360

Maybe you want a full paragraph or two.



461

00:25:56,450 --> 00:26:02,690

So copy this and I will simply return and paste and return a paste.



462

00:26:03,620 --> 00:26:08,090

And because as we said before, each trial ignores those spaces.



463

00:26:08,090 --> 00:26:13,190

Even though I have this formatted really badly, it should look like real text.



464

00:26:13,190 --> 00:26:14,000

And it does.



465

00:26:14,000 --> 00:26:16,490

It puts the space in there and ignores the multiple spaces.



466

00:26:16,550 --> 00:26:18,120

OK, so that's enough to get me started.



467

00:26:18,350 --> 00:26:20,990

I've now created a landing page.



468

00:26:21,410 --> 00:26:23,420

Is there anything missing from here?



469

00:26:23,690 --> 00:26:27,040

Well, I have my neighbor, which is going to go away soon.



470

00:26:27,350 --> 00:26:28,700

I have a link to the home page.



471

00:26:28,700 --> 00:26:30,080

I have a link to the ABOUT page.



472

00:26:30,080 --> 00:26:36,230

I can show the rooms I need to create all of these pages, of course, and I can contact maybe I should



473

00:26:36,230 --> 00:26:37,010

think this through.



474

00:26:37,010 --> 00:26:42,820

Shouldn't I have a means of booking or making a reservation right from the home page?



475

00:26:42,830 --> 00:26:43,440

Yeah, I should.



476

00:26:43,460 --> 00:26:51,230

So let's go in here back to our neighbor at the top and let's find this part right here, which is contact



477

00:26:51,380 --> 00:26:53,570

and copy that and paste it.



478

00:26:53,810 --> 00:27:01,020

And I'll just call it book now and I'll make that you URL slash, make a reservation.



479

00:27:02,450 --> 00:27:02,910

OK.



480

00:27:03,500 --> 00:27:06,050

And if I reload that now I have a book now.



481

00:27:06,050 --> 00:27:06,620

Perfect.



482

00:27:06,620 --> 00:27:07,580

And I have a contact.



483

00:27:08,060 --> 00:27:12,890

OK, and maybe I should put a call out down here in another section.



484

00:27:12,890 --> 00:27:13,660

Another row.



485

00:27:14,060 --> 00:27:18,970

So let's go down here and I'm going to make a call it that invites people to make a reservation.



486

00:27:18,980 --> 00:27:23,540

So first thing I'll do is leave all these to the left, then move them this way just so it looks a little



487

00:27:23,540 --> 00:27:24,080

bit better.



488

00:27:24,470 --> 00:27:28,070

And I'll put my T.P tags on their own lines just so again.



489

00:27:28,070 --> 00:27:30,920

So it's formatted better and then I'll create another row.



490

00:27:31,160 --> 00:27:36,770

So I would say do class equals row and it does have to be lower.



491

00:27:36,770 --> 00:27:39,050

Case class names are case sensitive.



492

00:27:39,540 --> 00:27:49,730

Have a closing div inside of that I will make a column div class equals call and I want the content



493

00:27:49,730 --> 00:27:50,630

of this to be centered.



494

00:27:50,630 --> 00:27:56,500

So I will also put the text center in this and I'll have a closing two.



495

00:27:56,810 --> 00:27:59,060

Now what can we put in there that's going to get people's attention.



496

00:27:59,090 --> 00:28:03,770

Let's go see what bootstrap gives us and what we might be able to make it take advantage of.



497

00:28:04,220 --> 00:28:05,770

So let's look here now.



498

00:28:05,810 --> 00:28:09,710

Ba Popover Spinner's Tostes tooltip.



499

00:28:09,720 --> 00:28:14,510

There's got to be something here that will actually do it for us while buttons buttons will be nice.



500

00:28:14,930 --> 00:28:15,740

Let's try buttons.



501

00:28:16,880 --> 00:28:19,910

Oh look, we have these nice buttons, different styles.



502

00:28:20,270 --> 00:28:23,050

All right, so let's say what color do we want on our page.



503

00:28:23,060 --> 00:28:24,350

Let's go back here and look again.



504

00:28:26,570 --> 00:28:31,790

Well we have dark colors here then we have dark colors here is kind of bland so far.



505

00:28:31,970 --> 00:28:34,340

Let's make it something that's going to catch people's attention.



506

00:28:34,340 --> 00:28:37,220

So I will choose this green color.



507

00:28:37,250 --> 00:28:37,820

Green is good.



508

00:28:37,820 --> 00:28:38,630

That's success.



509

00:28:38,630 --> 00:28:40,550

And here's an example of a button.



510

00:28:41,090 --> 00:28:43,070

Now, there's actually a couple of ways of doing this.



511

00:28:43,460 --> 00:28:46,580

I'm going to show you both OK, down here.



512

00:28:47,090 --> 00:28:52,730

I will, first of all, just stick the button in exactly as they happen, but I'll change the lead.



513

00:28:53,070 --> 00:28:54,110

I chose the wrong one.



514

00:28:54,110 --> 00:28:58,830

I want to success make it.



515

00:28:58,850 --> 00:28:59,330

Absolutely.



516

00:28:59,510 --> 00:28:59,800

Yeah.



517

00:28:59,840 --> 00:29:02,210

Make reservation.



518

00:29:02,210 --> 00:29:03,640

No reservation.



519

00:29:03,640 --> 00:29:03,810

No.



520

00:29:03,830 --> 00:29:04,940

OK, so there's a button.



521

00:29:05,360 --> 00:29:10,100

And if I come back here and reload this page and scroll down, I have to make a reservation now that's



522

00:29:10,100 --> 00:29:10,490

OK.



523

00:29:11,360 --> 00:29:14,420

But maybe I want to do it a little differently.



524

00:29:14,450 --> 00:29:18,170

This is a button I really needed to link to the Make Reservation page.



525

00:29:18,170 --> 00:29:23,660

Well, the cool thing is I can actually apply the button style in two and a half to a standard link



526

00:29:23,970 --> 00:29:28,850

a HSF equals, and it's going to go to what do we call that link up here?



527

00:29:29,420 --> 00:29:30,440

Make reservations.



528

00:29:30,440 --> 00:29:31,280

Let me copy that.



529

00:29:32,300 --> 00:29:37,490

Come down here, paste it in here and I will add a class to this.



530

00:29:37,490 --> 00:29:41,900

A class equals button button success.



531

00:29:44,180 --> 00:29:51,800

And then I just put my text make reservation now, but I'm not closing a button.



532

00:29:51,800 --> 00:29:52,580

I'm closing in eight.



533

00:29:52,790 --> 00:29:56,680

So if I say that and come back here, I should have two buttons that look exactly the same.



534

00:29:57,020 --> 00:30:01,580

This one is a button which is normally used to submit a form or something like that.



535

00:30:01,970 --> 00:30:03,440

And this one is just a link.



536

00:30:03,890 --> 00:30:05,270

And I want the link.



537

00:30:05,270 --> 00:30:06,890

I'm not actually submitting a form here.



538

00:30:06,890 --> 00:30:08,360

I'm not filling anything out.



539

00:30:08,510 --> 00:30:09,380

So I'll get rid of that one.



540

00:30:10,730 --> 00:30:16,370

And the last thing I want to point to is that the bottom of my page is really it just kind of stops.



541

00:30:16,910 --> 00:30:19,670

And normally when you go to Web pages, each page has a flutter.



542

00:30:19,880 --> 00:30:21,530

So let's put a footer in here, OK?



543

00:30:22,070 --> 00:30:34,040

And we can do it just using a standard div so we can go div class equals row div class equals call close



544

00:30:34,040 --> 00:30:35,600

that div and close to death.



545

00:30:35,810 --> 00:30:36,980

But I'm going to do something else here.



546

00:30:37,010 --> 00:30:41,930

I'm going to give it a class of my footer which doesn't exist.



547

00:30:42,530 --> 00:30:46,820

Now, what happens if I put something in here like this and I say, well, I'm going to have actually



548

00:30:46,820 --> 00:30:50,860

two collapse, I'll have one on the left and one on the right path, recalls one of the middle tip.



549

00:30:50,860 --> 00:30:58,010

So I will copy this paste paste and this will be left.



550

00:30:58,970 --> 00:31:01,160

This will be middle.



551

00:31:01,760 --> 00:31:02,750

And this will be.



552

00:31:04,640 --> 00:31:11,230

Right now, if I say that and reload the page, I actually get left middle and right, huh?



553

00:31:11,460 --> 00:31:13,250

Again, this is all formatted in here.



554

00:31:13,260 --> 00:31:19,070

I want my footer to extend to the edges of the screen, just like it does at the top.



555

00:31:19,460 --> 00:31:20,190

And how do we do that?



556

00:31:20,210 --> 00:31:26,450

Well, we already know we can take this out of here, cut it and put it outside of the closing container



557

00:31:26,460 --> 00:31:31,860

div and this closes this the container.



558

00:31:31,860 --> 00:31:36,890

And remember, the container draws things in from the left and the right, and if it does it to help



559

00:31:36,890 --> 00:31:39,690

format things on different screens properly.



560

00:31:39,710 --> 00:31:43,840

So now I'm going to put my footer outside of that and see does it extend it.



561

00:31:43,850 --> 00:31:45,900

And now it does extend to the left and the right.



562

00:31:46,340 --> 00:31:49,250

Now, I gave this a class of my footer.



563

00:31:49,910 --> 00:31:50,990

Why would I do that?



564

00:31:50,990 --> 00:31:52,790

And we're going to talk more about success later.



565

00:31:52,910 --> 00:31:54,950

But let's just have a quick look at it right now.



566

00:31:55,260 --> 00:32:02,420

I can include cascading style sheets like boot straps using this fancy syntax link, reliquaries style



567

00:32:02,420 --> 00:32:03,770

sheet that tells a style.



568

00:32:03,880 --> 00:32:05,960

Then it tells it where on the Internet to go and get it.



569

00:32:05,970 --> 00:32:12,380

So we're going to boot straps, CSS files on some site called CD bags delivered on it.



570

00:32:12,380 --> 00:32:19,220

But I can also to find my own styles right up here inside the head tag, I can say style with a closing



571

00:32:19,220 --> 00:32:19,940

tag style.



572

00:32:20,370 --> 00:32:28,490

And down here at the bottom in my footer, I've given this class this div a class of my footer.



573

00:32:28,500 --> 00:32:29,450

Well, let's copy that.



574

00:32:30,830 --> 00:32:31,700

And come up here.



575

00:32:33,440 --> 00:32:38,120

And paste its name in, but I'm going to start with a dot, because you have to when you're talking



576

00:32:38,120 --> 00:32:41,900

about CSFs classes that you define yourself, they start with a dot.



577

00:32:42,360 --> 00:32:45,400

I can redefine other things in CSFs, for example.



578

00:32:45,410 --> 00:32:46,510

We will do this in a minute.



579

00:32:46,670 --> 00:32:49,840

I can redefine the contents or the styling of a paragraph.



580

00:32:50,300 --> 00:32:51,350

It doesn't have a dot.



581

00:32:51,560 --> 00:32:56,900

Therefore, it says, oh, you're talking about one of the HTML tags that exist as part of the standard



582

00:32:57,320 --> 00:32:58,820

which the P tag happens to be.



583

00:32:58,830 --> 00:33:00,410

But I'm dealing with my footer right now.



584

00:33:00,860 --> 00:33:05,630

So let's explore these in more detail when we talk about success a bit later on.



585

00:33:05,900 --> 00:33:07,400

But let's try a couple of things.



586

00:33:07,400 --> 00:33:08,750

I'm going to say a background.



587

00:33:12,740 --> 00:33:17,030

Color and I'm going to give it a color and the color right now, I could just say red.



588

00:33:17,150 --> 00:33:17,700

I'll do that.



589

00:33:17,720 --> 00:33:19,420

It's going to be really ugly, just so you know.



590

00:33:19,700 --> 00:33:20,730

But let's go back here.



591

00:33:20,870 --> 00:33:22,490

We save that, reload the page.



592

00:33:22,490 --> 00:33:25,550

And look, my background for my footer is now red.



593

00:33:25,940 --> 00:33:26,880

Well, that's kind of nice.



594

00:33:27,260 --> 00:33:28,290

Let's not make it red.



595

00:33:28,430 --> 00:33:31,790

Let's make it green and save that and reload it.



596

00:33:31,790 --> 00:33:32,750

And now it's green.



597

00:33:32,920 --> 00:33:34,090

Well, that's that's pretty good.



598

00:33:34,580 --> 00:33:35,940

We can do other things as well.



599

00:33:35,960 --> 00:33:41,220

Notice how this has a bunch of little no space between here and here.



600

00:33:41,240 --> 00:33:42,650

Let's see if we can play with that.



601

00:33:42,650 --> 00:33:43,070

Might work.



602

00:33:43,070 --> 00:33:43,500

Might not.



603

00:33:43,520 --> 00:33:44,300

Let's give it a try.



604

00:33:45,260 --> 00:33:51,920

There's another CSFs directive called Merge on Top, and we need to specify how big it's going to be.



605

00:33:52,220 --> 00:33:56,240

Now, you can do it this way, say, 25 for pixels.



606

00:33:56,240 --> 00:34:01,740

And that talks about picture element, the smallest unit you find on a computer's display or a phone's



607

00:34:01,760 --> 00:34:02,210

display.



608

00:34:02,720 --> 00:34:04,700

I said put a margin of the top.



609

00:34:04,700 --> 00:34:07,880

That's 25 pixels in size and let's reload that.



610

00:34:08,360 --> 00:34:09,050

And I did it.



611

00:34:09,050 --> 00:34:10,480

Put a little tiny margin there.



612

00:34:10,940 --> 00:34:17,150

Now, pixels are great, but they're also dangerous because some screens don't respond the way you would



613

00:34:17,150 --> 00:34:17,750

want them to.



614

00:34:17,900 --> 00:34:23,250

Another way of doing this is to use the class known or the unit of measurement known as an M.



615

00:34:23,630 --> 00:34:32,030

So I say one M and that stands for the width of a capital letter M, and if I reload that it does one



616

00:34:32,030 --> 00:34:32,280

arm.



617

00:34:32,300 --> 00:34:34,450

Let's try to EMS or one point five EMS.



618

00:34:34,460 --> 00:34:35,990

You can use fractions here too.



619

00:34:36,010 --> 00:34:39,590

You can't with pixels, but you can with EMS and it's a little bit better.



620

00:34:39,620 --> 00:34:40,110

OK.



621

00:34:40,520 --> 00:34:44,090

But notice how the word middle is really crammed at the top.



622

00:34:44,120 --> 00:34:48,790

First of all, I want this does footer to be the same size on every page, no matter what's in it.



623

00:34:49,220 --> 00:34:51,160

So let's make a few other things.



624

00:34:51,710 --> 00:34:57,890

So my footer is a div and a div is what's known as a block level element.



625

00:34:57,920 --> 00:34:58,370

OK.



626

00:34:58,400 --> 00:35:04,640

That means I can do things like this height and I'll say five M's.



627

00:35:06,770 --> 00:35:10,920

Let's reload that now, the footer is much bigger.



628

00:35:10,940 --> 00:35:14,630

That's good, but the words are all crammed right up to the top and right to the edge.



629

00:35:14,660 --> 00:35:15,860

OK, let's try something else.



630

00:35:16,110 --> 00:35:21,740

What we really want to add here is some padding at the top and some padding on the left and some padding



631

00:35:21,740 --> 00:35:22,340

on the right.



632

00:35:22,850 --> 00:35:30,530

So I can just do this padding one M and save and reload and look at that.



633

00:35:30,540 --> 00:35:32,060

Things are much better.



634

00:35:32,450 --> 00:35:34,310

But Black touched on a green background.



635

00:35:34,340 --> 00:35:36,980

Well, first of all, I don't really want a green background.



636

00:35:37,130 --> 00:35:38,810

I want to have a dark background.



637

00:35:39,170 --> 00:35:42,300

And when I can't just put the color dark, I could put black.



638

00:35:42,320 --> 00:35:43,400

Let's see what that looks like.



639

00:35:43,550 --> 00:35:46,020

Safe, OK?



640

00:35:46,070 --> 00:35:49,100

I can almost see those words, but it is darker black.



641

00:35:49,130 --> 00:35:49,680

Not bad.



642

00:35:50,060 --> 00:35:54,290

We can also use another syntax and the syntax is hexadecimal colors.



643

00:35:54,650 --> 00:35:58,790

And they begin with a pound sign or a hashmark or whatever you want to call it.



644

00:35:58,790 --> 00:36:06,140

That little crosshatch thing from your keyboard, zero zero zero zero zero zero is black, so there



645

00:36:06,140 --> 00:36:07,040

should be no change here.



646

00:36:07,370 --> 00:36:12,430

And there's not an hexadecimal is counting from zero to 16.



647

00:36:12,440 --> 00:36:18,290

So if I count to one to nine in hexadecimal, it would be a zero, not at zero one, two, three, four,



648

00:36:18,290 --> 00:36:19,660

five, six, seven, eight, nine.



649

00:36:20,420 --> 00:36:22,640

And then you would think you would go to ten.



650

00:36:22,850 --> 00:36:24,350

But it's not in hexadecimal.



651

00:36:24,350 --> 00:36:31,990

It's A, then B, C, D, E, F and F is sick is the highest you can count because it's based 16.



652

00:36:32,360 --> 00:36:41,030

So to make something that's almost black, but not quite, maybe I could go well abcde e f I could go



653

00:36:41,750 --> 00:36:42,860

zero is the low one.



654

00:36:42,860 --> 00:36:46,610

What if I go zero three zero three zero three.



655

00:36:46,920 --> 00:36:47,990

Let's see what that looks like.



656

00:36:48,140 --> 00:36:48,800

I can reload it.



657

00:36:49,390 --> 00:36:51,080

I don't really see much difference that I save it.



658

00:36:51,650 --> 00:36:52,250

Reload it.



659

00:36:52,580 --> 00:36:53,630

Still not much difference.



660

00:36:53,630 --> 00:36:58,520

Let's try three three D three d see what that looks like.



661

00:36:59,030 --> 00:36:59,570

Reload.



662

00:36:59,570 --> 00:37:00,580

Oh that's, that's better.



663

00:37:00,620 --> 00:37:06,350

OK, now you could guess, you can guess about these things but you can also either use Photoshop,



664

00:37:06,350 --> 00:37:10,640

which is what I do because I have a subscription to Adobe Photoshop and if you're going to work in web



665

00:37:10,640 --> 00:37:12,230

development you're probably going to get one too.



666

00:37:12,620 --> 00:37:18,680

Or I can just go to my favorite search engine and say, find online color picker.



667

00:37:20,420 --> 00:37:21,440

There's got to be one out there.



668

00:37:21,440 --> 00:37:22,610

Color online picture.



669

00:37:22,610 --> 00:37:23,160

There we are.



670

00:37:23,210 --> 00:37:24,560

OK, so here's one.



671

00:37:24,560 --> 00:37:27,920

And I want to pick a color and it tells me there's my code right there.



672

00:37:27,920 --> 00:37:28,850

So I click on this.



673

00:37:28,850 --> 00:37:30,740

Well, she's allowing me to choose from this.



674

00:37:31,190 --> 00:37:35,390

Not perfect, but can I find a dark colored mesh one down here up in the corner?



675

00:37:36,710 --> 00:37:37,730

OK, let's go with that.



676

00:37:37,730 --> 00:37:40,490

That's kind of a blue slate blue.



677

00:37:40,520 --> 00:37:41,570

Let's see what that looks like.



678

00:37:41,600 --> 00:37:43,010

And it doesn't matter for me right now.



679

00:37:43,010 --> 00:37:44,630

We're just trying to demonstrate how this works.



680

00:37:44,630 --> 00:37:45,740

Can have two hash marks.



681

00:37:46,310 --> 00:37:48,320

And let's go back to my page and reload.



682

00:37:48,800 --> 00:37:49,130

All right.



683

00:37:49,130 --> 00:37:49,700

That was good.



684

00:37:50,060 --> 00:37:53,060

But I want the text to be white now.



685

00:37:53,240 --> 00:37:54,380

I can't even read that.



686

00:37:54,380 --> 00:37:56,390

Well, I can control that and see us as well.



687

00:37:56,750 --> 00:38:04,880

I could just say color white reload that looks better and color white is fine, but I can also go color



688

00:38:04,880 --> 00:38:07,580

pound signed f f f f f f.



689

00:38:07,760 --> 00:38:11,480

They don't have to be uppercase letters, but I just get the habit of doing that sometimes and it still



690

00:38:11,480 --> 00:38:11,930

works.



691

00:38:12,560 --> 00:38:13,010

All right.



692

00:38:13,010 --> 00:38:16,370

Maybe I don't want this text to be quite so big either.



693

00:38:16,490 --> 00:38:22,160

Well I can actually change that font size now.



694

00:38:22,160 --> 00:38:26,390

I could specify twelve point or ten pixels.



695

00:38:26,700 --> 00:38:29,510

If we did ten pixels, for example, it'll be pretty small.



696

00:38:30,080 --> 00:38:33,410

Or I can also say font size eighty percent.



697

00:38:33,470 --> 00:38:38,750

I want it to be eighty percent of whatever the font size defaulting on the pages and that's not bad.



698

00:38:40,160 --> 00:38:40,730

All right.



699

00:38:40,760 --> 00:38:47,540

I have now constructed a landing page that consists of a neighbor with links that don't go anywhere



700

00:38:47,540 --> 00:38:49,070

yet because we haven't created those pages.



701

00:38:49,550 --> 00:38:56,240

I have a page of a paragraph of text and then I have a link to a make reservation now and I have a footer



702

00:38:56,240 --> 00:38:58,070

and I haven't put anything useful in the footer yet.



703

00:38:58,070 --> 00:39:01,660

But we now have the starting point for our Web page.



704

00:39:02,540 --> 00:39:07,940

Last thing I want to talk about, you may remember that the very first step or one of the very first



705

00:39:07,940 --> 00:39:11,960

steps we did was to come and copy and paste this stuff.



706

00:39:11,960 --> 00:39:19,310

So this stuff is from the bootstraps getting started section in their documentation, and they include



707

00:39:19,310 --> 00:39:23,240

J Query and Popper and Bootstrap.



708

00:39:23,450 --> 00:39:29,660

And the reason these things are included is so that we can have the carousel work.



709

00:39:29,660 --> 00:39:34,460

This is powered by JavaScript behind the scenes and the drop down menu will work.



710

00:39:34,490 --> 00:39:37,190

This is powered by JavaScript behind the scenes.



711

00:39:37,520 --> 00:39:45,860

If I come back here and comment this stuff out, OK, and save it and go back here and reload the page,



712

00:39:46,340 --> 00:39:48,440

well, this isn't going to do anything anymore.



713

00:39:48,920 --> 00:39:51,110

My carrousel doesn't doing anything anymore.



714

00:39:51,110 --> 00:39:51,920

It's not sliding.



715

00:39:51,950 --> 00:39:54,020

It still shows up, but it doesn't work.



716

00:39:54,500 --> 00:39:56,100

Now, there's one thing I want to tell you about.



717

00:39:56,100 --> 00:40:00,050

I'll re-enable that and save it, and this will all come back.



718

00:40:00,350 --> 00:40:01,670

So now my menu should work.



719

00:40:01,670 --> 00:40:02,240

It it does.



720

00:40:04,220 --> 00:40:04,490

Jake.



721

00:40:04,490 --> 00:40:05,600

Query is falling at a.



722

00:40:05,690 --> 00:40:07,970

Favor and it's falling out of favor because J.



723

00:40:07,970 --> 00:40:15,020

Crew was built years and years ago to add functionality to browsers that was not built into the browser.



724

00:40:15,290 --> 00:40:20,450

So everybody started implementing JavaScript in the early days, way back in the Netscape Navigator



725

00:40:20,450 --> 00:40:25,850

days from the 90s and the Internet Explorer days, everybody kind of took their own path and started



726

00:40:25,850 --> 00:40:27,760

doing things in their own way.



727

00:40:28,010 --> 00:40:33,380

And of course, that caused a lot of grief for people like me and people like you who are trying to



728

00:40:33,380 --> 00:40:34,550

learn to do web development.



729

00:40:35,180 --> 00:40:41,000

So J.Crew was developed to actually implement functionality that didn't exist in the browsers and kind



730

00:40:41,000 --> 00:40:45,360

of give a standard syntax to write JavaScript and it works really well.



731

00:40:45,380 --> 00:40:46,160

Don't get me wrong.



732

00:40:46,160 --> 00:40:48,770

And it's got a rich ecosystem with a ton of plugins.



733

00:40:49,160 --> 00:40:51,650

And if you want to use Jorquera, you go right to town.



734

00:40:51,650 --> 00:40:56,030

Right now, something like 65 percent of the sites out there still use Jacquier it.



735

00:40:56,630 --> 00:41:02,720

But for people who are, you know, well versed in technology and don't just copy and paste things,



736

00:41:03,050 --> 00:41:04,340

people who actually think about it.



737

00:41:04,820 --> 00:41:11,560

Well, we understand that Jacquier, the problem that query solved back in the day doesn't exist anymore.



738

00:41:11,570 --> 00:41:13,060

Browsers are really smart.



739

00:41:13,220 --> 00:41:15,620

JavaScript has gotten much, much better.



740

00:41:15,620 --> 00:41:20,120

I still think the language is a mess, but it powers much of the Internet and you have to know it.



741

00:41:20,510 --> 00:41:22,020

But it's way better than it used to be.



742

00:41:22,580 --> 00:41:26,180

So there are tons of sites out there like this.



743

00:41:26,330 --> 00:41:32,150

You can say you don't need taquerias.



744

00:41:32,150 --> 00:41:35,630

Look at that's the first result in Google's prevue.



745

00:41:35,630 --> 00:41:41,600

So if I search for that, you can see all kinds of sites that tell you why you don't need Jorquera anymore



746

00:41:41,780 --> 00:41:47,510

and why you should be using pure JavaScript and in fact, bootstrap in their next release, which is



747

00:41:47,510 --> 00:41:50,030

version five, which should be out sometime next year.



748

00:41:50,480 --> 00:41:54,620

They're removing the dependency on Jaquie and they're doing it for a couple of reasons to start with



749

00:41:54,800 --> 00:41:57,200

queries not updated as fast as it should be.



750

00:41:57,230 --> 00:42:02,840

Earlier this year, when I'm writing this course in 2020, earlier this year they released an update



751

00:42:02,840 --> 00:42:10,820

to Jaquie, which which broke its implementation in Bootstrap, the most widely used framework for success



752

00:42:10,820 --> 00:42:11,390

out there.



753

00:42:12,170 --> 00:42:14,000

And of course, they submitted a ticket.



754

00:42:14,120 --> 00:42:17,450

The people that maintain bootstrap submitted a ticket to J.



755

00:42:17,450 --> 00:42:18,020

Query, J.



756

00:42:18,020 --> 00:42:20,570

Crew said, Yeah, we'll get that fixed as soon as we can.



757

00:42:21,050 --> 00:42:24,170

And it took them a very long time to fix that.



758

00:42:24,170 --> 00:42:30,290

So long, in fact, that the folks at Twitter had to go do a temporary patch just so sites would keep



759

00:42:30,290 --> 00:42:30,770

working.



760

00:42:32,030 --> 00:42:34,060

So it's not updated as much as it used to be.



761

00:42:34,070 --> 00:42:40,310

More importantly, it's solving problems that don't exist anymore, and it actually requires a fairly



762

00:42:40,310 --> 00:42:44,600

large download to to come down to your computer.



763

00:42:44,600 --> 00:42:45,940

So it slows sites down.



764

00:42:46,340 --> 00:42:51,830

So in the not too distant future, you're going to be able to remove J query from your projects.



765

00:42:51,830 --> 00:42:55,010

And my rationale here is going to be pretty straightforward.



766

00:42:55,520 --> 00:42:58,310

I'm going to say this is a kind of a transitional time.



767

00:42:58,310 --> 00:43:04,760

I'll leave Jake Query implemented for now, knowing that when I update my templates, my goal line templates



768

00:43:04,760 --> 00:43:11,630

to use Bootstrap five, once I'm satisfied that it's going to meet my needs, then I can remove my query



769

00:43:11,630 --> 00:43:12,170

dependency.



770

00:43:12,170 --> 00:43:18,230

But the only reason I'm having Jake query included in this project and in this course is so we can have



771

00:43:18,230 --> 00:43:22,370

this carousel, we can have these dropdown menus and anything else.



772

00:43:22,370 --> 00:43:24,500

I want to choose from the bootstrap framework.



773

00:43:25,340 --> 00:43:30,830

I am not going to write any JavaScript that uses Bootstrap or any of the other frameworks like View



774

00:43:31,550 --> 00:43:34,130

or Google's ANGULAR.



775

00:43:34,340 --> 00:43:37,520

I'm going to write pure vanilla JavaScript.



776

00:43:37,910 --> 00:43:39,770

Now, I'm doing that for another reason.



777

00:43:39,770 --> 00:43:42,230

When we get to the JavaScript session, I'll talk more about that.



778

00:43:42,560 --> 00:43:48,530

But I'm doing it because people who depend upon a query or people who depend upon Viejas or any of the



779

00:43:48,530 --> 00:43:51,020

other frameworks and there are some really good ones out there.



780

00:43:51,830 --> 00:43:55,790

A lot of them are using it like a magic black box.



781

00:43:55,790 --> 00:43:59,900

They have no idea how it does what it does.



782

00:43:59,930 --> 00:44:06,740

If you take the time to learn basic JavaScript, the plain vanilla JavaScript, and then you move on



783

00:44:06,740 --> 00:44:11,000

to use Vijaya, so or use another framework, you're never going to use Jacoway.



784

00:44:11,000 --> 00:44:13,070

I don't encourage you to anyway, because it's dying.



785

00:44:14,420 --> 00:44:16,970

Then you will actually have far more control.



786

00:44:16,970 --> 00:44:23,090

You'll understand how things work, why they work, and you'll discover a lot of cases you might default



787

00:44:23,090 --> 00:44:26,510

to saying, oh, I probably got to use Angular for this project, but you may not need to.



788

00:44:26,510 --> 00:44:31,370

Maybe you can do everything you need in plain vanilla JavaScript and you're removing a dependency from



789

00:44:31,370 --> 00:44:32,060

your project.



790

00:44:32,480 --> 00:44:34,100

I'm not a big fan of dependencies.



791

00:44:34,100 --> 00:44:36,320

I use the one I have to and when it makes sense.



792

00:44:36,680 --> 00:44:43,220

But if I can do it myself in a code that I know it's going to have a long shelf life because it's using



793

00:44:43,400 --> 00:44:48,380

a core language like JavaScript or goal line, that's what I'm going to default to and that's what I'm



794

00:44:48,380 --> 00:44:49,970

going to encourage you to do in this course.



795

00:44:50,090 --> 00:44:51,680

But of course, it's entirely up to you.



796

00:44:51,680 --> 00:44:53,780

You may already know Jacquier and want to use it.



797

00:44:54,050 --> 00:44:55,340

If so, you go right to town.



798

00:44:55,430 --> 00:44:56,530

You're a good company.



799

00:44:56,550 --> 00:44:59,180

65 percent of the Internet is still is with you on that.



800

00:44:59,540 --> 00:45:01,040

But I'm not going to win this course.



801

00:45:01,220 --> 00:45:04,940

I'm going to go through and teach everyone the basics of JavaScript.



802

00:45:05,520 --> 00:45:09,750

That'll just make us much more efficient and effective as programmers.



803

00:45:10,230 --> 00:45:14,580

All right, so I think we've got a lot done for this lecture in the next election will go create some



804

00:45:14,580 --> 00:45:15,000

pages.