Introduction to HTML, CSS, JavaScript & How websites work? | Web Development Tutorials #1

After watching this course, technologies to make websites we will learn that from starting to end. And to make successful and profitable websites end to end, I'll teach you in this course. This all videos are on my channel, CodewithHarry which will be uploaded free of cost. And I'll add all the videos in a playlist. Which I want you to access it from the description. And bookmark it as well. So that you don't miss any video. This course is for people who does not know any thing. Yes, for the people who don't know anything about web development. And who just want to start it and may not even know about programming. This course is for that people only, I teach end to end from starting. Before starting this video, I want to request you all to like this video. Along with that let me know in comment, where are you from ? When you join this course, let me know by writing. If I want to give anything related to course in the coming time like notes, cheatsheet or any kind of resources I want to share. So I'll give all this by doing reply of your comments. If you have not commented yet then comment your name and location, its very important. People who are already making websites, and who are working on HTML, JavaScript and CSS, I want to tell them also to watch this course. At starting you may feel like you this things, but after 2 to 4 videos I'll progress it slowly to advance level. There you'll get some best practices, common mistakes which people should use. Some new tools which people don't use, but uses the old technology. I'll point out such thing and I'll take you further. In this course I'll completely explain html, css and javascript. So surely join this course. And I want to give the assurance that, after watching this video you'll be able to make any type of professional website. So I get many questions like, an element is not going to left but floating towards right. They are not able to make border of something. Sometimes people say, elements are not coming in a line. Sometimes you want elements to be up and down, but they are coming in a line. Sometimes you want 4 elements in a row, but the 4th and 5th element are going down. This type of problems are faced many times. The source of this is only one, that you don't have the understanding of CSS. That understanding I am going to build up with this course. And I'll tell you all how you don't need to face this type of problem in life. Surely join this course and be with me. So lets quickly start this course. Firstly we'll discuss how a website works. What are the roles of JavaScript, HTML and CSS in a website ? And after that we'll go further. And further I'll explain you how to make a successful website. We will do build up, we install IDE, everything in this course. Just be there with me in this video. Alright guys, we will see now what is HTML, CSS and JavaScript. And how websites works. If you listen to me carefully, than after today you'll not face any problem in understanding that how HTML, CSS and JavaScript helps in serving a website. Now if you came here, and watching this course and you want to learn how to make websites than you must have known that to make any website, html is very important. If you want to make a website, then this is must, we can't work without it. But this 2 are also important. And what CSS and JavaScript do ? CSS adds beauty. And JavaScript adds brain. So our website becomes beauty with brain. Now you'll say, what harry is saying ? Beauty with brain. So I'll explain this thing very soon. So I'll write brain here. And this is our beauty. And HTML is must. This is body, and working is not possible without body. After this comes beauty, like clothes, makeup, etc. which is our css. And JavaScript is brain, means what your website do. Didn't got it ? No worries, we are going to see a very nice analogy. We'll see the analogy of car. As you can see this car is fantastic. And this car has a body. So when it was made, firstly it had a metallic body. I am writing here metallic body. Its body means the mix of the metals from which it is made. And nothing else. As a first step, it has been made, its face has been made. Its iron have been made. Then the mirrors of the car and other parts. Without thinking that how should be the design of wheels, or the colour of wheels. Along with that, design of head lights. About the size of head light, how much round it should be. Then how far it should be from mirror. That all things come in designing. Very firstly, its must be made. Made by the parts of metal. After that to add beauty, the colour has been applied. So beauty comes on number 2. Which includes colour, designs, the cuts which are made. So I am writing designs here. And along with that, the design made in the wheel and the added external metal, alloy wheels and all that. So that all things are included here. I am writing decers here, which means things has been added to make it look more beautiful. After this comes brain, which is engine. What does engine do here ? It does the main work. Engine along with accelerator, brake and clutch. What does all these things do ? These all things tells a website that, how it should work. Here the website is the car. So it guides the car how to work. In the same way, HTML is the metallic body in the website. And this design like colour are my CSS. So I'll write CSS here. And here the engine is my JavaScript, that is brain. So I hope you liked this analogy and understood it. That how HTML, CSS and JavaScript contributes. But just understanding this much is not enough. How HTML, JavaScript and CSS contribute their roles in website. Here I want to let you know, how a website works. Now what is this ? As you see its a web server. This diagram may look difficult to beginners. This is a web server and a computer. This is you, client. So what the client did, in his ubuntu or windows or any operating system, in that computer he sent a request. Request will look something like this, www.codewithharry.com It says that give me codewithharry.com Now its like, codewithharry.com is on server of codewithharry or any website, as google.com is kept in the server of google, which has its own IP address. So this server has its own IP address. And on this IP address, this website is standing here, its files and backend are kept. Now, backend can be in anything. Backend can be in PHP. I dont want to confuse you much. Backend can be in python as well. Backend can be node JS. And I don't expect from you that you know this. May be you don't even know the names. Just keep in mind that I have written some backends name. And what does this backend do ? That I'll tell you. These backend do some processing. Also they some computation. And what is its result ? Result of computation is HTML, CSS and JavaScript. Now, the HTML is the main body. Inside of this, CSS and JavaScript are kept. How does we keep it, that we will discuss further. But, think that HTML is an envelope, its a body. CSS and JavaScript are sent, by keeping them in this envelope, after wrapping them. Which means, a bundle goes. Its body is HTML, and CSS and JavaScript are somewhere in the body only. This body is send as a response. Response of which request ? When you asked for codewithharry.com , give it to me. That response is given by your server, that take this 3 things. So this response has been given by your web server. When you go to restaurant, to have food. And there you ask for paneer butter masala. And what will be the response there. Response is, this is your paneer butter masala and have it. And you ask for roti, which also you get, and it comes to your table. But if you have asked for aloo-gobi , then you would have got something else and not paneer butter masala. Likewise, if you write codewithharry.com/ and something else. Suppose I write codewithharry.com/about So it may happen that I get some another page. If I write codewithharry.com/contact than it may happen that I get some another page. So here, this is our request. Now to which restuarant you are requesting, is the domain. I am doing request from the website codewithharry.com This can be empty as well. Suppose you go to a restuarant and ask to get any food dish. So he may get any default dish, which he serves. Just an analogy, to explain you all. Likewise you write codewithharry.com than home page will come. If you put /about , than about page will come. If you put /contact , than contact page will come. Obviously if it exists. If it does not exists, suppose you go to restaurant and ask for chinese noodles If he doesn't make Chinese noodles how will he feed you? He will say not available So, server way of saying not available is 404. Server sends a response says not available. Not found. So in this way client And server communicate with each other Client sends request to server And server does processing using any of this programming language/backend Prepare to send front end to client So backend prepare these 3 things HTML CSS and JavaScript And it sends this thing to them. to its client who requested website. So I hope you understand how this website works I will explain again quickly here was a computer Here is client, that computer owner, he said codewithharry.com Request went to codewithharry.com server server did processing In my case I am using Python on my server so Processing happened through Python which generate 3 things HTML CSS and JavaScript Where CSS and JavaScript were present inside HTML And came back to this computer Now when this computer will receive HTML CSS and JavaScript So it is a program named web browser Installed inside computer, you might have too. What is web browser does is The document we received which is HTML CSS JavaScript text By manipulating the document it shows you what you see If you open codewithharry.com you will see a website In which there will be images, where what will come To display that after manipulating is work of Browser And what does browser receive? It receive these documents HTML CSS and JavaScript So this is our basic working of website So let's move forward and see what is the role of HTML However we have discussed but let's do a little deep dive And quickly understand the role of HTML CSS and JavaScript And then we will start coding Let's talk about HTML which stands for hypertext markup language And this is a standard means many people agreed that We will use HTML to make websites everyone use that only. And whoever built browser will display that only So, made standard this is a well standardized system And as I said there is a body of website This is a standard markup language Which means everyone will use it only No one can introduce its own new language And the web browsers too have to adapt with this only Now here HTML is only body means face if talk about human Then only skeleton with bones So if we talk about skeleton, my drawing is not so good but Just think it as a skeleton and I haven't created a great skeleton but HTML is Skeleton only. And here bones of this skeleton And this ribcage, anyways leave it. This skeleton is only the face of website Which HTML represents. If I move forward to CSS, then CSS gives design to skeleton. The skin, skin's colour of the Skeleton hair, clothes through which humans look nice That is our CSS. So the cascading style sheet, Is a stylesheet language Which give good presentation to the web page or HTML body Which element should have which colour, background colour Which element should float left Which element would go on top Which element will keep how much margin inside it How much padding, What will be its border color All this thing is decided by CSS And we'll see ahead how to use this And it will create our website beautiful and modern looking So all the animation which you see is with the help of CSS you can achieve. Let come quickly to JavaScript without wasting time And JavaScript is the brain Which is the brain of the website, the thinking ability Is JavaScript. Like a human is taking wise decisions then It can take wise decisions with the help of JavaScript only Suppose a person saying let's go there means he can think Means he is JavaScript. Now in humans terms, I have explain HTML and CSS. HTML is the body and CSS is its design or looks. JavaScript is its brain that where to go, when to go how to go The way it decides all the things is that Great. Now we will learn JavaScript properly. I want to tell you that if you go deep in JavaScript then It is a big language and you might find it difficult So I will suggest as you move deeper in HTML CSS and JavaScript If you learn HTML Then it doesn't mean you need to learn HTML 100% And I will finish this, thing don't listen half thing and JavaScript. If you even learn HTML 80% then that's enough. If you learn CSS 40-60% then it's enough. I am talking about beginners, when you are starting. And if you learn JavaScript 50 to 70% then that's enough. And the rest of it you will learn from practice And by building website. Don't ever make The biggest mistake beginners do You took HTML and spent 1-1.5 year to learn it By saying I will learn perfect HTML You took CSS and trying to remember every property And took that and never even touched JavaScript You don't even know what J and S have in JavaScript. How everything works You don't even know JavaScript spelling Don't do this else you will spend a lot of time And you will never be able to relate how to use all this 3 things If you want to relate and understand things properly Then read all the 3 simultaneously and learn by building website That only I am going to teach you through this course So JavaScript is high level dynamic interpreted programming language And meaning of dynamic I will explain later Leave this for now and this is client side scripting language This is very important JavaScript can be used on server side But this is a client side programming language So, if I come on my this diagram So here the programming inside Browser Like clicking on this will give this If I hover Mouse then what should happen All this can be written through JavaScript If I click on any element a new window should open Clicking on any element should submit a form All that can be done through JavaScript. So we can write logic. You can write logic of converting km into miles. You can convert kg into grams or pounds. You can do all that with the help of JavaScript. And you can change data of HTML tags with help of JavaScript. We will learn how to do all this things And here to do your client side scripting JavaScript helps I hope you have understood the role of HTML CSS and JavaScript In web development. And this video was an introductory video. Many might be thinking this was basic and you already know this But I want to take it to advanced level quickly I will show you how website are made and And those who already know will get to know That which are those practices which they should use But weren't using. So, stay tuned in this series with me. And do access the playlist if you haven't till now. This is my humble request to you. I will add playlist in description Quickly grab that playlist Don't forget to like this video That's it for today's video Thank you so much for watching this video And I will see you next time