Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,359 --> 00:00:04,000
Welcome to the first actual lecture
2
00:00:04,000 --> 00:00:05,850
of this course.
3
00:00:05,850 --> 00:00:08,730
Now there is a good chance that this course
4
00:00:08,730 --> 00:00:11,090
is going to be your very first contact
5
00:00:11,090 --> 00:00:13,240
with any web development.
6
00:00:13,240 --> 00:00:17,880
And so before we start writing HTML and CSS code,
7
00:00:17,880 --> 00:00:20,060
I think it might be a good idea
8
00:00:20,060 --> 00:00:22,030
to actually begin this course
9
00:00:22,030 --> 00:00:24,520
with a very high level overview
10
00:00:24,520 --> 00:00:27,740
of this field of web development.
11
00:00:27,740 --> 00:00:29,840
So we're going to talk about things like
12
00:00:29,840 --> 00:00:34,340
clients and servers, front-end and back-end development,
13
00:00:34,340 --> 00:00:36,900
static and dynamic websites.
14
00:00:36,900 --> 00:00:39,970
And of course about the core languages
15
00:00:39,970 --> 00:00:42,993
and core technologies of web development.
16
00:00:45,070 --> 00:00:47,300
And I'm going to explain all this
17
00:00:47,300 --> 00:00:49,300
around the process that happens
18
00:00:49,300 --> 00:00:52,920
when we open up a webpage in a browser.
19
00:00:52,920 --> 00:00:54,763
Just keep in mind again,
20
00:00:54,763 --> 00:00:57,570
that this is just a high-level overview.
21
00:00:57,570 --> 00:01:01,020
And so I'm going to leave out a lot of details here.
22
00:01:01,020 --> 00:01:03,410
This is really just so you get familiar
23
00:01:03,410 --> 00:01:05,860
with some of these concepts and terms
24
00:01:05,860 --> 00:01:07,830
that all web developers know
25
00:01:07,830 --> 00:01:11,000
before you start your own journey.
26
00:01:11,000 --> 00:01:15,000
But anyway, let's say that we're trying to access a webpage
27
00:01:15,000 --> 00:01:18,840
in our browser at omnifood.dev
28
00:01:18,840 --> 00:01:21,750
And by the way, this is actually the website
29
00:01:21,750 --> 00:01:24,690
that we're going to develop throughout this course.
30
00:01:24,690 --> 00:01:28,360
Now what happens as we try to access this page
31
00:01:28,360 --> 00:01:32,420
is that our browser will send a request to the server
32
00:01:32,420 --> 00:01:35,790
where this page is hosted on the internet.
33
00:01:35,790 --> 00:01:38,480
So each and every website is stored
34
00:01:38,480 --> 00:01:42,830
on something called a Server, which is basically a computer
35
00:01:42,830 --> 00:01:45,200
that is connected to the internet
36
00:01:45,200 --> 00:01:48,633
and is able to receive requests like this one.
37
00:01:49,540 --> 00:01:53,450
So again, when we browse to a certain website,
38
00:01:53,450 --> 00:01:57,010
our web browser will send a request to the server
39
00:01:57,010 --> 00:02:01,280
where the website is stored.
So where it is hosted.
40
00:02:01,280 --> 00:02:04,020
Then when the server receives the request,
41
00:02:04,020 --> 00:02:07,520
it will take all the files that make up the website
42
00:02:07,520 --> 00:02:10,360
and send them back to the browser.
43
00:02:10,360 --> 00:02:14,890
And so we say that the server sends response to the browser,
44
00:02:14,890 --> 00:02:17,610
which essentially contains all of these files
45
00:02:17,610 --> 00:02:20,130
that the website is made of.
46
00:02:20,130 --> 00:02:23,420
Now, as you can see from these file extensions,
47
00:02:23,420 --> 00:02:28,420
we have some HTML, CSS, and also a JavaScript code here.
48
00:02:28,680 --> 00:02:31,470
And these are precisely the three languages
49
00:02:31,470 --> 00:02:34,030
that browsers can understand.
50
00:02:34,030 --> 00:02:36,840
So what this means is that all of the code
51
00:02:36,840 --> 00:02:40,000
that makes up a website needs to always be written
52
00:02:40,000 --> 00:02:43,700
in HTML, CSS, and JavaScript.
53
00:02:43,700 --> 00:02:46,530
Because again, these are essentially
54
00:02:46,530 --> 00:02:50,563
the three core technologies that any browser can understand.
55
00:02:51,420 --> 00:02:54,630
All right, now, once the browser receives
56
00:02:54,630 --> 00:02:58,340
these HTML, CSS, and JavaScript files
57
00:02:58,340 --> 00:03:00,430
from the service response,
58
00:03:00,430 --> 00:03:03,263
it will take the code and render the website
59
00:03:03,263 --> 00:03:05,380
that we were trying to access.
60
00:03:05,380 --> 00:03:08,860
So based on that code, okay.
61
00:03:08,860 --> 00:03:12,230
And with this, you already have a good understanding
62
00:03:12,230 --> 00:03:16,020
of what actually happens when we browse to a website
63
00:03:16,020 --> 00:03:18,180
and also about the technologies
64
00:03:18,180 --> 00:03:21,090
that we use to build any website
65
00:03:21,090 --> 00:03:25,790
and that process of writing HTML, CSS, and JavaScript code
66
00:03:25,790 --> 00:03:28,220
that the browser can understand
67
00:03:28,220 --> 00:03:32,570
is the process that we call Front-End Web Development.
68
00:03:32,570 --> 00:03:34,340
So whenever you hear someone
69
00:03:34,340 --> 00:03:36,810
talking about Front-End Development,
70
00:03:36,810 --> 00:03:39,463
what they mean is developers writing the code
71
00:03:39,463 --> 00:03:41,940
that is displayed in a browser,
72
00:03:41,940 --> 00:03:45,930
which is basically the front-end of a website.
73
00:03:45,930 --> 00:03:49,370
And in fact, this is essentially what we're going to learn
74
00:03:49,370 --> 00:03:53,570
in this course, or at least the very, very fundamentals
75
00:03:53,570 --> 00:03:55,370
of front-end development,
76
00:03:55,370 --> 00:03:59,470
which is learning HTML and CSS.
77
00:03:59,470 --> 00:04:01,780
Now, just as a side note here,
78
00:04:01,780 --> 00:04:04,420
whenever the files that make up the website
79
00:04:04,420 --> 00:04:06,870
are simply stored on a web server
80
00:04:06,870 --> 00:04:10,110
and are then sent to the browser as they are,
81
00:04:10,110 --> 00:04:13,394
we say that we have a static website.
82
00:04:13,394 --> 00:04:14,690
Okay.
83
00:04:14,690 --> 00:04:17,459
And this will make a little bit more sense in a minute
84
00:04:17,459 --> 00:04:21,410
when we talk about what a dynamic website is,
85
00:04:21,410 --> 00:04:24,930
but for now, just keep in mind that a static website
86
00:04:24,930 --> 00:04:27,610
is basically a website where the files
87
00:04:27,610 --> 00:04:31,960
are simply sent from the server to the browser as they are.
88
00:04:31,960 --> 00:04:34,460
So without any transformation.
89
00:04:34,460 --> 00:04:35,890
All right.
90
00:04:35,890 --> 00:04:37,970
So I hope that from this,
91
00:04:37,970 --> 00:04:40,740
you learned what front-end development is
92
00:04:40,740 --> 00:04:43,720
and also about the three core technologies
93
00:04:43,720 --> 00:04:46,020
that make up any website.
94
00:04:46,020 --> 00:04:48,930
And so now, let's take it one step further
95
00:04:48,930 --> 00:04:52,470
and talk about something called Back-end Development.
96
00:04:52,470 --> 00:04:55,240
So let's try another example here.
97
00:04:55,240 --> 00:04:57,670
And this time, let's try to understand
98
00:04:57,670 --> 00:04:59,050
what would happen
99
00:04:59,050 --> 00:05:03,490
when we try to access a website like udemy.com
100
00:05:03,490 --> 00:05:07,920
So once again, the first step is that a request
101
00:05:07,920 --> 00:05:12,920
is sent to the web server where udemy.com is hosted.
102
00:05:13,020 --> 00:05:16,020
Now, why is a website like Udemy,
103
00:05:16,020 --> 00:05:20,510
so different from something like the static Omnifood website
104
00:05:20,510 --> 00:05:22,310
that I showed you earlier?
105
00:05:22,310 --> 00:05:25,720
Well, a complex site like you udemy.com
106
00:05:25,720 --> 00:05:29,750
is really completely different from a static site,
107
00:05:29,750 --> 00:05:31,740
because there is a lot of content
108
00:05:31,740 --> 00:05:34,990
that is always changing all the time.
109
00:05:34,990 --> 00:05:38,080
Like on Udemy, there are always new courses
110
00:05:38,080 --> 00:05:41,060
and new reviews being added to the site.
111
00:05:41,060 --> 00:05:43,720
New ratings and new course length
112
00:05:43,720 --> 00:05:45,790
are calculated for example,
113
00:05:45,790 --> 00:05:48,770
and really a bunch of other things like that
114
00:05:48,770 --> 00:05:50,490
are always happening.
115
00:05:50,490 --> 00:05:53,780
And so in order to make a system like this work,
116
00:05:53,780 --> 00:05:56,500
udemy.com needs a whole application
117
00:05:56,500 --> 00:06:00,860
running on the server, and they also need a big database,
118
00:06:00,860 --> 00:06:03,840
which basically contains all the courses
119
00:06:03,840 --> 00:06:06,750
and all the reviews, all the users,
120
00:06:06,750 --> 00:06:08,700
and really all the content
121
00:06:08,700 --> 00:06:11,900
that is being displayed on their website.
122
00:06:11,900 --> 00:06:15,270
Now to do all this, front-end technologies
123
00:06:15,270 --> 00:06:19,390
like HTML and CSS are simply not enough.
124
00:06:19,390 --> 00:06:23,110
So basically with what you're going to learn in this course,
125
00:06:23,110 --> 00:06:24,470
you're not going to be able
126
00:06:24,470 --> 00:06:28,000
to build something like udemy.com
127
00:06:28,000 --> 00:06:29,010
All right.
128
00:06:29,010 --> 00:06:31,040
So to write applications
129
00:06:31,040 --> 00:06:34,380
that are actually executed on web servers,
130
00:06:34,380 --> 00:06:37,500
developers use some kind of back-end language
131
00:06:37,500 --> 00:06:41,370
like Node JS, PHP, or Python.
132
00:06:41,370 --> 00:06:46,060
So what these languages do is to take data out of a database
133
00:06:46,060 --> 00:06:50,680
and basically assemble that data into the final files
134
00:06:50,680 --> 00:06:54,610
that will then be sent to the browser as the response.
135
00:06:54,610 --> 00:06:58,520
And this whole process is called Back-end Development,
136
00:06:58,520 --> 00:07:03,000
because this is basically the invisible part of a website.
137
00:07:03,000 --> 00:07:06,260
And so it's the website's back-end.
138
00:07:06,260 --> 00:07:11,090
Now in this situation, we say that we have a dynamic website
139
00:07:11,090 --> 00:07:14,170
because the website is dynamically assembled
140
00:07:14,170 --> 00:07:16,730
from different pieces on the server.
141
00:07:16,730 --> 00:07:21,070
And that happens each time that someone visits the website.
142
00:07:21,070 --> 00:07:24,430
So returning to the example of udemy.com
143
00:07:24,430 --> 00:07:27,970
In fact, each time that you visit Udemy,
144
00:07:27,970 --> 00:07:31,350
a new version of the website is going to be generated
145
00:07:31,350 --> 00:07:35,040
from their database and sent to your browser.
146
00:07:35,040 --> 00:07:39,180
Now, on the other hand, if udemy was a static website,
147
00:07:39,180 --> 00:07:41,270
then the website files
148
00:07:41,270 --> 00:07:43,410
would already be sitting on the server,
149
00:07:43,410 --> 00:07:46,570
just waiting for someone to access them.
150
00:07:46,570 --> 00:07:47,620
Okay?
151
00:07:47,620 --> 00:07:51,660
So that's the big difference between static and dynamic
152
00:07:51,660 --> 00:07:54,700
In static, the files are already done
153
00:07:54,700 --> 00:07:57,700
and in dynamic, they first need to be generated
154
00:07:57,700 --> 00:08:01,370
by an application that is running on the server.
155
00:08:01,370 --> 00:08:02,230
All right.
156
00:08:02,230 --> 00:08:04,420
But now the rest of the process
157
00:08:04,420 --> 00:08:06,970
is actually the same as before.
158
00:08:06,970 --> 00:08:10,390
So these files are now ready to be sent to the browser
159
00:08:10,390 --> 00:08:13,410
as a response, which will then be converted
160
00:08:13,410 --> 00:08:14,890
to the final website
161
00:08:14,890 --> 00:08:18,163
like this one we see here of udemy.com.
162
00:08:19,100 --> 00:08:21,430
Great. Now of course,
163
00:08:21,430 --> 00:08:24,470
there is no need for you to memorize all these names
164
00:08:24,470 --> 00:08:26,020
that I mentioned here,
165
00:08:26,020 --> 00:08:30,040
and also no need to deeply understand this process.
166
00:08:30,040 --> 00:08:32,659
All I want here is to give you an overview
167
00:08:32,659 --> 00:08:35,929
of what front-end and back-end actually are,
168
00:08:35,929 --> 00:08:38,330
what the browser and the server are.
169
00:08:38,330 --> 00:08:42,059
And also what static and dynamic websites are,
170
00:08:42,059 --> 00:08:44,680
because I really think that this is going to be
171
00:08:44,680 --> 00:08:48,543
extremely helpful as you start your developer journey.
172
00:08:49,430 --> 00:08:52,620
But now, just to finish, let's take a closer look
173
00:08:52,620 --> 00:08:55,800
at the three languages of the front-end.
174
00:08:55,800 --> 00:09:00,030
So HTML, CSS, and JavaScript.
175
00:09:00,030 --> 00:09:02,600
And starting with HTML,
176
00:09:02,600 --> 00:09:07,570
HTML is responsible for the content of the page.
177
00:09:07,570 --> 00:09:11,200
So that's the text, the images, the buttons,
178
00:09:11,200 --> 00:09:14,890
and really all the content that you see on a webpage
179
00:09:14,890 --> 00:09:18,710
is always written inside an HTML file.
180
00:09:18,710 --> 00:09:21,070
Then the CSS is responsible
181
00:09:21,070 --> 00:09:24,060
for the presentation of that content.
182
00:09:24,060 --> 00:09:26,180
So basically for styling
183
00:09:26,180 --> 00:09:29,970
and for laying out the elements on the webpage.
184
00:09:29,970 --> 00:09:33,970
Now finally, JavaScript is the actual programming language
185
00:09:33,970 --> 00:09:35,770
of the front-end.
186
00:09:35,770 --> 00:09:37,990
So it allows us to add dynamic
187
00:09:37,990 --> 00:09:41,260
and interactive effects to webpages.
188
00:09:41,260 --> 00:09:45,670
We can also use it to manipulate the content or the CSS
189
00:09:45,670 --> 00:09:48,150
to load data from web servers
190
00:09:48,150 --> 00:09:51,690
and even to build entire front-end applications,
191
00:09:51,690 --> 00:09:55,040
which we then call web applications.
192
00:09:55,040 --> 00:09:57,020
Now we can also use the analogy
193
00:09:57,020 --> 00:09:59,830
of nouns, objectives, and verbs
194
00:09:59,830 --> 00:10:02,090
to make the separation of roles here
195
00:10:02,090 --> 00:10:04,530
a little bit easier to understand.
196
00:10:04,530 --> 00:10:09,000
So in this analogy,
HTML represents the nouns.
197
00:10:09,000 --> 00:10:13,550
For example, saying that
the P element is a paragraph.
198
00:10:13,550 --> 00:10:16,630
So paragraph is the noun here.
199
00:10:16,630 --> 00:10:19,280
The CSS then is the objective
200
00:10:19,280 --> 00:10:22,130
because it basically describes the noun.
201
00:10:22,130 --> 00:10:24,710
For example, like this piece of CSS
202
00:10:24,710 --> 00:10:28,230
saying that the paragraph text is red.
203
00:10:28,230 --> 00:10:32,020
And so red is the objective describing the noun.
204
00:10:32,020 --> 00:10:33,320
All right.
205
00:10:33,320 --> 00:10:36,410
Finally, JavaScript is of course the verb,
206
00:10:36,410 --> 00:10:39,200
like saying hide the paragraph.
207
00:10:39,200 --> 00:10:41,710
So we're actually doing something here.
208
00:10:41,710 --> 00:10:43,870
And so we have a verb.
209
00:10:43,870 --> 00:10:46,640
Okay. Does that make sense?
210
00:10:46,640 --> 00:10:48,400
All right. And with this,
211
00:10:48,400 --> 00:10:51,730
we finish our introduction to web development.
212
00:10:51,730 --> 00:10:54,380
And so we're now ready to start working
213
00:10:54,380 --> 00:10:58,343
with HTML and CSS code in his course.
15897
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.