All right.
So welcome back.
In this lesson we're going to talk in detail about each t AML and c assess the goal of this lesson is
really to create the look and feel of the Web site and in the process we're going to learn how to work
with H Jim and that elements to our site.
And we're also going to learn how to style the Web site with CSX.
So what does our Web site look like at the moment.
What does our stop project actually look like.
Well it looks something like this.
So the objective of this lesson is to get this stuff project which I've got here on my right now to
look more like the final version of the Web site which I've got on the left.
So our objective for this lesson is really to do two things.
First we need to add some new elements to our Web site.
And that means adding a big title using each demo and also adding a canvas for drawing using HDMI.
And then we have the style the two existing elements from the Stop project namely the button and the
equation.
So how we're going to go about this how we're going to add the title and the canvas for that we're gonna
use HCM L which is all about the structure of the website and how we're going to style everything for
that.
We're gonna use CSX which is all about the style to get started.
Let's open three programs.
This code chrome and our Jupiter notebook for the Jupiter notebook just bring up your Anaconda prompt
or your Mac terminal and type Jupiter notebook and then go to your M.L. projects folder and then open
the latest Jupiter notebook.
Now you're also gonna need yes code for this lesson.
So make sure you've got that open as well.
And in this code you're simply going to open the math guard and stub folder that way you should see
all the files in that folder appear here in the Explorer pane finally go to the index dot each mail
file and open it with Chrome.
Let's begin by adding a title to this web page.
And to do that we're going to go straight into as code.
Once you've got this code open and you're in the index dot each time l file you should see this comment
right here.
And we're going to add our title just below that line by opening the angled brackets and then using
the drop down menu to select the H one tag we can add a title simply by hitting enter on our keyboard
to selected closing the angled brackets and then adding the title between the angled brackets like so
title goes here.
So I've added a title and I'm going to save it by hitting controller command s on my keyboard going
back into chrome and refreshing my page.
And what you should see is the title that we've added to our HMO file appear right here.
Let's change this title to math Gordon.
So coming back here I can modify this text right here to read math Gordon instead.
And again I would have to save my changes
go back into chrome and refresh to see those changes applied.
So what do we just do.
What was this each one that we've added here.
Well we've just written some age Jamal code and this H1 one that we've got right here stands for heading
number one the biggest boldest and most important heading on the Web site.
So while that's very well and good let's try to understand the syntax a little better the way that each
team l works and is structured is by paying attention very closely to three components.
So if we got our H all that looks like this then the first thing that we have to be aware of is the
opening tag and this is the name of the H Temple element.
In this case it's our H1 tag.
The second thing we have to be aware of with the syntax is the closing tag which is at the end and it's
marked with the name of the element but preceding the name you have that forward slash the final component
in H2 email is of course the contents.
So these are the words I've got here in the middle.
Now this structure should actually look a little bit familiar.
We've actually seen something that's very very similar to this before.
Remember our module on gradient descent in this module we were inserting markdown cells into Jupiter
notebook and formatting them with something called late type notation.
So if I double click on the cell I can see that this nice equation that we've got here is actually formatted
using these opening and closing tags just like our HDMI l our late tech notation has beginning and ending
tags that surround the content.
So if we go into our Jupiter notebook and say we go down to the very very end and we add some markdown
cells here and you want to add some of your own equations then the way to do it is simply by adding
some opening tags in the case of latex.
It's the two dollar signs and then writing your equation saying F of X is equal to for X to the power
of two plus five and then closing this off with two dollar signs again and shift into we'll show an
equation like so.
But here's the kicker.
Jupiter doesn't actually just support latex markdown it also supports H2 AML and that means we can add
headings and other H2 metal elements not just toward the website that we're creating but we can also
add them straight to Jupiter so check this out.
I'm going to add a couple of cells here and I want to change this one to mark down and I'm gonna type
the very same thing that I had in the HMO file in V.S. code so open angled brackets each one closing
angle brackets and you can even see the syntax highlighting change here and I'll write this is an H1
heading and then I've got the angle brackets and I have to insert my closing tag with the forward slash
and then the name of the element which in this case was H.
Now if I hit shift enter on here then you should see that we've got this H email code running in our
Jupiter notebook as well.
So this means that whatever you're learning in this lesson about each HDL L and CSF styling can just
be used for creating a Web site.
You can also use it to style your notebooks.
So at this point you might ask well OK that's very nice but how do I actually know which each chair
Mel tags are out there and which ones I can actually use in my notebook.
And the answer is is that you can find out all about h to melt on my two favorite Web sites for documentation
which are MDA N and W three schools.
I want to put the links to both of these Web sites in the lesson resources.
So either google the name MDA n or go straight to the lesson resources and find the links there.
Now the H1 heading of course isn't the only heading out there.
So as a challenge can you add the second and the third largest headings to this Jupiter notebook.
Head on over to the NBN web docs or w three schools to find out what the h Tim l tags are called and
then try your hand at adding a markdown cell to Jupiter and adding them there.
I'll give you a few seconds to pause the video before I show you the solution.
All right so here's the solution.
What I would do is straight up Google for each Tim headings Emdin and get taken to this site right here
and here I've got a list and I've even got a little example here on the right.
So there's the H1 H2 all the way through to H six.
And to add them to Jupiter all we need to do is changes to a markdown.
And again at H2 and see this is an H2 heading and then close the tag at the end and we can even take
this copy out and add the h three at the end and change all the H 2s to h three.
And now we've got a nice sized comparison inside Jupiter.
Excellent.
So now we know how each terminal tax work and where to find them but it still leaves one question open.
How do we actually change the styling of these headings to change the styling.
We need to learn about something called H Tamal attributes.
So what is the syntax look like for each terminal attributes.
Let me show you an example.
So say I've got my heading here and I want to give this an attribute that gives this heading a unique
identifier.
To do that I want to use this attribute called I.D. and the syntax 4D H.M. attributes just consists
of an attribute name which I've highlighted here in blue and an attribute value which follows the equals
sign of the attribute and is just inside the opening tag of the HMO element.
So crucially these attributes are before the second angle bracket for the H terminal tag.
And that brings me to changing the style.
We can change the style of an HMO element using these style attributes.
This is one way of changing the look and feel of an HMO element.
So say we've got this heading right here.
If we wanted to change the colour of this heading we would add these style attribute like so.
And then for the value of this attribute we would write color code on blue.
And what we're doing here is changing the colour of this heading to blue.
But the interesting bit here is that the attribute value is actually CSL coat.
So what we've got is CSI as code inside the temple tag.
Now as a challenge I'd like you to pause the video and change the second heading in the Jupiter notebook
to blue and change the third heading to this shade of wisteria.
This shade of purple and you can get this particular shade off this website called Flat UI eye colors
that come and go to their default color palette and copy this shade right here you'll find a link to
this website in the lesson resources of course once again I'll give you a few seconds to pause the video
so you can modify the style attribute of this HDMI tag and add your CSX code.
Ready.
Here's the solution.
So if I reveal the HMO code inside the cell then you've got here in the mark down you've got this attribute
cult style and the attribute value for the each to heading is this bit of CSX code right here and here
we're setting the color equal to blue for the third heading what I've done is I've gone over here to
this website and I've copied the actual hex code and then instead of providing a color name I've provided
a hex code for the color.
Now you can actually tag on more and more styling properties one after the other.
So if I put a semicolon here and add another C Ss property see one called font size separated by a hyphen
and set this particular property to two hundred p x two hundred pixels.
Then I'm going to get an enormous H 3 heading so the sky's really the limit.
You can add as many CFS properties as you like in this each time l styles attribute but if I go back
to the stop project you might be wondering looking at this h t email file where all the style attributes
all is that we've got a different way of styling our HMO elements than putting this ISIS code directly
inside the tag for the HMO attribute instead what we've done is we've separated it out.
We've got a separate file that just does the styling so we've got one file for the structure and one
file for the styling of our website.
This way we're not actually mixing the HDMI L and the CSX the way we did here in the Jupiter notebook.
So how are these two files actually linked.
How does the CSF file know how to style the elements in the HDMI file.
And the answer is is that there really are three ways to keep these styling external to the HMO file.
The first way is linking the styling in the C Ss file to an H Jamil element by that elements I D.
So in this case if our heading here has an I.D. called title then we can style that heading by using
its identifier.
So in the CFS file we would have code that looks something like this.
We would have that hashtag or pound symbol followed by the I.D. and then between the curly braces we
would have all the styling attributes that we want to apply to that heading so let's head back to V.S.
code and put this into practice.
Let's style our H one element using a unique I.D. so we can come in him inside the opening tag for our
H one and we can see I.D. is equal to and then single quotes title.
Now what we can do is we can head over to our styles Nazi SS file and at the top where I've got my comment
just below the to do we can add a pound symbol and then the name of our I.D. title and then some curly
braces and you can see that V code is kind enough to have the closing curly brace.
As soon as I type the opening curly brace and here going to add two properties the first one is a color
and for the color I'm going to go for a particular shade of red.
It's kind of between a pink and a red and this is gonna be the red with a hex code that goes FC eight
C 9 3 1 really nice feature of v s code is that it actually recognizes color hex codes and it actually
brings up a little window here telling me exactly what shade I've got in this preview here.
And when I hover over my hex code so I don't even have to search what this hex code is in Google.
At the end of this year says proper team I want to put a semicolon and I'm going to go down to the next
line and just specify what the line height should be for my title.
So this is the line height property colon and I want to go 50 pixels so fifty P x close itself again
with a semicolon and I'm going to hit save on my keyboard and you should see this little dot go away
at the very top means we've got unsafe changes and then I'm going to go to my index that each time l
file and then I'm also going to save and I should see that dot disappear.
And now when I head back into my stop project and refresh in Google Chrome then I should see the styling
applied to my Web site.
So I've got mascara now and this shade of red and I've got the line height specified to 50 pixels.
So what we've done is we've got this hashtag right here in front of the word title title being the idea
of my age one element.
And what this thing is actually called is a CSX selector.
We are selecting an element by the I.D. in this case but this CSX selector is not the only selector
out there because we don't actually have to go by element I.D..
We could also select by element.
So how would the CSX code look in this case.
What would it look like if we're selecting by element.
Well in this case our H2 mill might have no attributes at all.
So here I've just got an H1 reading my heading.
And in order to style this particular H1 I would just have CSX code that has the name of the element.
And then in the curly braces I have how I'm going to style it.
Pretty easy pretty straightforward right.
Just the name of the element no hashtag.
Let's put this selector into practice and V.S. code.
Let's style.
Both the H1 element and the H2 element using the elements selector in CSX.
In this case just below this to do right here and then add each one and then because I'm styling more
than one element I won't have the H right here.
And then between the two curly braces I'm going to add a font weight.
So how thick the font is and a font size how large I want the font to be.
So the font weight and you can see here I'm just typing a W and V.S. code is actually going to help
me with autocomplete for the rest.
I'm going to add 400 cordon at the end and I can move on to the font size.
And this I want to be equal to 200 p x 200 pixels.
And if I save my CFS file head back into chrome and refresh then I can see my title and my equation
has become very large indeed because this is my H2 and this is my H 1.
So now we've seen two ways of selecting elements in the CSX code.
The first way was by the elements I.D..
So that's using this pound symbol here and then the name of the I.D. and the second way was by element.
So H1 and H2.
Now you can look at the CSX code here and probably spot which other element we're styling by element
and that's the very first one at the top.
We're selecting the entire body of the website and styling it like so.
Whereas the body.
Well it's right here.
It's the body of the entire document you can get a good visual on this by going to the Chrome developer
tools.
Just go to more tools and then developer tools.
And then if you hover over a particular part of the NHT Mal code you'll see it highlighted on the left
hand side.
So this is our H1.
This is our H2 and this is the body of the page now.
There's a third yes selector that's really important and that we have to learn about and this is the
selector where we're selecting by class the H2 AML code looks really really similar to the first case
where we've got the I.D. but in this case the attribute is different here instead of the I.D. We're
using the word class and we're giving it a value.
And in this case I'm calling it core classes equal to core but what does this mean.
Well class is just a category that you've made up.
So in this case I've got a category called core.
Why is this useful.
Well say you've got multiple elements right.
Say for example you've got five H2 elements.
And what you really want to do is you want to style three of them one way and you want to stall the
other three in a different way.
So how can you do this well you could create two groups you could divide the headings into two different
categories and if you give the first group a name called core and the second group a name called Extra
then you could refer to all the members of this first group by selecting by class and the CSX code would
look like this.
So we'd have dot core core being the name of the class and then open curly braces all the properties
that you want to use for styling them and then the closing curly brace pretty simple right.
Let's head back into our star project and see if we can spot where we've used the class selector so
far.
If we take a look at our index that each time l file and scroll down a bit then we can see this button
right here and this button has a class that's equal to Beatty in short for button.
And if we take a look at our styles that CFS file and we scroll down then we see that we're selecting
this button using the class selector so don't B10 and then we're styling it with all of these properties.
Now how do we go about styling this button.
Well first let's change the button text instead of button text here.
Let's have it read.
Check.
Answer So going into our index that each time l I can change this value right here the contents of the
button text and change it to check.
Answer I can save my work.
Go back here refresh and then we have it.
Now I've got a challenge for you.
We can actually stall this button differently.
Whether or not our mouse is hovering over the button in the final project we wanted to look something
like this.
So when we hover over it we want the color of the button to change to be equal to the background color
and we want the text of the button to change into white.
So this is the behavior that we want on our Web site and the way we can achieve this is using the CSA
as class selector.
Now to solve this challenge you'll need to do a couple of things.
First you can have to figure out what the syntax is for changing a buttons styling depending on whether
or not it's being hovered over.
And I recommend checking the documentation on Emdin or W three schools for the solution.
The next thing you're gonna have to do to solve this challenge is you're going to have to change to
styling properties.
You can have the change the background color and the color.
So for the background color you can have to make it equal to this blue right here.
And for the text color you're going to have to make it equal to white.
I'll give you a few seconds to pause the video.
Have a Google and try to figure out what the code is gonna have to be in order to get this effect
ready.
Here's the solution.
So I'm going to write CSX change button on hover and I just type that into google and then I'm going
to head over to W3 schools and there when I scroll down I can find a little bit of code here.
But this is just about basic buttons styling scrolling further down.
I can see how to create a rounded button colored button and also a hoverboard button.
Now this looks promising right.
If I take a look at their code snippet here then I can see that they're selecting the button using the
class selector so don't button that dot is the give away here and then they've got this colon and hover.
So they're styling the button differently depending whether or not it's being hovered over.
So this looks very very promising right.
I'm going to select this code and I'm going to copy it and I'm going to go back into this code.
So here we're going to go to our styles that CSX.
And for that to do at the bottom I'm going to paste in the code from W3 schools.
Now there's a couple of modifications I'm going to have to make to this code to get it to work.
First off what's our class called.
Well it's not called button right.
It's actually called B10.
I want to have to change this selector here to B10 colon hover and then I wouldn't have to change these
colors so if I save my changes right now and I go back into chrome and I refresh then it's going to
turn green when I hover over it.
But this isn't really the effect we want.
We want this color right here.
So where do we get this color.
Well we can look at how we're selling our body and we can copy this hex code that we've got here as
a background color and instead of the green we're going to paste in the hex code for the blue and that's
it.
If I save the changes head back into chrome refresh then I've got the behavior that we want brilliant
now there's just one piece missing right.
And that's the canvas.
So I've got the final project appear pier and you can see that I've got this canvas here that I can
draw on but we still haven't added this yet to our stop project.
So as a final challenge what I'd like you to do is add an HMO canvas to the index that each team will
file right below this to do
ready.
Here's the solution.
So if you searched the documentation on Emdin for how to add an HMO canvas then you'll get taken to
a page like this.
And here what we've got is a basic example where we can see that the name of the element is just canvas.
So that should be pretty straightforward to add to our file.
If I scroll down a little bit more I can even find a canvas tutorial.
And if I click on this and scroll down a little bit then I can see that there is a fairly comprehensive
tutorial on how to work with an H2 male canvas.
But let's go to the beginning.
Let's check out basic usage in here what we've got is a video like a code snippet where I can see that
there actually exists a height and a width attribute even set to 150.
So I'm going to take this bit of code here.
I'm going to copy it and I went head over to my HD him Al file.
I'm going to paste it in.
And I'm going to delete this I.D. attribute.
Now I'm going to save my work and then I'm going to go over to Chrome and refresh my site to see what
this looks like and I can't actually see anything here.
Why is that.
Let's bring up the Chrome developer tools and we're going to expand and see where our canvases.
So if I hover over the actual code I can actually see my canvas but it looks like it's invisible on
my actual Web site.
So what's going on.
Well I've actually missing the styling so I'm going to have to add my styling to this canvas in order
to get the look that I want and here's how we're going to do it.
Let's select this canvas by its I.D..
So when I give it an I.D. with the I.D. attribute and I'm going to call it my hyphen canvas in single
quotes then and when I save my changes in the H to Mal file and head over to the CSX file and below
this to do I'm going to select this canvas by its I.D. to use the I.D. selector in CSX we use the hashtag
and then we can write my hyphen canvas and then between the curly braces we can specify some of its
properties.
Now to style this canvas I want to specify five things I'm going to vertically align it to the top.
I'm going to display it in line.
I'm going to add a border of five pixels that's solid and white and then I'm gonna save my changes and
take a look at what these three properties actually translate into on my Web site.
So if I come back here and I refresh that I can see this border and I can see how it's aligned with
my H2.
So now my canvas is in line with my equation.
All right.
So congratulations of making it all the way through this very information dance lesson we've learned
quite a lot of things we've learned everything from how to add each two male elements to our Web site
and to our Jupiter notebook.
And we've also learned a lot of different ways of styling our HMO elements using CSX.
So where are we going from here.
Well first off what we're gonna do is we're going to test our tensor flow model that we've painstakingly
exported.
We're going to check if it actually works on our Web site and then we're gonna have to write the logic
for being able to draw on our canvas because at the moment we can't draw on our canvas and our canvas
doesn't have this black background that the final project will have.
So these are all things that are still on our to do list.
The best part about all those is that now that we've wrapped up our design of our website we can focus
on the logic.
We can start writing some javascript code for all of that and more I'll see you in the next lessons.
Take care.