Welcome back to part two of styling your application and this one we're going to wrap up what we started
in the last video.
Now the first thing I want to style is what lives on the about page.
That is our image.
We previously had a style in place that targeted that.
And if you remember it looked a little bit like this image then we set up our curly braces and all I
did was set a width with equals 250.
When we do this it's also going to adjust the height proportionally so the image doesn't look sort of
skewed.
And if I refresh the page things look fine.
Now this is going to change all images on the page which might not be what we want.
Imagine we have a large background image or we have an image that takes up the entire width of the content.
That's going to need a different set of styles.
So instead of targeting every single image we're going to use the class selector that allows us to target
a specific set of elements.
And right here we start off with DOT followed by a name for this class.
And since this is a portrait image I could call the class something like portrait.
So it's dot followed by the class name.
Now at no point anywhere in our code have we ever typed a portrait which means that the style is never
gonna get applied.
If I refresh the page we're back to that really big image to actually have this style used.
We set up a class attribute on our HDL elements where we want these styles to be applied in this case
that would be for the about page and it would be this image right here.
So as I just mentioned that is class equals inside of quotes.
We can provide as many classes as we want in this case just one portrait if I wanted another it would
be space followed by whatever the other class name is.
So by listing out the class I'm essentially saying I want this element to take on these styles applied
to that class which in this case is just the one we've set up here.
So this is just a different way to target elements on your page.
Now if I refresh things we have our portrait image showing up as expected and we could choose to have
other images that have a completely different set of styles.
So now that we have this in place what I want to focus on is that footer as I navigate between the pages
you'll notice that the footer is just as high as it can possibly be.
Ideally it would be sticking to the bottom of the page and that's what we're going to focus on setting
up now to do that.
We're gonna have to adjust a few things.
So let's go ahead and get started by closing down a header as we're no longer going to need that.
I want to crack open about index for 0 4 and help so our four views and we can start with the home page
so I'll drag index to the front of the list and the goal here is to get that sticky footer in place.
I don't want it up top I want it pushed to the bottom of the browser.
Now to do that we're going to use a simple version of a slightly advanced CSX technique known as flex
box.
If you take a course on CSX flex box will be covered.
We're going to use just the very basics here to achieve a sticky footer.
The first thing we need to do is create another element in order to wrap our content as needed.
So what we're gonna do is use the div element like we've done before.
I'm going to put one right here inside of body and what needs to go inside of there is everything but
the footer that's going to include the header partial but it's also going to include any page content.
So for the moment let's add a paragraph to demonstrate that I could say Use this site to get your weather
perfect.
So we want all of our page content the header and anything else we're going to show inside of this div
and the footer is going to sit outside of it using flex box.
We're gonna have this take up all of the space available except what the footer needs that's going to
give us these sticky footer look where the footer is pushed to the bottom of the page.
Now we are going to target this div with a set of styles since div is a very generic element.
It's best to apply a class to it and use that class.
I can go ahead and pick whatever name I like for this.
I'm gonna use main hyphen content as the name.
Now we can correctly style our application getting that sticky footer look over inside of styles dot
CSX.
We have to write a few lines of code.
First we have to enable flex box.
This is a different way to lay out your items.
And we use that by setting display equal to flex for the moment.
I'm just going to use this space to break up our other styles with our Flex box styles which will be
down here.
Now if we do that it's going to give us some undesired results.
If I refresh the page I can see that my footer is now on the right and the rest of my content is now
on the left.
Now that's not what we want and flex box gives us a way to adjust that.
There is a flex hyphen direction property the default value is row which means everything goes from
left to right.
We can optionally change that to column and this is gonna have everything go from top to bottom and
that's what we want.
So right here I refresh the page and now we're basically back to what we had before.
But with Flex box enabled.
Now the other thing we need to do is to set the height for the body to take up the entire browser height.
Currently it stops right about here and that's a problem because I want to push the footer all the way
to the bottom of the browser window to get that done.
Oh we're going to do is set the minimum height equal to the browser's height which is one hundred V
H V H stands for the viewport height.
So in this case we have 100 percent of the viewport height the viewport being this box where your content
shows up.
If we didn't want one hundred we could use another value like 50 which would be 50 percent of that viewport
height.
But in this case we do indeed want one hundred now that we have this in place.
We are done styling the body.
We don't have the look we want yet but we are very close to getting it.
The only other thing we need to do is target that class we created.
So dot followed by the class name I called it main hyphen content.
And we're going to apply one more flex box style.
This one is called flex hyphen grow.
This allows a given element to grow to take up as much space as it needs.
We're going to set this to one which tells the Flex box that the main content should take up all leftover
space.
Now if we refresh things what do we see.
I can see my footer is pushed to the bottom of the page and as I navigate between the pages I can see
that only the home page is working and that is because we made some changes to the structure adding
that div into place will have to make these same changes to the other page but right here we are indeed
getting the look we were hoping for.
So once again if you want to learn more about flex box I recommend checking it out by taking a Udemy
CSX course or checking it out on a free service like YouTube.
It's a great tool and it's definitely something worth adding to your CSX skillset.
All right.
So from here we're going to focus on our individual template files.
The first thing we need to do is make some adjustments to the other pages.
I am going to set up a div just by typing the element name and hitting tab to auto generate the tag
and then I'll use class of main content here on this page and I'll bring all the main content inside.
That's going to make sure that things work well for our forum for page.
There we go.
Now everything is going to work great and we can test things by pulling up the site.
I'm going to go to local host three thousand forward slash me.
I get my 4 0 4 page and it looks great with that sticky footer in place.
Just two more pages left.
We have help dot HB Yes here I'm going to use div dot main hyphen content.
This is a shorthand for setting up a div element with the class of main content.
And if I hit tab that is exactly what happens.
There are all sorts of great short hands out there and we're going to do is take the content and paste
it right inside.
Perfect.
Now we can save the file.
We can navigate over to the help page and we're getting our sticky footer there as well.
The last page is the about page which currently does not have that structure in place.
Let's go ahead and fix that about that.
HB Yes.
I'm going to generate that div once again div dot main hyphen content then inside of there we put everything
that's on the page except for the footer.
I'm going to paste all of that in indented correctly.
Remove the extra space.
And now we're done.
I can refresh the browser and write here.
I now have all of my pages styled in a way that's uniform as you switch between them it feels like the
same site which is exactly what we were going for.
Now from here there are a couple small changes I would like to make.
One is to customize the title in the tab as well as the icon that's showing up.
So right here we do that inside of head.
I'm gonna start by setting up the title by opening and closing the title tag and right inside.
We put the title so far about I could use about that's going to show up in the tab and now we can do
the same thing for the other pages for help.
Inside of head I will set up title and I will say help for 4 0 4.
We're also going to set up that title and I will use for 0 4.
And then finally for the home page we will set up the title and I can go ahead and use something like
weather.
Now as we navigate between the pages in the browser we'll see those showing up.
I'll refresh the home page I get whether I then have about for the about page and help for the help
page.
The last thing we're going to do is customize the icon that shows up in the tab.
This also requires us to add a little code to the header but first we need the image.
Now I've already picked one out for you that you can use that is links dot Meade dot I O forward slash
pic 3 pic 3 contains a very small icon of a cloud in front of a sun.
We're gonna go ahead and right click that save image as and we're going to put this in our project image
directory.
So on the desktop that's where I have mine.
I have the web server folder in there we have public image that's where I want to put the content.
I'm gonna save it inside of there.
Close the browser tab and make sure it's actually showing up so inside a visual studio code I have my
images directory and in there I have weather dot PMG.
Let's go ahead and actually use it and to do this we use LINQ similar to how we linked in a style sheet
though in this case we're linking in an icon.
So I'll setup link.
We're going to set up rail as well as h ref.
Now the relationship between the document and what we're about to link in is not a style sheet.
It is an icon.
And the ref is the path to that image forward slash image forward slash.
I've called this one whether dot PMG.
Perfect.
Now if I do refresh the home page I'll navigate to it.
We can see that we have our little weather icon showing up making the site feel much nicer and a little
more real.
I can then take that one line and copy it to my other files so I'll copy it over under the title for
4 0 4 under the title for help.
And finally under the title for about now as we navigate between all of the pages on our site it doesn't
feel like anything's been left out.
The tab is nice and styled the content itself is nice and styled and we have that uniform feel as we
navigate between the pages.
Now even if you plan on spending all of your time writing note applications it's still worth at least
brushing up on the basics of HDL and CSX.
That's going to allow you to create nice front end stuff for your note J S applications.
Now even if you're on a large team or that's not your job it's still nice to have that skill set so
you can whip up together something basic at least making it look a little nicer than it would otherwise
be with no styles in place.
All right.
That's it for this video.
And that is it for this section.
We covered quite a bit in this section exploring a few very important topics we explored how to setup
a web server with Express.
And we did that in app dot J S.
We learned all sorts of things like how we can use handlebars to render templates how we can serve up
static assets and how we can send back Jason data set up for all four pages and more now we've still
only scratched the surface of what Express can do.
It's something we'll end up using throughout the rest of the class even as we integrate more advanced
features like real world databases.
I'm excited to continue on with the course.
I'll see you in the section intro for the next one.