"Music"

Guys! When I started my web development journey

I asked people that how do we learn this web development.

And the answers I got that learn Angular, Veu

or learn this or learn that.

After listening to the names of so many technologies

my mind blowed up.

And today also many people ask me about where to start from.

So this video will guide you that what shall be your strategy

I have made a whole list and

I'll tell about bucket technique.

There is one bucket technique that I used to master

web development and you guys can also use.

We will talk about all this in a second but

first I will talk about the basics of Web development.

So first of all what are the basics of web development?

What are the things you need to learn?

OK and after telling about this I'll tell you guys a shortcut.

And that shortcut is gonna be amazing

but at the same time this is also important.

So first let's discuss it as it is more important

So to make any website you need to use HTML, CSS and JS.

and you guys have heard of it before also

as this is not a new thing you are hearing for the first time

and even if you are hearing it for the first time then no problem.

I'll tell you about all this

This is the skeleton of any website

By skeleton I mean that if you are driving a car then the

body of the car without

engine, colour, design is the HTML

and after that you decorated the car with some colour
it's like that you designed the car with CSS

You improved the wheels, you coloured it's body

You all can do this with CSS.

After that JavaScript

What is this JavaScript?

That what will happen when we click on a specific button.

It's engine and all the programming of the car is the JS

It's the same in a website

HTML is where the button should be

Imagine that this is my website www.something.com

So if there shall be an image here or not

Button should be here, all this is managed by HTML.

In HTML you need to specify where button or text should be

here a paragraph shall start, there is an heading and all this

With the help of CSS you will specify where an item will be,

how much gap there must be or what shall be the size of this image

If I minimize the video then what it should look like.

There is something like Media Query with which we do it.

But I won't go in detail of CSS.

Here, it is important for you to understand that HTML is the skeleton.

What is CSS? CSS is used for designing

and JavaScript for logic.

We have covered this and this is the very basic.

But what if in HTML,CSS and JavaScript

Imagine we are reading it in this order

So what if we stuck somewhere?

Can we master everything 100%?

Would it be ideal?
NO!

This is where we'll use our Bucket Technique

which I designed for you guys.

What is this Bucket Technique?

I'll say you make a bucket out of your Web Development.

What will you make?

Make a bucket.

Out of your web development knowledge.OK

Listen it carefully and what you guys do learn HTM 80%

and now you'll ask why not learn it 100%

as HTML is very easy.

There are some things in HTML which are very

complicated like Canvas.OK

So I'll say learn HTML 80% and what should we

cover in this 80%?

How to find that?

I'll tell you about that also.

But for now just understand that we

need to learn 80% HTML

What we'll learn in this 80%?

I'll tell you later.

Now we'll just focus on 80% HTML.

We won't master complete HTML.

We'll just learn 80%

I think no one would tell you like that?

I am telling you based on my experience.

If you guys want to make websites asap and

optimize your web development career.

Then you have to do it.

If you do something else maybe you'll reach your destination

but this is the first way

Remember this thing.

I'll talk about CSS.

For CSS I have written this 60.

Now you'll ask why should I learn only 60%?

Why not 100%?

I'll come to that also.60%

I'll write JavaScript also.
BTW JavaScript is a programming language.

So if you haven't studied any programming language

in computer science

then you will start your programming journey from here.

Now why is this 80,60,50?

Why not 100,100,100?

It looks good to hear 100,100,100 but

if you go for 100,100,100 then it will blow your mind.

If you got stuck in CSS.

Even if you think that you have completely mastered HTML

which maybe you haven't.

All those people who say I know HTML completely

may also don't know some of the concept of HTML

like Canvas and there are many more which they don't know.

I'll say just learn HTML that much that you can
make the layout of the webpage.

We are not talking about Canvas. You need to learn only that
much that you can see like a button in a website

You can see a heading in a website. You can also see a

paragraph and there are many more things.

OK. These are the things you need to learn and,

focus that you can learn most of it as it is very easy.

OK. CSS is the point where people get stuck and if you have
started web development and stopped then

you know what I am talking about.

You need to learn that much CSS that you can colour an image

that you can work on background,borders and

you can give padding and margin.

Learn ID, class

ID, then Class, then Margin, Padding and I just want to say that
don't hesitate to skip the complicated part of CSS.

But I am not saying that skip it for your whole life.

You'll come to it also.

For now you just need to learn 60% of CSS

and with 60% CSS you'll be able to design a webpage.

OK. You'll be able to.
You'll be able to design a webpage.

After this you need to learn 50% JavaScript.

Now you'll say ONLY 50%

NO! 50% JavaScript is also very hard.

JavaScript has very complicated concepts.

JavaScript has Promises concept.

JavaScript has Object Oriented Programming.

There are Promises, Callbacks in JS.

After that, there are many concepts which are

complicated for beginners.

By saying complicated I don't mean to say

that you won't be able to do it.

They will be complicated for a beginner.

So I'll say by learning Variables, Constants, Functions,

While Loop, If Else and all this

you'll complete 50% JavaScript.

That I know JavaScript

At this point you know HTML, CSS and JS

Now what do you need to add in your bucket?

Projects

OK. You need to add projects.

And whenever you think you are not able to do

something then you have to come back.

Are you getting what I am telling.

You have to come back.

And revise your concepts but before coming back

you need to make at least 2 or 4 projects.

And maybe you might learn something while

making the projects.

So you need to learn HTML, CSS and JS like this.

It should not be like that you picked up this thick book of HTML,
this thick book of CSS and this thick book of JS.

And you are found after two days saying "I won't be able to do it."

If you do it like that you won't be able to do it because it

will take a lot of time and no one has that much patience.

And I am assuming that if you want to become a web developer

than you must have some other full time work

either you're a student or are in a job. So obviously you

won't be able to give it your 100% time.

We are talking about most of the people there

might be some exceptions.

So here you have learned front-end like this

Now I'll tell you one more thing that we have some shortcuts.

What are these shortcuts?

These shortcuts are BootStraps, TailWind CSS

What are these things?

They are the frameworks of CSS

These frameworks of CSS are some ID's and classes

written by someone else for your use to make awesome websites.

This might sound good that someone else has

already made it.

I'll use his button, his border and his designs

component-wise in my website.

But what if a designer ask you

to make a button like this.

Then you won't be able to make it directly using this.

You should know CSS.

Like if you want to create a circular or elliptical button,

then you won't be able to do it in Bootstrap as of now.

So if you want a very wide elliptical button and you

want to specify how much wide it should be then

you won't be able to do it and it will be very hard for

you to customize it.

And if someone asks you to add black border inside,

and green border inside that

Then you will be able to make it with CSS but

not with Bootstrap, Tailwind.

These shortcuts are for those who don't want to become a

successful web developer but want to be a part time developer.

Like my Primary job is something else and I'll be able

to do web development with the help of these.
And I don't call them web developer.
And they are not even called web developers.

A web developer must know these three basic skills .

So what are these frameworks?

These VueJs, React, Angular.

I'll talk about all these

But before that I'll tell you one more thing.

That if you want to become a successful

web developer then don't take this path.

Let me erase it that you don't need to take this path.

It is not something you need to go after.

You don't need to take this path.

You need to become a successful web developer.

Now I'll tell you how a website works?

This is your web server

and here is the client.

And there can be any no. of clients.

That means these are a lot of people requesting this website.

Imagine this is www.codewithharry.com

and the server of this site will give them response index.html

Now this Index.html would have all HTML,

CSS, JS code compiled.

And the server will send it and the browser will parse it.

That means when you say give me

www.codewithharry.com

When you say this to the server then

the server gives you some response in return.

That means you get a response in return.

When you get a response then your browser will parse it.

How did this generated?

This is generated by your backend.

Maybe it would bring a post from the

database of HTML.
For example, if you are viewing a HTML page
which has blog posts or comments.

So your backend has to read from the database or any file

then it need to generate this. Combination of HTML,

CSS and JS which would be sent to the client.

This is the client who is using this computer.

This person is the client.

Now this client wants to use this website.

So whatever request he sends, the

server will send him the response.

And how the server will generate the

response is the work of the backend.

So what is the backend?

That what response to send to which

request is decided by the backend.

And how will it do it?

It will query something from the database .

For example, it may query a blog post.

It may even query an image and send it to

you by embedding in HTML.

So all this work is done by your backend.

Now the biggest question is which

backend language do we need to learn?

So now I'll quickly write "Which Backend?"

OK. So we have a lot of options in Backend and I am not telling

that you need to learn only this and avoid other languages.

But if you are an absolute beginner I'll recommend

this which most people say "It's useless".

And I'll justify why I am recommending this.

I recommend PHP for a beginner.

From my point of view, if you guys learn PHP then you'll

understand how this frontend and backend work.

And if you guys understand this then you'll

understand the complete workflow.

And after that switch to a different backend.

This complete process becomes simple for you.

What are its pros?

These are its pros that it's easy to

learn and best for beginners.

But its libraries have limited support. For example, doing

machine learning in PHP is not a good idea.

You'll be able to do it and you can implement all the algorithms.

But you should use Python as it already has some amazing

projects like TensorFlow ,SciKit Learn for Machine Learning.

For that reason you shall avoid PHP for machine learning.

The if-else and while syntax of PHP are

closely related to JS.

So if you guys already know JS then it

would be easy for you to learn PHP.

The second language which I'll suggest is Node JS.

And I have used this language only in

my web development course.

I'll suggest this as you guys already know JavaScript.

And it has a con that it has some

complicated concepts of JavaScript

which we have talked about here that learn 50% JS.

So you'll need to learn the remaining 50% JavaScript.

If you're using JavaScript as a backend.

And how to run Node JS in your computer is also complicated

for some students who have just started.

And they don't know how to operate a computer.

They don't know about it deeply.

I am talking from software perspective.

I'm not talking about computer typing.

Then what I'll do is recommend these two languages.

And if you ask for the third one than it's Python.

But it will take time as first you'll learn Python and then
Django or Flask, these are two frameworks.

You can use them in backend.

These are backend frameworks.

You can use Django or Flask in backend.

If you use Node JS then most probably you'll use Express.

But if your mind blowed up after listening this

than just focus on this PHP.

Just focus on learning PHP and make at least

5 websites with content form.

And not to mention if you use database then have

MySQL with PHP.

Use MongoDB with NodeJS.

And if you're using Python than use SQLite

as Django has it by default.

So you don't need to do anything.

Now it's not like that you need to use these databases
only but for a beginner these are my recommendations.

So you can use backend like this.

Let me check if I have not missed out any point.

And now I am gonna talk about the

things I won't recommend.

Not recommended.

It's important to know what we have to do

but knowing what not to do is more important.

Don't look at frameworks.

That means don't think of using frameworks

of JS as a beginner.

I am not saying that never to learn them.

When you need to learn them?

I'll talk about it also.

But for now you don't need to learn

frameworks of JS like Angular,Vue,React.

OK. After that you don't need to look at website builders.

We have Wix, GoDaddy website builder and these all.

You don't need to look at these.

You guys should not install 3rd party JS libraries as a beginner.

I am not saying that never install them or

never work on it but
as a beginner don't use JQuery or other.

Let me write JS libraries.

You don't need to use these three things as a beginner.

I am not saying they are useless.

These are very amazing things but as a beginner avoid it.

You guys have a very simple roadmap :

HTML, CSS and JS.

You don't need to learn this completely either.

Here I have simplified your work.

80%,60% and 50%.

Then make some projects.

And make static websites.

Which doesn't have backend is static while

which has backend is dynamic.

It's a simple concept.

Don't get confused.

First make a static website.

In which you'll be making websites on

your computer with designs.

And after that, with the help of PHP and MYSQL.

These are awesome API's.

I have uploaded a course of PHP.

Let's now talk about resources.

I also want to talk about resources.

That where you have to learn from.

But before that I want to talk about one more thing.

Many people tell me that the websites we

create are not that good.

Than I want to tell you that web designing

is one thing and developing is another thing.

If you have good graphic designing skills

than you can DESIGN beautiful websites.

And by design I mean that you can draw good layouts.

I recommend that you try to mimic websites

which are already there on the net.

I am not talking about copying it but taking inspiration

and try to make different components

like that so that you become a good designer.

So this is the designing part.

Designing is a different skill and not related

to programming, web developing.

If you're a good designer then you know what

pleases the eyes, which colour combination looks beautiful.

It's a totally different skill.

And most people take a lot of time to understand

this but you should clear this point fast.

Let's move forward and look at resources.

So to learn HTML I have already made a video.

"HTML in one video"

I don't want it to be unreadable.

Let me write the resources here.

The first resource I told you is

"HTML in one video"

In that I have covered that much

HTML you need to know.

Now you'll ask is it 100% HTML?

NO! It's 80%.

That much you need.

So you know that from where you need to learn 80% HTML.

I will give you a pdf which will have all the links.
So don't take tension.

I created this pdf for you guys only.

After that the second resource is a website:

htmlcheatsheet.com

It's an explosive website.

When you'll open it, you'll be amazed.

OK. I won't talk much about it. You'll

just get different components of HTML.

And you'll get a lot of amazing components.

So it will make your life easy.

After that you can check my complete web development

course which is available on youtube.

In that video I have talked about all this which I told

you. I took the Node JS route.

Full end to end with hosting.

So if you guys watch that than

you'll cover all this automatically,

But if you want to use PHP in your backend

not Node JS then

it will be pretty easy for you.

It would be easier than Node JS.

People think that Node JS has JavaScript

so it would be easy but it's not the case.

That's the reason PHP is popular.

If you guys are using PHP then

I have made a one video on PHP and a complete course.

Let me tell you the difference between them.

"One video of PHP" plus full course.

If you want to learn PHP quickly and only in

one video with important poins only and

if you think that google search, stack overflow and a 3 hour video will
be enough for you to learn PHP then use this one video.

But if you want a step by step walkthrough as

you are a beginner than access the course's playlist.

Both the links are in the pdf.

Like this video or don't but please download the pdf.

As I put in a lot of hard work to make it for you guys.

You'll get all the links in description.

Before you open the pdf just listen to what I'm saying.

Because if you don't listen to me you

won't be able to do it very well.

The 5th resource is CodePen.

There is a website named CodePen

where you can search for projects.
There you can search for any project.Like
you may search a project for image animation.

If you search image animation in CodePen,

you'll get alot of results on that.

You guys should try CodePen.

If you search on CodePen then you will get a lot of projects.

So this is one of your project source.

Another project source is an HTML,

CSS and JS project playlist created by me .

"HTML, CSS, JavaScript Projects"

And this is a different playlist.

It's not like that this playlist is in this course.

This course also has some projects.

This complete web development course.

But here I have created some amazing

projects like moving car animation, a game.

And I have shown you how to make an alarm clock.

Sorry, its an analog clock not alarm clock that goes tik-tik.

So after watching this your work will be finished.

After that we have some tools which

every web developer must learn.

Let me tell you about them quickly.

I have already mentioned them in the playlist.

I'll read them out one-by-one.

So there is a website called UXWing which I use to download icons.

Whenever you need icons you can go there and download it.

After that we have a website called Pixabay where you can

find amazing HD Images like scenery

or a gym photo if you're making a website for a gym,

pictures of kitchen or food.You may find them there.

Than we have a website named FreeHTML5 where

you can find pre-build websites.

If you don't want to copy than just take inspiration from them and
do development on your own just like I talked about design.

After that we have a website named Unsplash.

And it provides API's of images to you.

With the help of Unsplash and using some certain keywords, you
may find some images from the database of Unsplash.

And I have used all these resources in my complete

web development course.

So you'll find them there.

After that we have a fake REST API called JSONPlaceholder.

Which is an amazing API.

After that I have linked a GitHub repository. In it

you'll find some more resources.

But there are a lot of resources so take it with a pinch of salt.

And I have put the important

resources in this PDF.

I hope you have received enough material to

learn web development.

Now you guys have to start. I have already

created the resources.

A lot of web development masala is uploaded by me on the channel.

And how you guys have to use it?

I have already told you that in this video.

I hope this video was helpful for you.

If it was helpful then smash that like button.

And with that access the web development playlist.

I think this is the best way.

You can learn frontend from this.

And if you want to learn PHP than switch here.

I hope the things are clear.

Now if I want to talk about the framework.

So I'll make a video about it later on.

That after doing all this, how to switch to frameworks?

How you guys can use all these frameworks like

Angular, VueJS, React?

But according to me you should know the basic web development

even if you want to use these web frameworks.
So I hope you guys enjoyed this video.

Thank you so much guys for watching this video.

And I'll see you next time.

"Music"