Hello everyone and welcome back to our bootstrapped course.
In the previous lecture we set up the navigation up here and we have a fixed nav bar here and in this
lecture we're going to be continuing with our same project but we're going to be building next a nav
so that's going to be this services overview can also be called the header.
It's going to be the main section on our page when ever the user logs onto the website or opens the
Web site.
So what we're going to need here is some information about the company and we can put the company logo.
Again what are we going to do first.
Well we have this idea here services overview and what I'm gonna do next is add more information in
this div.
So let's go ahead and give it some classes and we're going to use bootstrap classes to automatically
style our page.
So first we're going to give us some padding.
P Why is padding on the y direction so padding at the top and the bottom of the Element 1 is the minimum
and 5 is the maximum you can set and text center is another class of bootstrap which will center all
the text inside of this div here.
Let's also add some of our own classes now so I'm gonna make a block and a block one as well as a full
page.
So let's go ahead and actually begin styling using our own styling in this lecture because so far we
have only worked with bootstrap styling.
So go ahead and click on S S and close the output to open up our us as tab here and this is where we
can add styling.
Typically when you add CSF styling you always want to styling each [REMOVED] and the body first and you
want to give it a width of 100 percent and a height of 100 percent because whenever you do relative
width and height four elements inside of the each GMO code and inside of the body tag the relative width
and height needs some kind of anchor to base their width and height on and that is the e-mail and body
width and height.
So you need this in order for relative width and height to work as well we can also set the margin to
zero and auto.
This will center any elements by setting the margins to zero on the top and bottom and auto on left
and right.
Which means that the elements will be centered.
Now here we've specified three different types of classes that we're going to set and let's go ahead
and set those right now.
First I'll start with block.
So this is how you style with our custom CSA styling.
These are not reserved words in bootstrap which means we're now styling with our own CSX.
So we're using the DOT to call it by the class and we're calling the class name.
And here's where we can put any styling typically you want to set the color of the text and the color
of the background for these elements because for every one you want to have a default.
So we're gonna make the default background color to be black.
For example you can use words like white and black for many different colors or you can use the hex
code representations which we will be using as well which is a way to represent colors.
We're also going to set the padding.
Typically it's recommended to set sizes with percentages rather than pixels because this way you make
it friendly for all screen sizes.
Okay.
So this is what I'm going to have as a styling for the block.
So as you can imagine this represents a block on our Web page.
So one big block of it element containing other elements.
We also have block one and we're going to have several different numbers of blocks because we're going
to have different blocks with different colors on our Web site.
And do that.
So let's go ahead and style block 1 as well.
We're going to call it similarly by its class name and the dot here and let's give block one a color.
So we're going to give it background color 3 to 4 3 7 6 and this is a dark blue.
So let's go ahead and look at what we've done so far in the output.
Okay you're not seeing anything in the output yet so let's go ahead and check this out.
Yes.
So we need to make sure that these double quotation marks are after all of these class names.
So each of these are separate classes but they're not separated by any commas.
They're just separated by a space and they all have to be contained in these double quotation marks.
So we can go ahead and soon we'll be seeing some output in our output.
OK.
So we've set the block back 1 in full page.
Now when we put content in here then we're gonna see some action.
Let's go ahead and go back to CFS.
OK.
So we've set a background color we also added a full page here.
This is gonna be a class that will set the height of our block because right now we just have the height
of the body as you see but we haven't set the height of this element because it contains no content
its height is zero.
So to set its height you can call the full page class by its class name and then you can set its height.
We can set it to one hundred v each.
No I said it's useful to use percentages for response responsibility or percentages means a percent
of something.
So in terms of padding it's this percent of its width and if you were to set the height using percentage
it would be to the percentage of the closest parent that has a set height.
So in this case it would be of the body in our case we want to set it to be 100 of the viewport.
This the H stands for viewport height so 100 V H means you are setting it to 100 of the viewport height
the viewport is the window.
There's a slight difference between viewport and window but it's not important for our same purposes.
OK.
So you can set the height this way and go ahead and check the output.
OK we'll be seeing some soon we just have to add more to the H channel.
So let's go ahead and close off the CFS there for now and let's start adding more elements to our div
here.
OK.
So what we're going to do here is have the company logo as well as the company's name and some information
about it.
So we're going to do first is add that logo so we can scroll back up here.
We have the logo already in here and copy that and then scroll back down and just paste it right into
here.
So now we have our logo contained in here and we want to add a bit more padding to this logo but we'll
do that later.
You can have the output here.
See when we finally see it.
OK.
Should be seeing it soon
sometimes there's a hiccup with GSP.
OK so now we have our logo in here.
We're also going to put in our company name so as to do that we can open in each one tag H1 means header
one and it means this is the most important text on the page in terms of SEO.
Typically you only have one each one per website.
Otherwise you could have SEO difficulties but each one means it would be the largest text and it will
be treated as the most important text.
Typically you want to have it something that's very SEO friendly.
We can give it some pattern using the bootstrap padding class and put company name here and close off
at each one tag and you'll see the output.
We now have company name and we also have our logo up here.
But there's a bit of spacing error here in terms of the icon is too high up so we can add some padding
to that and you can't add bootstrap padding to an SPG but what you can do is put the SPG into its own
div.
So we've already added a bit of padding to the services overview div and we can add more either through
our custom to assess or we can add it through this bootstrap class and can close off that div and you
can indent this for clean code and if you pull out the output now you're seeing this icon is central
better in terms of alignment on the page there's been more padding here and we have a company name and
if you try to scroll down the page you'll notice it's only the size of one viewport and it's only the
size of one window as we specified.
OK go out and check back here.
Now I'm going to try to change this back.
OK.
Now it's showing you the background color.
Great.
Not sure what the issue was there but now it's showing us the background color which we also added to
be this blue and you'll see now that we have a background color we can also see the roundness of our
navigation here so you'll see there's the rounded corner of our navigation.
We can have that or we can remove it.
I'm going to remove it because it looks better without it.
So just right here you have when you really have the NAV class just move around it and you'll see those
rounded corners will disappear but that is a useful class of bootstrap even though we don't need it
for this website.
OK.
So we have the icon as our logo standard and we have the company name as our place holder for now.
This is what our website would look like on mobile.
And now let's go ahead and add a description.
So we're going to add that just below the company name just below this H1 here.
We're going to put in a P and let's make this a class lead.
This will make the text a bit larger.
And it's a bootstrap class again which means we don't have to put any of our own styling.
Let's say something like put your company description here with calls to action and an incentive to
sign up to your newsletter or contact you.
So we're writing a placeholder for a company here.
So if a company were to hire you as a designer then you could fill us in with their information and
you'll see some text has been added here and we're getting a bit of an issue here with the with the
text being cut off.
But we're going to fix that nor a suite to see what happens when we remove the lead class.
You'll see the text gets a bit smaller.
So it's up to you if you want it to be bigger or smaller can have it bigger for now.
OK.
Great.
So let's go ahead and go back to the CFS here and check what would happen if we removed this padding
percent here and you can see just a bit of padding as a rule but this doesn't fix our text error here.
It's being over flown out of the box.
We're going to have to fix that as well.
No worries we will.
This is what the page looks like so far in our preview.
OK.
Let's go ahead and toggle the output of it again.
So now we have our company name and a company description.
Let's go ahead and also add a button that will allow the user to continue onto the page somewhere.
So perhaps we want to bring them down the page into this idea of future products carousel.
Well we can add a button with using the button class or we can just add a link.
So we're going to add a link and then add the bootstrap button class onto it.
So sometimes you see people making a button tag like this which is fine.
We are going to use the anchor tag in our case so a trip equals hashtags featured products carousel
which is next.
Coming up and we're going to add a button.
So this is the link to where the button will link to.
And now it's make it a button by adding a bootstrap button class.
So we're going to say button button primary.
So these are two bootstrap classes that will create a button for you button and button primary button
primary is the coloring in the styling of the button.
It will make a blue button.
There is also button secondary which will make a different color button.
There are made different types of buttons which you can find in the blue stripe documentation and depending
on what you need you can use different button classes.
You can also style the buttons yourselves to override the bootstrap styling.
We're also going to add margin of 5 and Y means margin on the y axis.
So that means margin at the top and the bottom of the element.
And similarly to padding the minimum is one and the maximum is five.
Let's set the padding on the X to for key X means padding on the x axis which means on the left and
right of the element could also set padding y to 2.
So this is adding some margin and padding to the button itself.
So it will actually change the button size because padding is inside of the element whereas margin is
outside of the element.
OK.
Now we have the anchor setup with the link as well as the button class which will styled this button
for us.
We actually need the text to be inside the button now so what text do we want to be displayed inside
the button.
We can have something like learn more with an arrow.
So I just googled an arrow.
You can Google this arrow and find it if you'd like.
Or you can add an icon here as you learn more with an arrow and you have to close off this anchor tag.
You also have to close off that p tag because this is all actually this is a new p tag.
We can make a new p tag here to contain this link but we will try without it for now.
OK let's go ahead and open the output again.
We should be seeing a button now.
OK.
So we're seeing some interesting finding here which we're gonna have to work on.
But we are seeing a bun here.
So just try and put it into a pea.
It could be the issue sometimes you have to put anchors into.
Yep.
OK.
So we have to put our anchor into a p tag as you can see this isn't always the case but when you are
making just an anchor here like this with a button of bootstrap you want to put it into its own paragraph
because we're using anchor not a button like this.
OK it's opening output again that's open output again and see what we have so far.
So now we have a button and we're still getting a bunch of margin down here and we're going to have
to fix that but I as we as we add more elements this will clear this White part here.
This is we have so far.
OK.
Let's open each again and hide output a little limit.
OK great.
So what we've done so far is we have now set up our NAV services overview and we've added an icon a
company name with our header one which is good for SEO as well as the company description.
You can also make this in each two if you like because each two is just below each one and it means
the slightly less important.
But it's still important in terms of SEO.
So it's another option.
Typically headers are reserved for titles of sections.
So we're going to leave that as P for now
ok great and make sure all your closing tags match their opening tags.
Other than that Congratulations everyone you just set up the NAV of your site this year known as the
NAV in the next lecture I'm going to be continuing and make our next page so each page that we will
have will be the size of one viewport height and as the user clicks on each button there will be scroll
down to that part of the page want that.
Thank you all for watching and we'll see you in the next lecture.