So let's go a little bit further and start setting up our landing page, the very first page for our
site, and what I have right now is I have this index, that HTML file open.
I'm going to close that and I'm going to go over to my desktop.
And if you look at the course resources for this page, you will find a file called Images, Dot, Zip,
download that.
And when you expand it, it will expand to an images folder.
And what I'm going to do is on my desktop, you can do it wherever, but remember where you put the
files.
I'm going to create a new folder and I'm going to call it working HTML.
You can call it anything inside of that.
I'm going to put my images folder that I just extracted from the zip file and I'm going to put the indexed
HTML file I've been working on right along.
And the reason I'm doing that, what I'm going to do is go back to my text editor.
Right here and I'm going to open that index up file index that is Schimel file that I had in the working,
but I just moved into the working e-mail folder.
So this is our our HTML file.
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
location now and reopen that file and everything should work the same.
Now, there's a reason I did that, and the reason is pretty straightforward.
If you look at the structure of our application, which is right here in Goaland, and let me open up
the file.
I've been working on bookings in Harris file, which is right here.
We created a couple of lectures go this static folder, and that's where all of our static images are
static images and JavaScript and siestas files.
Anything that's not an HTML template, which will we actually convert it to?
A good template will be a go template handled by a handler.
Anything that's not one of those has to live in a static folder.
So to do that, I would say have to do one more step.
I need to create a static folder, static and then move images inside of that.
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
to delete everything in the body tag.
We need our images and so forth to be somewhere that the template can find them.
And if I create the structures of folders, as I just did, it means that the path is path to images
and so forth will be exactly the same and go templates as it is in the demo file.
And it just makes it easier.
I don't have to go fix a bunch of path names to files and images and so forth after the fact.
All right, so we're going to create a landing page.
So let's go look at Bootstrap because that's what we're going to use as the Cyesis framework.
Let's go back to get bootstrap dotcom and let's look at examples to see what the kinds of things we
can do.
So here are some custom components and album pricing.
Check out a headline.
What's this one?
A carrousel.
Let's have a look at that.
So at the top, we have a navigation bar that we can do things, we might have a search feature, we
won't do that yet, but we might do it later on.
And then we have this top thing.
This is called an image carousel.
And it's a means where you can show text with some kind of background image, which they don't have
here.
This looks like it might be useful.
So let's have a look and see how we might do that.
So let's go back and go documentation and let's start with some very basic things.
I want to put that carousel there and I want to have that navigation bar there for sure.
OK, so you'll notice here in this section where it says, start our template.
We've looked at this one already and I said, let's ignore this query stuff for now.
Well, let's not ignore it this time.
And I have a little bit to say about January, but that'll come momentarily.
Let's just get a few things working first.
Obviously, it says I need one of the two.
I can either have Jake a popper and bootstrap jazz or I could have this one.
Well, let's make sure that we're going to get everything we might possibly need.
So I'll copy this one except for the comments and I'll go back in here.
And where does it go?
It goes just before the closing body.
OK, so I can do that, paste those in their format a little bit better and save it.
Now, let's go back and look at this again.
Now, this is a really basic one because we built that our page wound up looking like this, which isn't
great.
So let's just put a few things that I know we're going to have to have.
When you create something in Bootstrap, you typically wrap it in a special HTML tag.
We've seen ones like this p p for Paragraph's.
Well, we can also use dips and a div is just a division and this would have to have an opening tag
and a closing tag.
And this is going to wrap all of the content, the displays for our users and we're going to give that
div a class and a class is just the name of a CSC or cascading style sheet directive.
It's a collection of things inside a main part of the CSC file that says take all of the styling I define
here and apply it to this class.
So we'll see how this works in just a moment.
But we're using one this class.
Where does this exist?
Will it exists in this bootstrap file that I included up here?
So it's one that's built by bootstrap for us.
And I'll put div class equals container.
OK.
So that affects everything inside this div.
Now, if I actually put this in here, put in something like this, H1, my title slash H1, let's see
what changes that made.
Well I reload this and I should see only that title I just created.
But notice how it's moved over.
Well that's interesting.
OK, so that container actually did something.
It moved it to the left or to the right.
So at least we know it.
Did that get rid of that for now inside of the div class container, I'm going to put another div div
class equals row.
And of course that has to have a closing tag.
All right.
What if I put my H1 in there now?
H1, whatever, H1 save reload.
OK, well it didn't seem to change anything inside of that row.
I'm going to put another to div class equals call for column and I'll wrap that, I'll put that around
this H1 tag now formatted again so we don't get lost in our HTML and you should get in a good habit
of indebting things just as well.
All right.
So I put a column in there, so now I have a container a row and then a column inside that row.
Let's reload it.
OK, moved it a little bit, but I'm still not sure what's actually happening.
Well, I'm going to copy this entire div class equals call.
I'm going to paste it below it once inside my heart.
Try tried again.
Div class equals call.
And I'll paste it once, twice, three times, so now I have four deals with class equals call and I'll
call this whatever, whatever one, whatever, two, whatever three just so we can see where they go
and not one.
I reload this look, I put them in columns.
All right, what if I close this row or after this row closes, I put another div class equals row give
and inside of that I will put just a paragraph of text.
This is some text which I will not copy and paste a bunch of times just so it gives me a paragraph piece
paper space based paste p save.
Well, you can probably guess what's going to happen.
These four columns exist in one row and this one thing exists by itself.
Now I should have a column around that I don't.
Let's see what happens.
Reload.
All right.
Now you see, because that doesn't have a column, it doesn't actually line up with this one.
Let's put a column around the.
Div class equals call, and then down here I'll do another one, close it now that I've wrapped it this
way and I save it.
Let's see what happens now.
That lines up much, much better.
OK, so I have now a row and a row and inside this row I have four columns and inside this row I have
one column.
Let's try third row div class equals row has a closing give and I'll put two columns this time.
Div class equals column div to class equals call div.
All right.
And inside of this I'll put a left call and inside of this output right call.
Let's save that.
And it does exactly what I want.
All right.
Well that's, that's a good start, but it's still kind of ugly.
I really want to make this a little more attractive.
I really want to have that navigation bar at the top.
Let's do that first, because we need a means of getting around the various pages of our site.
All right.
I'm in the documentation for Bootstrap and I'm going to go down.
Is it on your layout?
Layout says Grid.
Now, we're talking about the grid right now, so we'll come back to that content.
Typography, code, images, tables now.
Components, components.
No, that's what we want right there.
So let's look at that.
So it describes it and it says Navarros require a rapid navaira, blah, blah, blah.
Good.
We'll just scroll down to look for the example.
Here's an example.
I'm going to copy this entire example, which I can do by clicking copy.
And I will put that up here.
Let's put it outside of the container, see how that works.
OK, so there it is.
I'm not going to bother formatting this right now because I'm going to change it.
Let's go back and reload and see what happens.
OK, so I now have a drop down menu.
I have a home button.
I have great.
OK, maybe I don't like that color.
Can I do anything else with this.
Let's go back to never.
So that's really not the color that I want.
I want a darker no just because I do.
Let's keep going and see if we can find a color schemes.
Theming for the Naver has never been easier.
Blah blah blah.
Background, color, utilities.
So it says nav class equals nav bar, nav bar dash dark and big dark.
Let's try that one.
So where does that go.
That's this.
The nav class equals.
Do we have a now class equals we do.
All right.
Now he's got naver.
When we copied we had never light and light and here they have never dark.
And Wigdor let's just replace those two parts because the other classes are probably doing something
and I'm not going to overwrite them.
So let's pace that save go back and reload our page.
OK, it's darker.
That looks better.
Excellent.
OK, I don't want this search bar for right now, so let's get rid of that.
And that appears to be right here.
Form class equals.
Yeah, that's my search.
OK, and it's got a starting form Tegana closing a form tag.
Let's delete that and reload it.
OK, and now we have some links here so we have a home.
We definitely want that to be our home page.
OK, and we're going to want that.
I'm not going to worry about this thing right now.
We'll change that later.
Link dropdown disabled.
So let's have what are we going to have?
We're going to have our homepage, which is what we're working on right now.
And what other pages are we going to have?
Well, we have to have a page maybe about.
So let's change that link to about.
So let's find Link.
We'll change it to about an all I have to do is change the Texas between the tags.
So about home is fine.
I can leave that alone.
And then we have this dropdown, but I don't want to call it dropdown.
That's this menu right here.
Maybe I'll make that for my rooms, rooms.
And how many rooms are we going to have?
We're going to have two.
So let's say room number one.
Now we have to come up with a good name for our room.
So let's go with the generals quarters.
And I'm just making this stuff up.
And the second one will be Colonel COLB in detail.
How do you spell Colonel?
I can't do that.
So let's go with Major Major's suite and then I don't care about these things, so I'll just delete
those.
Let's save that.
And I don't care about the disabled, but maybe I want that to not be disabled and I want to have a
contact page.
Seems to be useful.
It would be useful to have people give people a way to contact us.
Let's reload this.
All right.
So we have never which will fix at some point home about rooms and contact and rooms, gives us general
quarters a major suite.
All right.
Now, these are currently link.
If you look at the home page, for example, here's the home page.
It links to hash, which means don't do anything that just don't go anywhere.
Actually, in some cases, if you're way down on the page.
If you have a long page and you click on that, it will actually jump you to the top.
Well, that's not what I want.
I want this to go to the homepage of my site.
And by default, pretty much every site out there uses this slash for your homepage, the same as when
we if you go to Apple dot com or unbe Ambedkar or Google dot com, you don't have to put anything after
the domain name.
And if you just put a slash, it just says go to the default page for this site.
So we'll leave it there.
Well I think a good you URL for that would be slash above and down here where we have general quarters
and Meijers.
Sweet.
I'm going to put those like this room's generals quarters with no punctuation other than the hyphen
and for the major suite algo rooms, majors suite.
And again, no no apostrophe in there.
You don't want that.
You just want to go with letters and dashes.
That's the simplest and safest way to go with it.
Or numbers for that matter.
And contact will be slash contact, of course, slash contact.
I can change these at any point, but for right now, let's make sure these actually would point to
those pages.
So if I go to rooms and roll over generals quarters and look down on the very bottom right hand corner
of my window, it says, yes, it's going to go to slash room, slash generals quarters, good contact
will go to slash contact, major suite, major suite, a boat, a boat and home takes me to the default.
OK, so I have a navigation bar.
I don't have anything to link to yet except for the home page.
I can click on that and that takes me to here.
So but it will on a web server, take me where it's supposed to go.
So I know that's actually going to work.
All right.
Now let's put some other things in here.
One of the things that I said I wanted was a carousel.
And if you go back to the the documentation and you look under components in bootstrap, you're going
to find Carousel right there.
All right.
And a carousel.
How it works.
I can read all that.
You can read about all that at your leisure.
What I want, again, is an example.
So I'm going to copy this example.
Again, I'm going to click copy button and go back here and think about where I want it, do I want
it inside the container?
Let's try that first.
OK, so if I pasted in here and formatted a little bit better, so I'll just move it over like that.
And I have div id equals carrousel example slides only.
OK, I'm not sure what that is yet, but I'll leave it alone.
Classes carousel slide data ride equals carousel.
All right.
We have image source.
Well I actually can't use dot dot dot for the image source in HTML.
When you want a picture on your, on anywhere on your page you have to give it a source and a source
can be a complete you if you're pointing to an image on somebody else's site.
But that's impolite.
So don't do that more often.
It's a relative you URL that says look on this server and look in this path for the images.
Now I'm going to go over here.
We put in our working e-mail folder.
We created a static folder.
Inside of that, we have images and then we have outside ping, tray, ping and woman Dasch laptop ping.
Let's go with that one first woman dash laptop.
So I'll put in my path name.
And because my file, which is this is right here and inside of that, are right beside that is a folder
called Static and then a folder called Images.
And then we have a woman laptop typing.
I'll just copy that first part of the name, save myself some typing.
So when I was going to go to static images, woman laptop typing and alt, this is the alternative text.
If somebody is using a browser with images disabled, as sometimes people do, if they have very slow
bandwidth, you need to give it some descriptive text.
So I'll just put a woman and laptop.
OK, now I'm not sure what the class block 100 are, but I'll figure that out later.
I need to have my second image, so I'll just copy this to save some typing and we will paste this in
here and we'll change the image bit in a minute.
What were the other two images called Treh and outside?
So.
Outside and Trey, all right, and here we should put in some alternative text trade with coffee and
it doesn't matter what I'm putting in there right now, but I'm going to say that, OK, so I've saved
it.
Is there anything else I need to do?
Let's go back and look at the documentation.
OK, so we have this I says with controls.
Well, I won't worry about the controls right now.
Let's just reload the page and see what happens.
Oh, it didn't work.
So woman and laptop, it didn't work because I started with a slash here, which I'm going to have to
do in the final version of this.
But because I'm not actually serving this from a real Web server, I'm just loading a local file, I
need to remove that opening.
All right, let's try that again.
Hey, look at that.
I have a picture.
Is it going to move?
Yes, it did.
OK, it was very slow, but it slid left or right.
I now have a picture, but really I need those pictures pretty big.
And if you open them up in Photoshop or your favorite editor, I really don't want this space on the
right and on the left.
Is there any way I can get rid of that?
Well, a minute ago I said, should we put this inside the container?
And we did.
But because it's intact inside the container, it actually adds that spacing on the left and the right.
So let's move it out of there and format a little better and save this and get rid of these spaces and
let's see what happens now.
Wow, that's pretty big, but that looks good.
It actually takes up almost the entire screen.
OK, but when I looked at the preview for the carousel on the bootstrap site, it actually allowed me
to have text over top of it.
Can I have text over top of it?
Well, let's go back to her bootstrap site and go down and see if there's any more examples with Indicator's.
What's this down here?
Those are just indicators with captions, with captions.
Here we are.
Captions.
Maybe I can do it that way.
So what they include is the inside.
Let's go back here.
They have a div with these indicators.
Oh, copy those two just to see what happens.
And where did those go right after the opening div tag.
So they have three slides and so do I.
So I should be able to put my indicators right here that let's just try that first before we try to
get the text working properly.
OK, that back.
For about that later, OK, so this says, well, let's look at this again, carrousel example, captions,
carrousel example, captions, carrousel example, captions that says my target is carrousel example,
captions.
Let's go back and look at theirs again.
Where's their carrousel example?
Captions.
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
carrousel and that is an ID.
And the thing about IDs is that they have to be unique on the page.
So you can't have what you can, but you shouldn't have to.
IDs exactly the same for any two elements on your Web page.
And I'm saying here, when I click on this, apparently it's going to go to whatever ID is specified
here.
So I'm going to copy this, which doesn't have a hash tag and I'm going to pasted here.
But leave the hash tag.
I'll do the same thing here and the same thing here.
And the same thing here, so now it apparently when I click on whatever this indicator is, it's going
to take me to Main Carasso, main Carasso, OK, down here.
Do I have any other examples of those ideas?
Noxubee OK, so let's see what happens when I reload my page, reload and there are my indicators.
And do they work.
They do.
I can jump all over the place.
Perfect.
OK, now we wanted to get back to our captions, so let's find out how they did these captions so they
have carrousel inor.
Do I have a carrousel error or do you write here they have image and then they have this, this is some
text was copy that.
And it went right after the image and before the closing tag for the carousel item.
So after the image and before the closing tag.
So that says second slide.
That's not good.
Let's call this first slide and I'll just copy this.
So it was here.
Div class equals Carasso item.
So this div matches that and these are inside there.
Let's copy that and do it for a second right after the image.
We'll call it second
and the third right after the image third.
OK, let's save it and see what happens.
Reload the page.
Hey I have some text.
It's not formatted the way I want.
It's hard to read with the background, but I have text there.
I can do the formatting later.
And second and third.
It works great.
Perfect.
All right.
So we now have a navigation bar at the top which disappears.
We'll fix that later.
OK, there must be a way to make that stick there.
Then we have some text underneath this.
What is text isn't great and I probably want a little bit of space between this slide, the carousel
at the top and whatever I put below it.
So let's have a look at how we might do that.
First of all, I don't need two columns here, so I just get rid of this first thing altogether.
This first div class equals row and I want some space there.
Div class equals row, div class equals call.
So let's give it a title to start with.
Each one will be a title.
Welcome to and we need to have a name for our bed and breakfast and we'll just make something up.
What shall I call this.
Welcome to.
Well I used military titles for the rum majors and generals and things like that.
So welcome to Fort and I need a name for Smyth Bed and Breakfast.
And I close my check and then I'll just put some text in here.
Your home away from home and again, I don't care what this says, your home away from home set on the
majestic waters of the Atlantic Ocean.
This will be a vacation to remember.
That's enough for now.
I don't really care what that text says, and I'm not really actually going to be booking any rooms.
I'm just demonstrating how things might work.
So let's before we go any further, let's save that.
So there it is.
OK, maybe that should be centered.
And I can do that really easily.
In bootstrapped class equals text center, text center.
So I'm adding one of bootstraps building classes and I'm saving for this H1 tag.
I want you to send it text center does that for text and it's now centered.
And I also want some space on top of it.
And here's some really useful utility classes that are built into bootstrap.
I want a margin at the top of this element, the H1 tag, and I want it to be choose a number between
one of five.
Let's try three margin top three and look at moved it down maybe a little bit more.
Margin top for save.
Go back now.
Sits right here right now.
Put my cursor right beside it so you can see how tall it is.
And when I reload the page it moves it down a little bit more than that.
Spacing looks a little bit better.
I really don't need those right column in the left column, so let's get rid of those.
And now what do we want to have after that, we'd probably want some pictures of our rooms, but we
haven't don't have those yet, so I'll just put a little bit more text in here so it looks a little
bit better.
Maybe you want a full paragraph or two.
So copy this and I will simply return and paste and return a paste.
And because as we said before, each trial ignores those spaces.
Even though I have this formatted really badly, it should look like real text.
And it does.
It puts the space in there and ignores the multiple spaces.
OK, so that's enough to get me started.
I've now created a landing page.
Is there anything missing from here?
Well, I have my neighbor, which is going to go away soon.
I have a link to the home page.
I have a link to the ABOUT page.
I can show the rooms I need to create all of these pages, of course, and I can contact maybe I should
think this through.
Shouldn't I have a means of booking or making a reservation right from the home page?
Yeah, I should.
So let's go in here back to our neighbor at the top and let's find this part right here, which is contact
and copy that and paste it.
And I'll just call it book now and I'll make that you URL slash, make a reservation.
OK.
And if I reload that now I have a book now.
Perfect.
And I have a contact.
OK, and maybe I should put a call out down here in another section.
Another row.
So let's go down here and I'm going to make a call it that invites people to make a reservation.
So first thing I'll do is leave all these to the left, then move them this way just so it looks a little
bit better.
And I'll put my T.P tags on their own lines just so again.
So it's formatted better and then I'll create another row.
So I would say do class equals row and it does have to be lower.
Case class names are case sensitive.
Have a closing div inside of that I will make a column div class equals call and I want the content
of this to be centered.
So I will also put the text center in this and I'll have a closing two.
Now what can we put in there that's going to get people's attention.
Let's go see what bootstrap gives us and what we might be able to make it take advantage of.
So let's look here now.
Ba Popover Spinner's Tostes tooltip.
There's got to be something here that will actually do it for us while buttons buttons will be nice.
Let's try buttons.
Oh look, we have these nice buttons, different styles.
All right, so let's say what color do we want on our page.
Let's go back here and look again.
Well we have dark colors here then we have dark colors here is kind of bland so far.
Let's make it something that's going to catch people's attention.
So I will choose this green color.
Green is good.
That's success.
And here's an example of a button.
Now, there's actually a couple of ways of doing this.
I'm going to show you both OK, down here.
I will, first of all, just stick the button in exactly as they happen, but I'll change the lead.
I chose the wrong one.
I want to success make it.
Absolutely.
Yeah.
Make reservation.
No reservation.
No.
OK, so there's a button.
And if I come back here and reload this page and scroll down, I have to make a reservation now that's
OK.
But maybe I want to do it a little differently.
This is a button I really needed to link to the Make Reservation page.
Well, the cool thing is I can actually apply the button style in two and a half to a standard link
a HSF equals, and it's going to go to what do we call that link up here?
Make reservations.
Let me copy that.
Come down here, paste it in here and I will add a class to this.
A class equals button button success.
And then I just put my text make reservation now, but I'm not closing a button.
I'm closing in eight.
So if I say that and come back here, I should have two buttons that look exactly the same.
This one is a button which is normally used to submit a form or something like that.
And this one is just a link.
And I want the link.
I'm not actually submitting a form here.
I'm not filling anything out.
So I'll get rid of that one.
And the last thing I want to point to is that the bottom of my page is really it just kind of stops.
And normally when you go to Web pages, each page has a flutter.
So let's put a footer in here, OK?
And we can do it just using a standard div so we can go div class equals row div class equals call close
that div and close to death.
But I'm going to do something else here.
I'm going to give it a class of my footer which doesn't exist.
Now, what happens if I put something in here like this and I say, well, I'm going to have actually
two collapse, I'll have one on the left and one on the right path, recalls one of the middle tip.
So I will copy this paste paste and this will be left.
This will be middle.
And this will be.
Right now, if I say that and reload the page, I actually get left middle and right, huh?
Again, this is all formatted in here.
I want my footer to extend to the edges of the screen, just like it does at the top.
And how do we do that?
Well, we already know we can take this out of here, cut it and put it outside of the closing container
div and this closes this the container.
And remember, the container draws things in from the left and the right, and if it does it to help
format things on different screens properly.
So now I'm going to put my footer outside of that and see does it extend it.
And now it does extend to the left and the right.
Now, I gave this a class of my footer.
Why would I do that?
And we're going to talk more about success later.
But let's just have a quick look at it right now.
I can include cascading style sheets like boot straps using this fancy syntax link, reliquaries style
sheet that tells a style.
Then it tells it where on the Internet to go and get it.
So we're going to boot straps, CSS files on some site called CD bags delivered on it.
But I can also to find my own styles right up here inside the head tag, I can say style with a closing
tag style.
And down here at the bottom in my footer, I've given this class this div a class of my footer.
Well, let's copy that.
And come up here.
And paste its name in, but I'm going to start with a dot, because you have to when you're talking
about CSFs classes that you define yourself, they start with a dot.
I can redefine other things in CSFs, for example.
We will do this in a minute.
I can redefine the contents or the styling of a paragraph.
It doesn't have a dot.
Therefore, it says, oh, you're talking about one of the HTML tags that exist as part of the standard
which the P tag happens to be.
But I'm dealing with my footer right now.
So let's explore these in more detail when we talk about success a bit later on.
But let's try a couple of things.
I'm going to say a background.
Color and I'm going to give it a color and the color right now, I could just say red.
I'll do that.
It's going to be really ugly, just so you know.
But let's go back here.
We save that, reload the page.
And look, my background for my footer is now red.
Well, that's kind of nice.
Let's not make it red.
Let's make it green and save that and reload it.
And now it's green.
Well, that's that's pretty good.
We can do other things as well.
Notice how this has a bunch of little no space between here and here.
Let's see if we can play with that.
Might work.
Might not.
Let's give it a try.
There's another CSFs directive called Merge on Top, and we need to specify how big it's going to be.
Now, you can do it this way, say, 25 for pixels.
And that talks about picture element, the smallest unit you find on a computer's display or a phone's
display.
I said put a margin of the top.
That's 25 pixels in size and let's reload that.
And I did it.
Put a little tiny margin there.
Now, pixels are great, but they're also dangerous because some screens don't respond the way you would
want them to.
Another way of doing this is to use the class known or the unit of measurement known as an M.
So I say one M and that stands for the width of a capital letter M, and if I reload that it does one
arm.
Let's try to EMS or one point five EMS.
You can use fractions here too.
You can't with pixels, but you can with EMS and it's a little bit better.
OK.
But notice how the word middle is really crammed at the top.
First of all, I want this does footer to be the same size on every page, no matter what's in it.
So let's make a few other things.
So my footer is a div and a div is what's known as a block level element.
OK.
That means I can do things like this height and I'll say five M's.
Let's reload that now, the footer is much bigger.
That's good, but the words are all crammed right up to the top and right to the edge.
OK, let's try something else.
What we really want to add here is some padding at the top and some padding on the left and some padding
on the right.
So I can just do this padding one M and save and reload and look at that.
Things are much better.
But Black touched on a green background.
Well, first of all, I don't really want a green background.
I want to have a dark background.
And when I can't just put the color dark, I could put black.
Let's see what that looks like.
Safe, OK?
I can almost see those words, but it is darker black.
Not bad.
We can also use another syntax and the syntax is hexadecimal colors.
And they begin with a pound sign or a hashmark or whatever you want to call it.
That little crosshatch thing from your keyboard, zero zero zero zero zero zero is black, so there
should be no change here.
And there's not an hexadecimal is counting from zero to 16.
So if I count to one to nine in hexadecimal, it would be a zero, not at zero one, two, three, four,
five, six, seven, eight, nine.
And then you would think you would go to ten.
But it's not in hexadecimal.
It's A, then B, C, D, E, F and F is sick is the highest you can count because it's based 16.
So to make something that's almost black, but not quite, maybe I could go well abcde e f I could go
zero is the low one.
What if I go zero three zero three zero three.
Let's see what that looks like.
I can reload it.
I don't really see much difference that I save it.
Reload it.
Still not much difference.
Let's try three three D three d see what that looks like.
Reload.
Oh that's, that's better.
OK, now you could guess, you can guess about these things but you can also either use Photoshop,
which is what I do because I have a subscription to Adobe Photoshop and if you're going to work in web
development you're probably going to get one too.
Or I can just go to my favorite search engine and say, find online color picker.
There's got to be one out there.
Color online picture.
There we are.
OK, so here's one.
And I want to pick a color and it tells me there's my code right there.
So I click on this.
Well, she's allowing me to choose from this.
Not perfect, but can I find a dark colored mesh one down here up in the corner?
OK, let's go with that.
That's kind of a blue slate blue.
Let's see what that looks like.
And it doesn't matter for me right now.
We're just trying to demonstrate how this works.
Can have two hash marks.
And let's go back to my page and reload.
All right.
That was good.
But I want the text to be white now.
I can't even read that.
Well, I can control that and see us as well.
I could just say color white reload that looks better and color white is fine, but I can also go color
pound signed f f f f f f.
They don't have to be uppercase letters, but I just get the habit of doing that sometimes and it still
works.
All right.
Maybe I don't want this text to be quite so big either.
Well I can actually change that font size now.
I could specify twelve point or ten pixels.
If we did ten pixels, for example, it'll be pretty small.
Or I can also say font size eighty percent.
I want it to be eighty percent of whatever the font size defaulting on the pages and that's not bad.
All right.
I have now constructed a landing page that consists of a neighbor with links that don't go anywhere
yet because we haven't created those pages.
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
and I haven't put anything useful in the footer yet.
But we now have the starting point for our Web page.
Last thing I want to talk about, you may remember that the very first step or one of the very first
steps we did was to come and copy and paste this stuff.
So this stuff is from the bootstraps getting started section in their documentation, and they include
J Query and Popper and Bootstrap.
And the reason these things are included is so that we can have the carousel work.
This is powered by JavaScript behind the scenes and the drop down menu will work.
This is powered by JavaScript behind the scenes.
If I come back here and comment this stuff out, OK, and save it and go back here and reload the page,
well, this isn't going to do anything anymore.
My carrousel doesn't doing anything anymore.
It's not sliding.
It still shows up, but it doesn't work.
Now, there's one thing I want to tell you about.
I'll re-enable that and save it, and this will all come back.
So now my menu should work.
It it does.
Jake.
Query is falling at a.
Favor and it's falling out of favor because J.
Crew was built years and years ago to add functionality to browsers that was not built into the browser.
So everybody started implementing JavaScript in the early days, way back in the Netscape Navigator
days from the 90s and the Internet Explorer days, everybody kind of took their own path and started
doing things in their own way.
And of course, that caused a lot of grief for people like me and people like you who are trying to
learn to do web development.
So J.Crew was developed to actually implement functionality that didn't exist in the browsers and kind
of give a standard syntax to write JavaScript and it works really well.
Don't get me wrong.
And it's got a rich ecosystem with a ton of plugins.
And if you want to use Jorquera, you go right to town.
Right now, something like 65 percent of the sites out there still use Jacquier it.
But for people who are, you know, well versed in technology and don't just copy and paste things,
people who actually think about it.
Well, we understand that Jacquier, the problem that query solved back in the day doesn't exist anymore.
Browsers are really smart.
JavaScript has gotten much, much better.
I still think the language is a mess, but it powers much of the Internet and you have to know it.
But it's way better than it used to be.
So there are tons of sites out there like this.
You can say you don't need taquerias.
Look at that's the first result in Google's prevue.
So if I search for that, you can see all kinds of sites that tell you why you don't need Jorquera anymore
and why you should be using pure JavaScript and in fact, bootstrap in their next release, which is
version five, which should be out sometime next year.
They're removing the dependency on Jaquie and they're doing it for a couple of reasons to start with
queries not updated as fast as it should be.
Earlier this year, when I'm writing this course in 2020, earlier this year they released an update
to Jaquie, which which broke its implementation in Bootstrap, the most widely used framework for success
out there.
And of course, they submitted a ticket.
The people that maintain bootstrap submitted a ticket to J.
Query, J.
Crew said, Yeah, we'll get that fixed as soon as we can.
And it took them a very long time to fix that.
So long, in fact, that the folks at Twitter had to go do a temporary patch just so sites would keep
working.
So it's not updated as much as it used to be.
More importantly, it's solving problems that don't exist anymore, and it actually requires a fairly
large download to to come down to your computer.
So it slows sites down.
So in the not too distant future, you're going to be able to remove J query from your projects.
And my rationale here is going to be pretty straightforward.
I'm going to say this is a kind of a transitional time.
I'll leave Jake Query implemented for now, knowing that when I update my templates, my goal line templates
to use Bootstrap five, once I'm satisfied that it's going to meet my needs, then I can remove my query
dependency.
But the only reason I'm having Jake query included in this project and in this course is so we can have
this carousel, we can have these dropdown menus and anything else.
I want to choose from the bootstrap framework.
I am not going to write any JavaScript that uses Bootstrap or any of the other frameworks like View
or Google's ANGULAR.
I'm going to write pure vanilla JavaScript.
Now, I'm doing that for another reason.
When we get to the JavaScript session, I'll talk more about that.
But I'm doing it because people who depend upon a query or people who depend upon Viejas or any of the
other frameworks and there are some really good ones out there.
A lot of them are using it like a magic black box.
They have no idea how it does what it does.
If you take the time to learn basic JavaScript, the plain vanilla JavaScript, and then you move on
to use Vijaya, so or use another framework, you're never going to use Jacoway.
I don't encourage you to anyway, because it's dying.
Then you will actually have far more control.
You'll understand how things work, why they work, and you'll discover a lot of cases you might default
to saying, oh, I probably got to use Angular for this project, but you may not need to.
Maybe you can do everything you need in plain vanilla JavaScript and you're removing a dependency from
your project.
I'm not a big fan of dependencies.
I use the one I have to and when it makes sense.
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
a core language like JavaScript or goal line, that's what I'm going to default to and that's what I'm
going to encourage you to do in this course.
But of course, it's entirely up to you.
You may already know Jacquier and want to use it.
If so, you go right to town.
You're a good company.
65 percent of the Internet is still is with you on that.
But I'm not going to win this course.
I'm going to go through and teach everyone the basics of JavaScript.
That'll just make us much more efficient and effective as programmers.
All right, so I think we've got a lot done for this lecture in the next election will go create some
pages.