How to get started with web development?
What is Web Development?
In simple words, web development is basically building or maintaining websites/web-apps. In 2021, a lot of tools and frameworks have been developed for web development. But fundamentally, it consists of three things - HTML, CSS and JavaScript.
We will learn all three of them by building a very basic countdown button application. We can use sublime text, notepad or visual studio code. We will create a html file, a css file named style.css and a js file named index.js in a folder. We have to link our css and js file in html using link tag for css and script tag for linking our js file.
1. HTML -
HTML stands for Hyper Text Markup Language. Everything you see on a website like a button or an input box is on the web page using HTML. It consists of opening and closing tags for all kinds of elements. E. g, <button></button>, <table></table> etc.
Below is the HTML code for our countdown app -
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width,initial-scale=1.0”
<title>Count Down App</title>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<h4 id=“count-down”>0</h5>
<button class=“count-btn”>Click</button>
<scripy src=“index.js”></script>
</body>
</html>
2. CSS -
CSS stands for Cascading Style Sheets. When you see a button of colour blue or a header of colour black on a website, it is done with the help of CSS. It is done by applying styles to an element, id or a class.
We can connect our css file with html file using the link tag in the head section of out html page.
<link rel=“stylesheet” href=“style.css”>
Below is the code for our countdown app -
body {
background: orange;
}
#count-down {
font-size: 27px;
color: brown;
}
button {
background: rgb(128, 128, 153);
color: white;
width: 140px;
padding: 9px;
border: 2px solid white;
}
3. JavaScript -
It is the final part of our little application.Whenever you see something change or show up when you click on a button that’s done using javascript.
We can link our js file to our html using the script tag in the body section.
<script src=“index.js”></script.js>
Below is the js code for our count down app -
let count = 0;
document.querySelector(“.count-btn”).addEventListener(“click”, () => {
count = count + 1;
document.getElementById(“count-down”).innerHTML = count;
});
And there it is. You have built your first web app.
Live Application - https://tanyasaxena64.github.io/Count-Down-App/
