Original subtitles

for every web developer who has a job

there are at least 10 who are stuck in

the endless loop of learning HTML CSS

and JavaScript again and again that's

because people underestimate what it

takes to become an employable web

developer on this path there are so many

different Technologies to learn that

many people give up Midway this video

will make sure that you are not one of

them I'll also cover three mistakes that

you need to avoid at any cost let's get

started web development contains two

parts front-end development and backend

development front-end developers program

the feel and behavior of a website this

is what a user actually experiences when

they visit a website backend developers

make this Behavior possible they do some

things behind the scene that users don't

get to see think of it this way when you

go to a restaurant you just experience

the dining area the tables chairs menu

and the overall Ambiance that's your

front end now back end would be the

kitchen of the restaurant it's where all

the behind thes scenes action happens

ingredient preparation cooking and Order

fulfillment all of that happens in the

kitchen in a restaurant we also have a

server what would be the equalent of a

server in the web development world if

you're thinking that the answer is a web

server that is not correct I'll answer

this when I cover backend development in

detail but if you think you know the

answer leave a comment anyway let's

start with front-end development HTML

CSS and JavaScript are the building

blocks of front- end development to

understand what each one of them exactly

does let's imagine that you are building

a house HTML would be the blueprint of

this house what are the different rooms

in the house how many bathrooms will be

there all of that is HTML for example on

YouTube HTML is what decides that there

will be a like And subscribe button here

CSS is like an interior designer that

decides what your rooms look like for

YouTube it decides the shape color and

size of the Subscribe and like button

when you hit the Subscribe button the

color of the button changes that's also

CSS doing its magic JavaScript is like

an electrician that installs smart home

features in your house in the YouTube

example when you hit the Subscribe

button JavaScript sends a request to

YouTube servers to update the

subscriptions of my channel YouTube

servers will store this information and

use it to recommend my next videos to

you now that you understand the basics

let's see how we can learn HTML CSS and

JavaScript and this is where most people

make their first big mistake they spend

months sometimes even Years Learning

HTML CSS in JavaScript don't get me

wrong I'm not saying that Basics are not

important but the basics are just the

starting point there are a whole lot of

other technologies that you need to

learn in order to become an employable

web developer so I would not spend too

much time here I'll just learn the top

20% Concepts that cover the 80% of use

cases I'll learn the remaining Concepts

in the next steps to learn and test my

knowledge at the same time I'll go to W3

schools for HTML I'll start from the top

and do everything until HTML graphics

for CSS I'll do everything until CSS

grid for JavaScript I'll cover

everything until JS HTML Dom I will add

all the links to the resources in the

description congratulations you have

covered 15% of what needs to be done to

become a web developer let's keep going

when you start working with CSS you'll

see that same things repeat again and

again you'll set height add padding and

fix alignment of different objects and

so on and when you do this for so many

objects in your web app your CSS files

start becoming very big and hard to

manage on top of that debugging becomes

a huge pain because there is so much

repeated code to solve all these

problems you would want to learn a CSS

framework now there are so many

different Frameworks that you can choose

from different people prefer different

Frameworks for different reasons my

reason is very straight forward I would

choose a framework that is easiest to

learn once I know the basics of CSS I

want to be productive as fast as

possible if you're someone like me you

would go for Tailwind CSS Tailwind is a

utility first framework in other words

Tailwind already has all the repeated

code pre-written you just need to go to

your HTML elements and use it this makes

Tailwind very easy to pick for beginners

to learn Tailwind quickly you can go to

the Tailwind playground and play around

with the code you can read their

beautifully written documentation and

test what you are learning in the

playground if you already know HTML and

CSS they should be fairly

straightforward if you need more help

you can also check out the official

YouTube channel of Tailwind Labs we have

covered another 5% with Tailwind let's

move on to the JavaScript framework now

just like CSS Frameworks we also have

JavaScript Frameworks to make our life

easy there are again many popular

options here but we will only talk about

the most popular option which is react

technically react is not a framework

it's a library but that's not important

for now react makes building user

interfac is more manageable by breaking

them into small reusable components

react has a virtual Dom that allows it

to update only part of the web page

rather than rendering the entire thing

if you don't know what that means don't

worry about it you will learn as you go

but why did I pick react over all these

other options my reason Remains the Same

I want you to get to a stage where you

are building your own projects really

fast and react is among the easiest to

learn and most in demand at the same

time so how do we learn react

effectively the official react

documentation has has made it very easy

for us they have a quick start guide

which according to them covers 80% of

the react Concepts this guide also

contains a walkthrough of how to build

Tic Tac Toe in react and they also teach

you how to think in react there's a

learn react section that I highly

recommend you go through but if you're

are short on time you can move on to the

next step with react Basics you have

covered another 10% so far you have just

learned the basics of a few Technologies

but learning Technologies and actually

applying them to solve new problems are

two different things and that's the we

are going to bridge now with everything

that you have learned so far if I give

you a new web app to build most people

are going to struggle with it and that's

totally fine struggle is where you

actually learn so if you're someone who

enjoys the struggle more power to you

please go ahead and start building

because that's how you learn the most

but for others who need a little bit of

handholding in the beginning I have a

recommendation for you you can start

following along with someone who's

building a real world application on

YouTube you'll find many people building

clones of popular applications like

Amazon or Netflix my personal favorite

is his channel by Sony S his videos will

introduce you to popular patterns in

react he also covers some new

technologies like nextjs nextjs is a

react framework that enables extra

features like server site rendering if

you know react nextjs is very easy to

pick if you do all this you will cover

another 10% of your web development

Journey like I mentioned earlier true

learning will only happen if you start

building new things by yourself building

your own projects would be the next 20%

of your journey but what should you

actually build I recommend that you

build a basic version of Instagram app

don't worry about videos or reals for

now just build a version where people

can share their photos and see a news

feed containing pictures of their

friends you can also add functionality

to like photos and add comments showing

pictures from friends might not be

possible right now because we have not

covered backend yet you can use some

hardcoded URLs for now after learning

the back end we'll come back to this

project and build the back end as well

congratulations you have successfully

completed the front-end part of the web

development it's time to move on to the

back end this is where people make their

second biggest mistake which is that

they fall victim to the buzz around full

stack development for those who don't

Know full stack developers work both on

front end as well as the back end now

I'm not saying that you should not

become a full stack developer full stack

is a great end goal the point I'm trying

to make is that you don't have to be a

full stack developer to find your first

job front-end development is enough

there are many jobs for front-end

developers so I recommend that you don't

rush into the backend development test

yourself early in the job market to see

where you stand and you can continue

learning back end on the side for the

backend we'll again pick something that

is easy to learn we already know

JavaScript so the easiest thing to do

would be to use JavaScript in the back

end as well JavaScript was designed to

be a scripting language for web browsers

to be able to run JavaScript on the

server or backend we need to use nodejs

nodejs is a JavaScript runtime for

servers if you don't understand what I'm

saying that's completely fine you will

learn all this when you start working

with node now similar to front end we

need a JavaScript framework for the the

back end as well Express provides you

all the tools you need to build apis

remember in the beginning of the video

we talked about how dining area is the

front end and the kitchen is the back

end of a restaurant an API would be the

equalent of the server of the restaurant

basically you place all your orders or

requests with the API and the API

responds to you with the information you

need an API does this with the help of

the data stored in a database so in

addition to express you need to use a

library like to talk to the

database is a nodejs library for

mongod DB which is a popular database I

know all this sounds confusing but it's

not that hard when you start using it to

get acquainted with Express you can

quickly go through their documentation

but to actually learn Express and

you can follow along with this video by

traversy media and create a web app from

scratch I recommend directly by building

because if you have come so far you

already know enough programming to pick

Express easily with this project and if

you finished this step you would have

already covered another 20% of the

journey now you are on the last leg you

need one final push and that would come

by building building the back end of the

Instagram project that you started add

the capability to upload photos and

follow each other by storing all the

required information in a database

create a news feed that contains actual

photos of your friend and not the dummy

data once you do that you will finish

the last mile of the journey and this

brings me to the final big mistake many

people make they don't trust the process

they start this long journey of learning

web development they copy a few projects

on the way and add them to their resume

eventually they are not able to find the

job and they give up every step of the

journey is important important so don't

skip any step and Trust the process it

might take you slightly longer but

you'll eventually get there now I did

not get a chance to cover how to prepare

for coding interviews in this video if

you're interested you can watch this

video my name is sahil and I'll see you

in the next

one