Welcome back.
So in this video we're going to focus on the front end.
We're going to learn about each TMLC assessed in javascript on a high level we're not going to actually
write any code yet but we will be seeing code for the first time.
So there's two big things you want to know which is what's different between front and back end.
And then also what's the difference between H.M.S. SS and Javascript and what are their respective roles
.
So let's start by discussing Front-End versus bacot.
So when I go to a you know let's say Go to Facebook I hit Facebook dot com I hit enter.
And if you'll remember back to the video on how the web works I create a HTP request asking for Facebook
dot com and that goes to Facebook server or eventually Facebook then decides what page to send me back
.
So in the case of Facebook it needs to figure out what images what stories how many likes they have
what friends I have what posts are at the top of all my settings high profile pictures all the stuff
that pertains to me.
And then it sends it back to me sends me h tim elsea says in javascript my browser displays that for
me.
So this diagram here kind of just explains the difference between front and the back end where everything
that I get back in that I see in the browser is just H.M.S. Yes.
And javascript just the tip of the iceberg.
But it is what my browser sees it is the front end or the client side.
It is constructed by the backend.
Everything else that happens all the logic.
Figuring out if I'm logged in figuring out who my friends are what photos I have what posts I've posted
how many likes they have.
All of that comes from the backend or the server side logic.
So you can see there's a lot more here.
The technology is there's so many choices on the front end there's not.
It's always HTML CSS and javascript on the back end you've got different languages like Python ph P
Ruby javascript actually which is what we're going to use.
There's different databases you've got postgrads and Mongo and couch D.B and Mya's.
Q Well and sequel Lightener's there's so many choices.
So it's a little intimidating.
We're going to definitely talk a lot more about the back end when we get to that unit.
But for now just remember that the back end is what constructs the H to melt and the C S that is sent
back.
So let's take an example here what my favorite restaurant in San Francisco is called lazy bear.
Here's the restaurant page.
This page is always the same.
I mean it could be changed.
But in order for it to be changed.
The developer has to go into the H.T. amount and manually change it.
So basically I refresh the page every time I get the same homepage I get the same frequently asked questions
the same contact us page.
That's not a bad thing but it doesn't need to change.
It's just a restaurant a page.
However the Yelp page for lazy bear is dynamic.
It does change so any time a new review is written it's going to show up here every time and let's say
in this case let's rate it 5 stars.
I read a review.
Well you probably reject my review but if I wrote a review it would show up here.
Things are dynamic they're happening at all times so I could say oh that was a useful review.
That was a funny review.
And those votes that I've added are stored in a database.
Something is happening I'm interacting with this and it is persisting.
So if I refresh the page now it's different not very different.
But whereas before I didn't think this was funny now it remembers.
I thought it was funny.
So basically the point is when I go to this page I ask for this you Arel Yelp doesn't just always send
the exact same thing back.
It's going to figure out OK is the user logged in.
If so we want to put his profile picture up here.
Has he voted on anything.
Yes.
OK let's make sure that you know we highlight it correctly.
Change the color.
Don't let him vote again and so on.
And then that constructs to him elsea says and Javascript and it sends it back.
So another example of a page that is definitely dynamic is Google News.
Every time I refresh I mean almost every five minutes something changes on here whether it's the weather
over here NFL scores.
I mean these are live updating.
Maybe it's the new story there's breaking news something changes.
This is very very different every time.
However this is always the same.
So again the difference is two things.
One is static page versus a dynamic page.
Both of them are web pages.
Both of them are TMLC s s and Javascript coming back.
One is going to change based off of some sort of server side code something on the back end.
So I also like this analogy of a restaurant.
So if you magically go to a restaurant you sit down.
Let's say you order a steak when you order that steak you're making a request that goes back to the
kitchen the kitchen prepares everything for you.
That's sort of the back end.
It decides what ingredients to get how long to cook them.
Everything on a plate and then a waiter or waitress comes and brings that to your table.
So it's very similar.
You make a request the chef or the kitchen is the server.
This part of the iceberg that is concocting everything cooking it putting it together and then finally
it is sent back to your table which is you on the client side.
So now let's break down those three pieces aged him.
Says in Javascript.
So we're going to go into a lot of detail on each of those components.
There are separate sections and units but HDMI will start there.
Stands for hypertext markup language basically.
Imagine that.
And this is what actually happened in the early days of the Internet.
There was no standardized way to send information and to send documents.
So initially you know the Internet was used to send to communicate between universities and colleges
and also as a military tool.
So let's just say I wanted to send a I wanted to send this to a friend.
I need to say OK this is bolded.
These are little bullet points.
I've got some text and quotes around this.
I need a way to break that down and describe it to send to somebody else.
And the solution was HMO so HMO is it's actually the easiest thing that we're going to learn not to
say that it's insane easy but it is very simple in that we just describe what we want and what you write
is what you get.
So HMO is often referred to as the noun's of a web page.
It's the structure.
Some people say the skeleton basically say put an image here put a bullet point here put a heading here
put a slightly smaller heading just below that.
It allows you to describe the structure of a page CSSA on the other hand it's how we describe the style
of a page I need HVM how to use the assess CSSA on its own doesn't really do anything at all.
Every single web page has HMO some web pages don't have C S S Some don't have javascript.
It's not mandatory.
H Tim L is so c s s cascading style sheets will learn exactly where that name comes from and a little
bit.
Basically it's styles existing HMO so you can say things like make all those bullet points green.
Give the first image a yellow border give the last image a big pink border with dashes through it.
It's often considered the adjectives of a web page or some people would say the skin to the H.T. a male
skeleton and the last piece here is javascript.
Javascript is probably its definitely the most complex thing out of these three.
It's how we add Bahjat and interactivity to a page.
So with us and Javascript we can make a beautiful looking site but it's not going to do anything really
we can do simple animations but we can load data from somewhere else.
You can't make things interactive we can't add logic or have a game with javascript we can use some
of the example I have here or do some math change color when the user clicks load.
New data from Twitter get the current weather.
The current NFL scores.
If h tim L is the nouns C Ss is the adjectives then javascript is the verbs are the actions on a page
.
So I have this all wrapped up nicely in a code and so code pen is a wonderful sight.
We're not going to use a whole lot but because we haven't really started writing H-2 him LCS and Javascript
.
I'm going to use this as an example and what this does it lets you just write simple pages in the browser
so we don't have to use of line text we just write it in the browser and I can share it with you very
easily.
I have three sections h TMLC SS and Javascript.
Again the code itself is not what's important here.
It is the concepts.
So let's take a look and I'm going to actually get rid of my C-s us.
I'm going to get rid of my jobs and you'll see what we're left with.
Plain black and white structural material.
I'm specifying my content so these are my words and I'm wrapping that content in specific structural
elements so in H1.
And again this is one of those times.
Don't worry about the specific syntax.
We have so many videos ahead that are going to go into detail and each one of these.
But basically this is saying make big text right here.
This is saying make a list and make it individual list item that says Make me a bullet point and another
one that says make me another bullet point and then make a button that says Make me a button here.
As you can see so on it's own that is just the structure.
So now let's go at or see us back in.
You can see what I'm doing here I'm saying.
Make the H-1 which is here make it purple so we can change that to be green and it changes to green
and I'm also saying make the button have a border have a background color and a text color of white
so we can change that to be green text color.
It's hard to see what that changes the green.
I can give it a much bigger border 20 pixels she could see there so that there are adjectives and the
last piece is our Javascript.
So without javascript that button does nothing.
Now what we've done is written javascript that says when the user clicks the button.
Pick a random color and change the background color here to that random color so that I can click and
I get a random color.
So if I got rid of this javascript and I tried to do that again nothing happens because I don't have
any verbs.
It's just nouns and additives.
Just the structural skeleton and a little bit of skin on top as I add my javascript in I can add the
logic.
So javascript really important.
This isn't exactly what you would do most likely on a real production site but you would have maybe
a game you might make mine sweeper.
This might be Facebook chat it might be a form to sign up for a page.
You use javascript to make it interactive.
So again I encourage you to play around on code pen.
You have to link to this and explore a little bit.
There's no rush to move edge the next video.
Try changing some of these colors if you want.
Try changing some of this.
Don't focus on the code.
It's just fun to play around with but there's no pressure to understand any of this.
Aside from a very high level overview of what HDMI does what C S does and what javascript does.
Right