1
00:00:00,360 --> 00:00:01,380
Welcome back.

2
00:00:01,380 --> 00:00:04,380
So in this video we're going to focus on the front end.

3
00:00:04,620 --> 00:00:08,790
We're going to learn about each TMLC assessed in javascript on a high level we're not going to actually

4
00:00:08,790 --> 00:00:12,530
write any code yet but we will be seeing code for the first time.

5
00:00:13,140 --> 00:00:17,900
So there's two big things you want to know which is what's different between front and back end.

6
00:00:18,040 --> 00:00:23,970
And then also what's the difference between H.M.S. SS and Javascript and what are their respective roles

7
00:00:23,980 --> 00:00:24,500
.

8
00:00:25,080 --> 00:00:28,740
So let's start by discussing Front-End versus bacot.

9
00:00:28,860 --> 00:00:35,610
So when I go to a you know let's say Go to Facebook I hit Facebook dot com I hit enter.

10
00:00:35,610 --> 00:00:43,050
And if you'll remember back to the video on how the web works I create a HTP request asking for Facebook

11
00:00:43,050 --> 00:00:50,850
dot com and that goes to Facebook server or eventually Facebook then decides what page to send me back

12
00:00:50,870 --> 00:00:51,050
.

13
00:00:51,210 --> 00:00:56,760
So in the case of Facebook it needs to figure out what images what stories how many likes they have

14
00:00:56,760 --> 00:01:02,400
what friends I have what posts are at the top of all my settings high profile pictures all the stuff

15
00:01:02,400 --> 00:01:03,790
that pertains to me.

16
00:01:04,110 --> 00:01:10,200
And then it sends it back to me sends me h tim elsea says in javascript my browser displays that for

17
00:01:10,200 --> 00:01:10,870
me.

18
00:01:11,370 --> 00:01:16,980
So this diagram here kind of just explains the difference between front and the back end where everything

19
00:01:16,980 --> 00:01:21,650
that I get back in that I see in the browser is just H.M.S. Yes.

20
00:01:21,720 --> 00:01:24,190
And javascript just the tip of the iceberg.

21
00:01:24,270 --> 00:01:28,910
But it is what my browser sees it is the front end or the client side.

22
00:01:29,250 --> 00:01:31,960
It is constructed by the backend.

23
00:01:32,370 --> 00:01:34,360
Everything else that happens all the logic.

24
00:01:34,440 --> 00:01:40,680
Figuring out if I'm logged in figuring out who my friends are what photos I have what posts I've posted

25
00:01:40,680 --> 00:01:42,000
how many likes they have.

26
00:01:42,000 --> 00:01:45,970
All of that comes from the backend or the server side logic.

27
00:01:46,200 --> 00:01:48,000
So you can see there's a lot more here.

28
00:01:48,030 --> 00:01:50,820
The technology is there's so many choices on the front end there's not.

29
00:01:50,850 --> 00:01:58,010
It's always HTML CSS and javascript on the back end you've got different languages like Python ph P

30
00:01:58,020 --> 00:02:01,180
Ruby javascript actually which is what we're going to use.

31
00:02:01,350 --> 00:02:06,570
There's different databases you've got postgrads and Mongo and couch D.B and Mya's.

32
00:02:06,570 --> 00:02:09,320
Q Well and sequel Lightener's there's so many choices.

33
00:02:09,390 --> 00:02:11,010
So it's a little intimidating.

34
00:02:11,040 --> 00:02:15,060
We're going to definitely talk a lot more about the back end when we get to that unit.

35
00:02:15,060 --> 00:02:20,940
But for now just remember that the back end is what constructs the H to melt and the C S that is sent

36
00:02:20,940 --> 00:02:21,770
back.

37
00:02:21,780 --> 00:02:27,200
So let's take an example here what my favorite restaurant in San Francisco is called lazy bear.

38
00:02:27,390 --> 00:02:28,890
Here's the restaurant page.

39
00:02:29,100 --> 00:02:31,580
This page is always the same.

40
00:02:31,620 --> 00:02:32,810
I mean it could be changed.

41
00:02:32,820 --> 00:02:34,790
But in order for it to be changed.

42
00:02:34,920 --> 00:02:38,600
The developer has to go into the H.T. amount and manually change it.

43
00:02:38,610 --> 00:02:44,490
So basically I refresh the page every time I get the same homepage I get the same frequently asked questions

44
00:02:44,730 --> 00:02:46,540
the same contact us page.

45
00:02:46,580 --> 00:02:48,650
That's not a bad thing but it doesn't need to change.

46
00:02:48,660 --> 00:02:50,580
It's just a restaurant a page.

47
00:02:50,610 --> 00:02:55,520
However the Yelp page for lazy bear is dynamic.

48
00:02:55,530 --> 00:03:01,110
It does change so any time a new review is written it's going to show up here every time and let's say

49
00:03:01,170 --> 00:03:05,070
in this case let's rate it 5 stars.

50
00:03:05,070 --> 00:03:06,590
I read a review.

51
00:03:07,170 --> 00:03:11,840
Well you probably reject my review but if I wrote a review it would show up here.

52
00:03:11,880 --> 00:03:17,000
Things are dynamic they're happening at all times so I could say oh that was a useful review.

53
00:03:17,190 --> 00:03:18,700
That was a funny review.

54
00:03:19,140 --> 00:03:23,510
And those votes that I've added are stored in a database.

55
00:03:23,520 --> 00:03:27,060
Something is happening I'm interacting with this and it is persisting.

56
00:03:27,060 --> 00:03:32,010
So if I refresh the page now it's different not very different.

57
00:03:32,100 --> 00:03:36,350
But whereas before I didn't think this was funny now it remembers.

58
00:03:36,350 --> 00:03:37,740
I thought it was funny.

59
00:03:37,740 --> 00:03:44,250
So basically the point is when I go to this page I ask for this you Arel Yelp doesn't just always send

60
00:03:44,250 --> 00:03:45,650
the exact same thing back.

61
00:03:45,840 --> 00:03:49,060
It's going to figure out OK is the user logged in.

62
00:03:49,290 --> 00:03:52,600
If so we want to put his profile picture up here.

63
00:03:52,710 --> 00:03:53,980
Has he voted on anything.

64
00:03:54,000 --> 00:03:54,470
Yes.

65
00:03:54,510 --> 00:03:57,990
OK let's make sure that you know we highlight it correctly.

66
00:03:58,000 --> 00:03:59,260
Change the color.

67
00:03:59,310 --> 00:04:01,530
Don't let him vote again and so on.

68
00:04:01,530 --> 00:04:05,420
And then that constructs to him elsea says and Javascript and it sends it back.

69
00:04:05,430 --> 00:04:10,150
So another example of a page that is definitely dynamic is Google News.

70
00:04:10,620 --> 00:04:15,330
Every time I refresh I mean almost every five minutes something changes on here whether it's the weather

71
00:04:15,330 --> 00:04:17,780
over here NFL scores.

72
00:04:17,820 --> 00:04:19,260
I mean these are live updating.

73
00:04:19,290 --> 00:04:23,190
Maybe it's the new story there's breaking news something changes.

74
00:04:23,190 --> 00:04:25,590
This is very very different every time.

75
00:04:25,620 --> 00:04:28,840
However this is always the same.

76
00:04:29,130 --> 00:04:31,020
So again the difference is two things.

77
00:04:31,020 --> 00:04:34,530
One is static page versus a dynamic page.

78
00:04:34,530 --> 00:04:36,650
Both of them are web pages.

79
00:04:36,660 --> 00:04:39,920
Both of them are TMLC s s and Javascript coming back.

80
00:04:40,110 --> 00:04:46,770
One is going to change based off of some sort of server side code something on the back end.

81
00:04:47,340 --> 00:04:49,600
So I also like this analogy of a restaurant.

82
00:04:49,740 --> 00:04:52,350
So if you magically go to a restaurant you sit down.

83
00:04:52,380 --> 00:04:58,230
Let's say you order a steak when you order that steak you're making a request that goes back to the

84
00:04:58,230 --> 00:05:01,060
kitchen the kitchen prepares everything for you.

85
00:05:01,080 --> 00:05:02,350
That's sort of the back end.

86
00:05:02,460 --> 00:05:05,710
It decides what ingredients to get how long to cook them.

87
00:05:05,970 --> 00:05:11,430
Everything on a plate and then a waiter or waitress comes and brings that to your table.

88
00:05:11,430 --> 00:05:12,480
So it's very similar.

89
00:05:12,480 --> 00:05:16,880
You make a request the chef or the kitchen is the server.

90
00:05:17,070 --> 00:05:22,530
This part of the iceberg that is concocting everything cooking it putting it together and then finally

91
00:05:22,530 --> 00:05:26,040
it is sent back to your table which is you on the client side.

92
00:05:27,290 --> 00:05:29,840
So now let's break down those three pieces aged him.

93
00:05:29,940 --> 00:05:31,610
Says in Javascript.

94
00:05:32,390 --> 00:05:35,310
So we're going to go into a lot of detail on each of those components.

95
00:05:35,330 --> 00:05:39,420
There are separate sections and units but HDMI will start there.

96
00:05:39,530 --> 00:05:43,760
Stands for hypertext markup language basically.

97
00:05:43,760 --> 00:05:44,870
Imagine that.

98
00:05:44,880 --> 00:05:47,900
And this is what actually happened in the early days of the Internet.

99
00:05:47,960 --> 00:05:53,610
There was no standardized way to send information and to send documents.

100
00:05:53,720 --> 00:05:59,810
So initially you know the Internet was used to send to communicate between universities and colleges

101
00:05:59,820 --> 00:06:01,510
and also as a military tool.

102
00:06:01,520 --> 00:06:06,040
So let's just say I wanted to send a I wanted to send this to a friend.

103
00:06:06,560 --> 00:06:10,160
I need to say OK this is bolded.

104
00:06:10,250 --> 00:06:12,170
These are little bullet points.

105
00:06:12,260 --> 00:06:14,770
I've got some text and quotes around this.

106
00:06:14,770 --> 00:06:19,240
I need a way to break that down and describe it to send to somebody else.

107
00:06:19,580 --> 00:06:28,230
And the solution was HMO so HMO is it's actually the easiest thing that we're going to learn not to

108
00:06:28,220 --> 00:06:35,390
say that it's insane easy but it is very simple in that we just describe what we want and what you write

109
00:06:35,390 --> 00:06:36,450
is what you get.

110
00:06:36,440 --> 00:06:39,800
So HMO is often referred to as the noun's of a web page.

111
00:06:39,810 --> 00:06:40,830
It's the structure.

112
00:06:40,820 --> 00:06:48,360
Some people say the skeleton basically say put an image here put a bullet point here put a heading here

113
00:06:48,360 --> 00:06:50,570
put a slightly smaller heading just below that.

114
00:06:50,570 --> 00:06:58,350
It allows you to describe the structure of a page CSSA on the other hand it's how we describe the style

115
00:06:58,340 --> 00:07:04,720
of a page I need HVM how to use the assess CSSA on its own doesn't really do anything at all.

116
00:07:04,740 --> 00:07:10,540
Every single web page has HMO some web pages don't have C S S Some don't have javascript.

117
00:07:10,540 --> 00:07:11,620
It's not mandatory.

118
00:07:11,700 --> 00:07:18,350
H Tim L is so c s s cascading style sheets will learn exactly where that name comes from and a little

119
00:07:18,360 --> 00:07:18,990
bit.

120
00:07:19,010 --> 00:07:26,030
Basically it's styles existing HMO so you can say things like make all those bullet points green.

121
00:07:26,150 --> 00:07:32,980
Give the first image a yellow border give the last image a big pink border with dashes through it.

122
00:07:33,000 --> 00:07:39,110
It's often considered the adjectives of a web page or some people would say the skin to the H.T. a male

123
00:07:39,360 --> 00:07:44,000
skeleton and the last piece here is javascript.

124
00:07:44,000 --> 00:07:49,170
Javascript is probably its definitely the most complex thing out of these three.

125
00:07:49,380 --> 00:07:52,940
It's how we add Bahjat and interactivity to a page.

126
00:07:53,210 --> 00:07:58,940
So with us and Javascript we can make a beautiful looking site but it's not going to do anything really

127
00:07:58,940 --> 00:08:02,830
we can do simple animations but we can load data from somewhere else.

128
00:08:02,830 --> 00:08:08,150
You can't make things interactive we can't add logic or have a game with javascript we can use some

129
00:08:08,150 --> 00:08:13,650
of the example I have here or do some math change color when the user clicks load.

130
00:08:13,640 --> 00:08:15,900
New data from Twitter get the current weather.

131
00:08:15,890 --> 00:08:17,640
The current NFL scores.

132
00:08:17,730 --> 00:08:25,730
If h tim L is the nouns C Ss is the adjectives then javascript is the verbs are the actions on a page

133
00:08:25,740 --> 00:08:26,230
.

134
00:08:26,330 --> 00:08:33,400
So I have this all wrapped up nicely in a code and so code pen is a wonderful sight.

135
00:08:33,410 --> 00:08:39,160
We're not going to use a whole lot but because we haven't really started writing H-2 him LCS and Javascript

136
00:08:39,160 --> 00:08:39,460
.

137
00:08:39,620 --> 00:08:45,090
I'm going to use this as an example and what this does it lets you just write simple pages in the browser

138
00:08:45,290 --> 00:08:50,330
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

139
00:08:50,340 --> 00:08:51,260
easily.

140
00:08:51,260 --> 00:08:54,900
I have three sections h TMLC SS and Javascript.

141
00:08:54,980 --> 00:08:58,100
Again the code itself is not what's important here.

142
00:08:58,130 --> 00:08:59,650
It is the concepts.

143
00:09:00,050 --> 00:09:06,710
So let's take a look and I'm going to actually get rid of my C-s us.

144
00:09:06,870 --> 00:09:11,280
I'm going to get rid of my jobs and you'll see what we're left with.

145
00:09:11,270 --> 00:09:14,490
Plain black and white structural material.

146
00:09:14,510 --> 00:09:21,890
I'm specifying my content so these are my words and I'm wrapping that content in specific structural

147
00:09:21,890 --> 00:09:24,270
elements so in H1.

148
00:09:24,530 --> 00:09:26,530
And again this is one of those times.

149
00:09:26,580 --> 00:09:28,730
Don't worry about the specific syntax.

150
00:09:28,910 --> 00:09:32,920
We have so many videos ahead that are going to go into detail and each one of these.

151
00:09:33,050 --> 00:09:36,910
But basically this is saying make big text right here.

152
00:09:36,980 --> 00:09:43,010
This is saying make a list and make it individual list item that says Make me a bullet point and another

153
00:09:43,010 --> 00:09:47,510
one that says make me another bullet point and then make a button that says Make me a button here.

154
00:09:47,540 --> 00:09:50,950
As you can see so on it's own that is just the structure.

155
00:09:50,960 --> 00:09:54,110
So now let's go at or see us back in.

156
00:09:54,120 --> 00:09:55,970
You can see what I'm doing here I'm saying.

157
00:09:56,120 --> 00:10:03,750
Make the H-1 which is here make it purple so we can change that to be green and it changes to green

158
00:10:04,490 --> 00:10:12,830
and I'm also saying make the button have a border have a background color and a text color of white

159
00:10:13,700 --> 00:10:17,730
so we can change that to be green text color.

160
00:10:17,780 --> 00:10:20,020
It's hard to see what that changes the green.

161
00:10:20,120 --> 00:10:26,970
I can give it a much bigger border 20 pixels she could see there so that there are adjectives and the

162
00:10:26,960 --> 00:10:31,610
last piece is our Javascript.

163
00:10:31,970 --> 00:10:35,420
So without javascript that button does nothing.

164
00:10:35,450 --> 00:10:41,180
Now what we've done is written javascript that says when the user clicks the button.

165
00:10:41,340 --> 00:10:50,030
Pick a random color and change the background color here to that random color so that I can click and

166
00:10:50,030 --> 00:10:51,640
I get a random color.

167
00:10:52,460 --> 00:10:57,800
So if I got rid of this javascript and I tried to do that again nothing happens because I don't have

168
00:10:57,810 --> 00:10:58,440
any verbs.

169
00:10:58,430 --> 00:11:00,410
It's just nouns and additives.

170
00:11:00,450 --> 00:11:05,840
Just the structural skeleton and a little bit of skin on top as I add my javascript in I can add the

171
00:11:05,850 --> 00:11:06,520
logic.

172
00:11:06,840 --> 00:11:08,300
So javascript really important.

173
00:11:08,370 --> 00:11:14,100
This isn't exactly what you would do most likely on a real production site but you would have maybe

174
00:11:14,100 --> 00:11:16,110
a game you might make mine sweeper.

175
00:11:16,130 --> 00:11:19,800
This might be Facebook chat it might be a form to sign up for a page.

176
00:11:19,860 --> 00:11:22,080
You use javascript to make it interactive.

177
00:11:22,280 --> 00:11:25,510
So again I encourage you to play around on code pen.

178
00:11:25,640 --> 00:11:28,340
You have to link to this and explore a little bit.

179
00:11:28,350 --> 00:11:30,280
There's no rush to move edge the next video.

180
00:11:30,290 --> 00:11:32,960
Try changing some of these colors if you want.

181
00:11:32,960 --> 00:11:34,590
Try changing some of this.

182
00:11:34,640 --> 00:11:36,190
Don't focus on the code.

183
00:11:36,290 --> 00:11:40,020
It's just fun to play around with but there's no pressure to understand any of this.

184
00:11:40,040 --> 00:11:46,060
Aside from a very high level overview of what HDMI does what C S does and what javascript does.

185
00:11:46,340 --> 00:11:46,630
Right