Before going into more details about HTML, CSS and Javascript. I would like you to do this activity to understand the purpose of each of this terms. Mostly, people don't like to learn these things in details as they don't exactly know why to learn this. So, this is all about why a full stack developer needs to learn HTML, CSS and javascript.
HTML - refers to HyperText Markup Language and it is used to create the elements of a webpage.
CSS - refers to Cascading Style Sheet and it is used to format the layout of a webpage.
Javascript - It is a scripting language that makes the webpage interactive
Now, let us do the below activity to understand that:
ACTIVITY - CREATE A WEBPAGE
I am using notepad++ text editor to create this sample webpage. You can use any text editor or some IDE like visual studio if you have. Right now don't dig much into the code because this example is for beginners to show what HTML, CSS and javascript does. We will go through each of these in details in further lessons.
Purpose of the webpage: A registration page where user needs to enter the Email address and password like below:
Image 2.1: Registration Form
This form has below elements:
1) Heading - Registration
2) Labels i.e text Email Address, Password and Confirm Password
3) Input boxes corresponding to each labels
4) Buttons - Submit and Clear
Now we have to write HTML code for each of these elements:
<html>
<head>
<title>Registration Page</title>
</head>
<body>
<form id="regForm">
<h1>Registration</h1>
<label id="lblEmail">Email Address</label>
<input type="text" id="txtName" />
<label id="lblPassword">Password</label>
<input type="Password" id="txtPassword"/>
<label id="lblConfirmPassword">Confirm Password</label>
<input type="Password" id="txtConfirmPassword"/>
<input type="Submit" text="Submit" id="btnSubmit" />
<input type="button" value="Clear" id="btnClear" />
</form>
</body>
</html>
Save this page as HTML and open it with some browser, I use Google Chrome. The page would be displayed as below:
Image 2.2: Registration Form With only HTML Code
Now let us give this page a make over to look like that shown in image 1. For that, we have to write CSS.
So, I am adding below CSS code for that (I am not explaining the CSS code right now as this is just to explain the purpose):
<style>
#regForm{text-align:center}
.formElementsWrapper{display: inline-block;
width: 50%;
padding: 10px 50px 30px 50px;
background: #f7f7f7;
margin-top: 120px;
max-width: 400px;}
label{ float: left;
width: 50%;
text-align: left;
margin-bottom: 10px;}
input[type="text"],input[type="Password"]{ float: left;
width: 50%;
margin-bottom: 10px;
padding: 5px 10px;}
input#btnSubmit {
padding: 9px 20px;
background-color: lightseagreen;
color: #fff;
border: 0;
border-radius: 4px;
margin-top: 15px;
}
input#btnClear {
padding: 9px 20px;
background-color: mediumvioletred;
color: #fff;
border: 0;
border-radius: 4px;
}
</style>
We need to add this snippet inside head below the title tag. Now save the file again and open it with any browser. You would be able to see the page as in Image 2.1.
Now, lets assume that during the submit button click, we have to validate whether the textboxes are not empty and while clicking the clear button, all the textboxes values should be erased. For this we have to write some javascript code as below:
<script>
function ValidateForm(){
var Name = document.getElementById("txtName").value;
var Password = document.getElementById("txtPassword").value;
var ConfirmPassword = document.getElementById("txtConfirmPassword").value;
if(Name.trim() == "" || Password.trim() == "" || ConfirmPassword.trim() == "")
{
alert("Please fill all the details");
}
}
function ClearForm(){
document.getElementById("txtName").value = "";
document.getElementById("txtPassword").value = "";
document.getElementById("txtConfirmPassword").value = "";
}
</script>
These 2 functions needs to be called on click of the button, so we have to change the HTML code for the submit and clear button as below:
<input type="button" value="Submit" onclick="ValidateForm()" id="btnSubmit" />
<input type="button" value="Clear" onclick="ClearForm()" id="btnClear" />
Now, again save the code and view it in the browser. This time, you made the webpage interactive by using javascript as below:
Image 2.3: Registration Form After Writing Javscript Code for Validation
While clicking the buttons, the page would respond as per the coding. This is what javascript does and is for.