How does 1 website work and what are HTML, CSS, JavaScript rules
Table of Contents
How to make websites
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 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.
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, 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. And I want to give the assurance that, after reading this 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.
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. Alright guys, we will see now what is HTML, CSS and JavaScript.
what is HTML, CSS and JavaScript?
If 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.
What are the roles of JavaScript, HTML and CSS in a website ?
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. In a web server and a computer 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, It says that give me prodigifirm.com.
Now its like, prodigifirm.com is on server of prodigifirm 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 prodigifirm.com/about So it may happen that I get some another page. If I write prodigifirm.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 prodigifirm.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 prodigifirm.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 the browser will display that only. So, this is a well-standardized system. And as I said, there is a body of the 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 to this only. Now here, HTML is only the body, which means the face if we talk about humans. Then only the skeleton with bones. So if we talk about the skeleton, my drawing is not so good, but just think of it as a skeleton and I haven’t created a great skeleton, but HTML is the skeleton only.
And here are the bones of this skeleton. And this ribcage, anyways leave it. This skeleton is only the face of the website, which HTML represents. If I move forward to CSS, then CSS gives design to the skeleton. The skin, the skin’s color of the skeleton, hair, clothes through which humans look nice. That is our CSS.
So the cascading style sheet, is a stylesheet language which gives good presentation to the webpage or HTML body. Which element should have which color, background color? 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 these things are 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’s come quickly to JavaScript without wasting time. And JavaScript is the brain, which is the brain of the website, the thinking ability. JavaScript is like a human 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 human terms, I have explained 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 into JavaScript then It is a big language, and you might find it difficult. So I will suggest as you move deeper into 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 a website. Don’t ever make The biggest mistake beginners do. You took HTML and spent 1-1.5 years learning it By saying I will learn perfect HTML. You took CSS and tried 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 these 3 things. If you want to relate and understand things properly, Then read all the 3 simultaneously and learn by building a website That only I am going to teach you through this course. So JavaScript is a high-level dynamic interpreted programming language, and the meaning of dynamic I will explain later.
Leave this for now and this is a client-side scripting language. This is very important. JavaScript can be used on the server-side, But this is a client-side programming language. So, if I come to my this diagram So here the programming inside the 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 for 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 the data of HTML tags with the help of JavaScript. We will learn how to do all these 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.
Many might be thinking this was basic and you already know this But I want to take it to an advanced level quickly I will show you how websites are made and And those who already know will get to know Which are those practices which they should use But weren’t using. So stay tuned in this series with me.