Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,040 --> 00:00:02,560
for every web developer who has a job
2
00:00:02,560 --> 00:00:04,240
there are at least 10 who are stuck in
3
00:00:04,240 --> 00:00:06,600
the endless loop of learning HTML CSS
4
00:00:06,600 --> 00:00:08,639
and JavaScript again and again that's
5
00:00:08,639 --> 00:00:10,160
because people underestimate what it
6
00:00:10,160 --> 00:00:11,759
takes to become an employable web
7
00:00:11,759 --> 00:00:13,839
developer on this path there are so many
8
00:00:13,839 --> 00:00:15,400
different Technologies to learn that
9
00:00:15,400 --> 00:00:17,400
many people give up Midway this video
10
00:00:17,400 --> 00:00:19,080
will make sure that you are not one of
11
00:00:19,080 --> 00:00:21,000
them I'll also cover three mistakes that
12
00:00:21,000 --> 00:00:23,359
you need to avoid at any cost let's get
13
00:00:23,359 --> 00:00:25,800
started web development contains two
14
00:00:25,800 --> 00:00:28,000
parts front-end development and backend
15
00:00:28,000 --> 00:00:30,119
development front-end developers program
16
00:00:30,119 --> 00:00:32,238
the feel and behavior of a website this
17
00:00:32,238 --> 00:00:34,239
is what a user actually experiences when
18
00:00:34,239 --> 00:00:36,360
they visit a website backend developers
19
00:00:36,360 --> 00:00:38,559
make this Behavior possible they do some
20
00:00:38,559 --> 00:00:40,559
things behind the scene that users don't
21
00:00:40,559 --> 00:00:42,559
get to see think of it this way when you
22
00:00:42,559 --> 00:00:44,559
go to a restaurant you just experience
23
00:00:44,559 --> 00:00:47,039
the dining area the tables chairs menu
24
00:00:47,039 --> 00:00:49,000
and the overall Ambiance that's your
25
00:00:49,000 --> 00:00:50,719
front end now back end would be the
26
00:00:50,719 --> 00:00:52,559
kitchen of the restaurant it's where all
27
00:00:52,559 --> 00:00:54,559
the behind thes scenes action happens
28
00:00:54,559 --> 00:00:56,680
ingredient preparation cooking and Order
29
00:00:56,680 --> 00:00:58,640
fulfillment all of that happens in the
30
00:00:58,640 --> 00:01:00,680
kitchen in a restaurant we also have a
31
00:01:00,680 --> 00:01:02,600
server what would be the equalent of a
32
00:01:02,600 --> 00:01:04,400
server in the web development world if
33
00:01:04,400 --> 00:01:06,000
you're thinking that the answer is a web
34
00:01:06,000 --> 00:01:08,159
server that is not correct I'll answer
35
00:01:08,159 --> 00:01:09,920
this when I cover backend development in
36
00:01:09,920 --> 00:01:11,600
detail but if you think you know the
37
00:01:11,600 --> 00:01:13,920
answer leave a comment anyway let's
38
00:01:13,920 --> 00:01:16,080
start with front-end development HTML
39
00:01:16,080 --> 00:01:17,759
CSS and JavaScript are the building
40
00:01:17,759 --> 00:01:19,720
blocks of front- end development to
41
00:01:19,720 --> 00:01:21,240
understand what each one of them exactly
42
00:01:21,240 --> 00:01:23,000
does let's imagine that you are building
43
00:01:23,000 --> 00:01:25,119
a house HTML would be the blueprint of
44
00:01:25,119 --> 00:01:26,759
this house what are the different rooms
45
00:01:26,759 --> 00:01:28,880
in the house how many bathrooms will be
46
00:01:28,880 --> 00:01:31,479
there all of that is HTML for example on
47
00:01:31,479 --> 00:01:33,799
YouTube HTML is what decides that there
48
00:01:33,799 --> 00:01:35,960
will be a like And subscribe button here
49
00:01:35,960 --> 00:01:38,040
CSS is like an interior designer that
50
00:01:38,040 --> 00:01:40,000
decides what your rooms look like for
51
00:01:40,000 --> 00:01:42,079
YouTube it decides the shape color and
52
00:01:42,079 --> 00:01:44,000
size of the Subscribe and like button
53
00:01:44,000 --> 00:01:45,880
when you hit the Subscribe button the
54
00:01:45,880 --> 00:01:47,759
color of the button changes that's also
55
00:01:47,759 --> 00:01:50,119
CSS doing its magic JavaScript is like
56
00:01:50,119 --> 00:01:51,960
an electrician that installs smart home
57
00:01:51,960 --> 00:01:53,799
features in your house in the YouTube
58
00:01:53,799 --> 00:01:55,520
example when you hit the Subscribe
59
00:01:55,520 --> 00:01:57,520
button JavaScript sends a request to
60
00:01:57,520 --> 00:01:58,880
YouTube servers to update the
61
00:01:58,880 --> 00:02:00,759
subscriptions of my channel YouTube
62
00:02:00,759 --> 00:02:02,560
servers will store this information and
63
00:02:02,560 --> 00:02:04,399
use it to recommend my next videos to
64
00:02:04,399 --> 00:02:06,640
you now that you understand the basics
65
00:02:06,640 --> 00:02:09,000
let's see how we can learn HTML CSS and
66
00:02:09,000 --> 00:02:10,959
JavaScript and this is where most people
67
00:02:10,959 --> 00:02:13,040
make their first big mistake they spend
68
00:02:13,040 --> 00:02:15,000
months sometimes even Years Learning
69
00:02:15,000 --> 00:02:17,560
HTML CSS in JavaScript don't get me
70
00:02:17,560 --> 00:02:19,640
wrong I'm not saying that Basics are not
71
00:02:19,640 --> 00:02:21,480
important but the basics are just the
72
00:02:21,480 --> 00:02:23,400
starting point there are a whole lot of
73
00:02:23,400 --> 00:02:24,879
other technologies that you need to
74
00:02:24,879 --> 00:02:26,560
learn in order to become an employable
75
00:02:26,560 --> 00:02:28,440
web developer so I would not spend too
76
00:02:28,440 --> 00:02:30,400
much time here I'll just learn the top
77
00:02:30,400 --> 00:02:33,239
20% Concepts that cover the 80% of use
78
00:02:33,239 --> 00:02:35,120
cases I'll learn the remaining Concepts
79
00:02:35,120 --> 00:02:37,040
in the next steps to learn and test my
80
00:02:37,040 --> 00:02:39,319
knowledge at the same time I'll go to W3
81
00:02:39,319 --> 00:02:41,920
schools for HTML I'll start from the top
82
00:02:41,920 --> 00:02:44,319
and do everything until HTML graphics
83
00:02:44,319 --> 00:02:46,959
for CSS I'll do everything until CSS
84
00:02:46,959 --> 00:02:49,080
grid for JavaScript I'll cover
85
00:02:49,080 --> 00:02:51,879
everything until JS HTML Dom I will add
86
00:02:51,879 --> 00:02:53,480
all the links to the resources in the
87
00:02:53,480 --> 00:02:55,400
description congratulations you have
88
00:02:55,400 --> 00:02:57,680
covered 15% of what needs to be done to
89
00:02:57,680 --> 00:02:59,920
become a web developer let's keep going
90
00:02:59,920 --> 00:03:01,920
when you start working with CSS you'll
91
00:03:01,920 --> 00:03:03,840
see that same things repeat again and
92
00:03:03,840 --> 00:03:06,200
again you'll set height add padding and
93
00:03:06,200 --> 00:03:08,040
fix alignment of different objects and
94
00:03:08,040 --> 00:03:09,879
so on and when you do this for so many
95
00:03:09,879 --> 00:03:12,080
objects in your web app your CSS files
96
00:03:12,080 --> 00:03:13,920
start becoming very big and hard to
97
00:03:13,920 --> 00:03:16,400
manage on top of that debugging becomes
98
00:03:16,400 --> 00:03:17,959
a huge pain because there is so much
99
00:03:17,959 --> 00:03:19,799
repeated code to solve all these
100
00:03:19,799 --> 00:03:21,720
problems you would want to learn a CSS
101
00:03:21,720 --> 00:03:23,319
framework now there are so many
102
00:03:23,319 --> 00:03:24,959
different Frameworks that you can choose
103
00:03:24,959 --> 00:03:26,799
from different people prefer different
104
00:03:26,799 --> 00:03:28,680
Frameworks for different reasons my
105
00:03:28,680 --> 00:03:30,560
reason is very straight forward I would
106
00:03:30,560 --> 00:03:32,239
choose a framework that is easiest to
107
00:03:32,239 --> 00:03:34,840
learn once I know the basics of CSS I
108
00:03:34,840 --> 00:03:36,640
want to be productive as fast as
109
00:03:36,640 --> 00:03:38,560
possible if you're someone like me you
110
00:03:38,560 --> 00:03:41,000
would go for Tailwind CSS Tailwind is a
111
00:03:41,000 --> 00:03:43,159
utility first framework in other words
112
00:03:43,159 --> 00:03:45,000
Tailwind already has all the repeated
113
00:03:45,000 --> 00:03:46,959
code pre-written you just need to go to
114
00:03:46,959 --> 00:03:49,280
your HTML elements and use it this makes
115
00:03:49,280 --> 00:03:51,439
Tailwind very easy to pick for beginners
116
00:03:51,439 --> 00:03:53,280
to learn Tailwind quickly you can go to
117
00:03:53,280 --> 00:03:55,000
the Tailwind playground and play around
118
00:03:55,000 --> 00:03:56,400
with the code you can read their
119
00:03:56,400 --> 00:03:58,079
beautifully written documentation and
120
00:03:58,079 --> 00:03:59,280
test what you are learning in the
121
00:03:59,280 --> 00:04:01,360
playground if you already know HTML and
122
00:04:01,360 --> 00:04:02,959
CSS they should be fairly
123
00:04:02,959 --> 00:04:05,120
straightforward if you need more help
124
00:04:05,120 --> 00:04:06,599
you can also check out the official
125
00:04:06,599 --> 00:04:08,640
YouTube channel of Tailwind Labs we have
126
00:04:08,640 --> 00:04:11,200
covered another 5% with Tailwind let's
127
00:04:11,200 --> 00:04:13,319
move on to the JavaScript framework now
128
00:04:13,319 --> 00:04:15,480
just like CSS Frameworks we also have
129
00:04:15,480 --> 00:04:17,320
JavaScript Frameworks to make our life
130
00:04:17,320 --> 00:04:19,040
easy there are again many popular
131
00:04:19,040 --> 00:04:21,040
options here but we will only talk about
132
00:04:21,040 --> 00:04:23,199
the most popular option which is react
133
00:04:23,199 --> 00:04:25,520
technically react is not a framework
134
00:04:25,520 --> 00:04:27,600
it's a library but that's not important
135
00:04:27,600 --> 00:04:29,639
for now react makes building user
136
00:04:29,639 --> 00:04:31,400
interfac is more manageable by breaking
137
00:04:31,400 --> 00:04:33,560
them into small reusable components
138
00:04:33,560 --> 00:04:35,440
react has a virtual Dom that allows it
139
00:04:35,440 --> 00:04:37,440
to update only part of the web page
140
00:04:37,440 --> 00:04:39,520
rather than rendering the entire thing
141
00:04:39,520 --> 00:04:41,360
if you don't know what that means don't
142
00:04:41,360 --> 00:04:43,479
worry about it you will learn as you go
143
00:04:43,479 --> 00:04:45,360
but why did I pick react over all these
144
00:04:45,360 --> 00:04:47,919
other options my reason Remains the Same
145
00:04:47,919 --> 00:04:49,479
I want you to get to a stage where you
146
00:04:49,479 --> 00:04:51,280
are building your own projects really
147
00:04:51,280 --> 00:04:53,400
fast and react is among the easiest to
148
00:04:53,400 --> 00:04:55,360
learn and most in demand at the same
149
00:04:55,360 --> 00:04:57,120
time so how do we learn react
150
00:04:57,120 --> 00:04:58,720
effectively the official react
151
00:04:58,720 --> 00:05:00,479
documentation has has made it very easy
152
00:05:00,479 --> 00:05:02,400
for us they have a quick start guide
153
00:05:02,400 --> 00:05:04,360
which according to them covers 80% of
154
00:05:04,360 --> 00:05:06,400
the react Concepts this guide also
155
00:05:06,400 --> 00:05:08,120
contains a walkthrough of how to build
156
00:05:08,120 --> 00:05:10,280
Tic Tac Toe in react and they also teach
157
00:05:10,280 --> 00:05:12,039
you how to think in react there's a
158
00:05:12,039 --> 00:05:13,800
learn react section that I highly
159
00:05:13,800 --> 00:05:15,240
recommend you go through but if you're
160
00:05:15,240 --> 00:05:17,240
are short on time you can move on to the
161
00:05:17,240 --> 00:05:19,479
next step with react Basics you have
162
00:05:19,479 --> 00:05:22,120
covered another 10% so far you have just
163
00:05:22,120 --> 00:05:24,400
learned the basics of a few Technologies
164
00:05:24,400 --> 00:05:26,120
but learning Technologies and actually
165
00:05:26,120 --> 00:05:27,840
applying them to solve new problems are
166
00:05:27,840 --> 00:05:29,800
two different things and that's the we
167
00:05:29,800 --> 00:05:31,520
are going to bridge now with everything
168
00:05:31,520 --> 00:05:33,240
that you have learned so far if I give
169
00:05:33,240 --> 00:05:35,199
you a new web app to build most people
170
00:05:35,199 --> 00:05:37,000
are going to struggle with it and that's
171
00:05:37,000 --> 00:05:38,880
totally fine struggle is where you
172
00:05:38,880 --> 00:05:40,560
actually learn so if you're someone who
173
00:05:40,560 --> 00:05:42,919
enjoys the struggle more power to you
174
00:05:42,919 --> 00:05:44,479
please go ahead and start building
175
00:05:44,479 --> 00:05:46,319
because that's how you learn the most
176
00:05:46,319 --> 00:05:48,039
but for others who need a little bit of
177
00:05:48,039 --> 00:05:49,960
handholding in the beginning I have a
178
00:05:49,960 --> 00:05:51,600
recommendation for you you can start
179
00:05:51,600 --> 00:05:52,919
following along with someone who's
180
00:05:52,919 --> 00:05:55,080
building a real world application on
181
00:05:55,080 --> 00:05:56,960
YouTube you'll find many people building
182
00:05:56,960 --> 00:05:58,880
clones of popular applications like
183
00:05:58,880 --> 00:06:01,160
Amazon or Netflix my personal favorite
184
00:06:01,160 --> 00:06:03,639
is his channel by Sony S his videos will
185
00:06:03,639 --> 00:06:05,440
introduce you to popular patterns in
186
00:06:05,440 --> 00:06:07,120
react he also covers some new
187
00:06:07,120 --> 00:06:09,759
technologies like nextjs nextjs is a
188
00:06:09,759 --> 00:06:11,560
react framework that enables extra
189
00:06:11,560 --> 00:06:13,560
features like server site rendering if
190
00:06:13,560 --> 00:06:15,960
you know react nextjs is very easy to
191
00:06:15,960 --> 00:06:18,080
pick if you do all this you will cover
192
00:06:18,080 --> 00:06:19,960
another 10% of your web development
193
00:06:19,960 --> 00:06:22,080
Journey like I mentioned earlier true
194
00:06:22,080 --> 00:06:23,720
learning will only happen if you start
195
00:06:23,720 --> 00:06:25,800
building new things by yourself building
196
00:06:25,800 --> 00:06:27,919
your own projects would be the next 20%
197
00:06:27,919 --> 00:06:29,599
of your journey but what should you
198
00:06:29,599 --> 00:06:31,240
actually build I recommend that you
199
00:06:31,240 --> 00:06:33,599
build a basic version of Instagram app
200
00:06:33,599 --> 00:06:35,479
don't worry about videos or reals for
201
00:06:35,479 --> 00:06:37,160
now just build a version where people
202
00:06:37,160 --> 00:06:39,160
can share their photos and see a news
203
00:06:39,160 --> 00:06:40,639
feed containing pictures of their
204
00:06:40,639 --> 00:06:42,520
friends you can also add functionality
205
00:06:42,520 --> 00:06:44,680
to like photos and add comments showing
206
00:06:44,680 --> 00:06:46,240
pictures from friends might not be
207
00:06:46,240 --> 00:06:47,680
possible right now because we have not
208
00:06:47,680 --> 00:06:49,440
covered backend yet you can use some
209
00:06:49,440 --> 00:06:51,680
hardcoded URLs for now after learning
210
00:06:51,680 --> 00:06:53,319
the back end we'll come back to this
211
00:06:53,319 --> 00:06:55,160
project and build the back end as well
212
00:06:55,160 --> 00:06:56,960
congratulations you have successfully
213
00:06:56,960 --> 00:06:58,720
completed the front-end part of the web
214
00:06:58,720 --> 00:07:00,560
development it's time to move on to the
215
00:07:00,560 --> 00:07:02,360
back end this is where people make their
216
00:07:02,360 --> 00:07:04,039
second biggest mistake which is that
217
00:07:04,039 --> 00:07:05,720
they fall victim to the buzz around full
218
00:07:05,720 --> 00:07:07,680
stack development for those who don't
219
00:07:07,680 --> 00:07:09,800
Know full stack developers work both on
220
00:07:09,800 --> 00:07:11,720
front end as well as the back end now
221
00:07:11,720 --> 00:07:12,960
I'm not saying that you should not
222
00:07:12,960 --> 00:07:15,000
become a full stack developer full stack
223
00:07:15,000 --> 00:07:16,960
is a great end goal the point I'm trying
224
00:07:16,960 --> 00:07:18,440
to make is that you don't have to be a
225
00:07:18,440 --> 00:07:20,240
full stack developer to find your first
226
00:07:20,240 --> 00:07:22,280
job front-end development is enough
227
00:07:22,280 --> 00:07:23,800
there are many jobs for front-end
228
00:07:23,800 --> 00:07:25,680
developers so I recommend that you don't
229
00:07:25,680 --> 00:07:27,599
rush into the backend development test
230
00:07:27,599 --> 00:07:29,560
yourself early in the job market to see
231
00:07:29,560 --> 00:07:31,240
where you stand and you can continue
232
00:07:31,240 --> 00:07:33,080
learning back end on the side for the
233
00:07:33,080 --> 00:07:34,879
backend we'll again pick something that
234
00:07:34,879 --> 00:07:36,680
is easy to learn we already know
235
00:07:36,680 --> 00:07:38,639
JavaScript so the easiest thing to do
236
00:07:38,639 --> 00:07:40,160
would be to use JavaScript in the back
237
00:07:40,160 --> 00:07:42,080
end as well JavaScript was designed to
238
00:07:42,080 --> 00:07:44,199
be a scripting language for web browsers
239
00:07:44,199 --> 00:07:45,720
to be able to run JavaScript on the
240
00:07:45,720 --> 00:07:48,560
server or backend we need to use nodejs
241
00:07:48,560 --> 00:07:50,560
nodejs is a JavaScript runtime for
242
00:07:50,560 --> 00:07:52,360
servers if you don't understand what I'm
243
00:07:52,360 --> 00:07:54,240
saying that's completely fine you will
244
00:07:54,240 --> 00:07:55,759
learn all this when you start working
245
00:07:55,759 --> 00:07:57,840
with node now similar to front end we
246
00:07:57,840 --> 00:07:59,440
need a JavaScript framework for the the
247
00:07:59,440 --> 00:08:01,280
back end as well Express provides you
248
00:08:01,280 --> 00:08:03,400
all the tools you need to build apis
249
00:08:03,400 --> 00:08:05,199
remember in the beginning of the video
250
00:08:05,199 --> 00:08:06,919
we talked about how dining area is the
251
00:08:06,919 --> 00:08:08,639
front end and the kitchen is the back
252
00:08:08,639 --> 00:08:10,800
end of a restaurant an API would be the
253
00:08:10,800 --> 00:08:12,720
equalent of the server of the restaurant
254
00:08:12,720 --> 00:08:14,520
basically you place all your orders or
255
00:08:14,520 --> 00:08:16,520
requests with the API and the API
256
00:08:16,520 --> 00:08:18,240
responds to you with the information you
257
00:08:18,240 --> 00:08:20,240
need an API does this with the help of
258
00:08:20,240 --> 00:08:22,400
the data stored in a database so in
259
00:08:22,400 --> 00:08:24,360
addition to express you need to use a
260
00:08:24,360 --> 00:08:26,120
library like to talk to the
261
00:08:26,120 --> 00:08:28,599
database is a nodejs library for
262
00:08:28,599 --> 00:08:30,840
mongod DB which is a popular database I
263
00:08:30,840 --> 00:08:32,679
know all this sounds confusing but it's
264
00:08:32,679 --> 00:08:34,760
not that hard when you start using it to
265
00:08:34,760 --> 00:08:36,599
get acquainted with Express you can
266
00:08:36,599 --> 00:08:38,440
quickly go through their documentation
267
00:08:38,440 --> 00:08:40,559
but to actually learn Express and
268
00:08:40,559 --> 00:08:42,120
you can follow along with this video by
269
00:08:42,120 --> 00:08:44,120
traversy media and create a web app from
270
00:08:44,120 --> 00:08:46,160
scratch I recommend directly by building
271
00:08:46,160 --> 00:08:47,800
because if you have come so far you
272
00:08:47,800 --> 00:08:49,360
already know enough programming to pick
273
00:08:49,360 --> 00:08:51,399
Express easily with this project and if
274
00:08:51,399 --> 00:08:53,000
you finished this step you would have
275
00:08:53,000 --> 00:08:54,920
already covered another 20% of the
276
00:08:54,920 --> 00:08:56,880
journey now you are on the last leg you
277
00:08:56,880 --> 00:08:58,839
need one final push and that would come
278
00:08:58,839 --> 00:09:00,200
by building building the back end of the
279
00:09:00,200 --> 00:09:02,200
Instagram project that you started add
280
00:09:02,200 --> 00:09:04,040
the capability to upload photos and
281
00:09:04,040 --> 00:09:05,680
follow each other by storing all the
282
00:09:05,680 --> 00:09:07,600
required information in a database
283
00:09:07,600 --> 00:09:09,399
create a news feed that contains actual
284
00:09:09,399 --> 00:09:11,079
photos of your friend and not the dummy
285
00:09:11,079 --> 00:09:13,040
data once you do that you will finish
286
00:09:13,040 --> 00:09:14,760
the last mile of the journey and this
287
00:09:14,760 --> 00:09:16,680
brings me to the final big mistake many
288
00:09:16,680 --> 00:09:18,880
people make they don't trust the process
289
00:09:18,880 --> 00:09:20,519
they start this long journey of learning
290
00:09:20,519 --> 00:09:22,600
web development they copy a few projects
291
00:09:22,600 --> 00:09:24,680
on the way and add them to their resume
292
00:09:24,680 --> 00:09:26,320
eventually they are not able to find the
293
00:09:26,320 --> 00:09:28,360
job and they give up every step of the
294
00:09:28,360 --> 00:09:30,040
journey is important important so don't
295
00:09:30,040 --> 00:09:32,360
skip any step and Trust the process it
296
00:09:32,360 --> 00:09:33,839
might take you slightly longer but
297
00:09:33,839 --> 00:09:35,680
you'll eventually get there now I did
298
00:09:35,680 --> 00:09:37,519
not get a chance to cover how to prepare
299
00:09:37,519 --> 00:09:39,480
for coding interviews in this video if
300
00:09:39,480 --> 00:09:41,360
you're interested you can watch this
301
00:09:41,360 --> 00:09:43,360
video my name is sahil and I'll see you
302
00:09:43,360 --> 00:09:45,640
in the next
303
00:09:45,640 --> 00:09:48,640
one
22051
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.