Learn Web Development Basics with HTML CSS and JavaScript
Last Updated :
06 May, 2024
Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites.
The word Web Development is made up of two words, that is:
- Web: It refers to websites, web pages, or anything that works over the internet.
- Development: It refers to building the application from scratch.
Web Development can be classified into two ways
Frontend Development
Front-end Development is the development or creation of a user interface using some markup languages and other tools. It is basically the development of the user side where only user interaction will be counted. It consists of the interface where buttons, texts, alignments, etc are involved and used by the user.
Popular Frontend Technologies
- HTML: HTML stands for HyperText Markup Language. It is used to design the front end portion of web pages using markup language. It acts as a skeleton for a website since it is used to make the structure of a website.
- CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify the process of making web pages presentable. It is used to style our website.
- JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our website.
What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages on the internet. It was introduced by Tim Berners-Lee in 1991 at CERN as a simple markup language. Since then, it has evolved through versions from HTML 2.0 to HTML5 (the latest 2024 version).
HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages and Markup language defines the text document within the tag.
Example: This example shows the basic use of HTML on the web browser.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>Hello World! Hello from GFG </p>
</body>
</html>
What is CSS?
CSS or Cascading Style Sheets is a stylesheet language used to add styles to the HTML document. It describes how HTML elements should be displayed on the web page.
CSS was first proposed by Håkon Wium Lie in 1994 and later developed by Lie and Bert Bos, who published the CSS1 specification in 1996.
Basic CSS Example
CSS has 3 ways to style your HTML:
- Inline: Add styles directly to HTML elements (limited use).
- Internal: Put styles inside the HTML file in a <style> tag.
- External: Create a separate CSS file (.css) and link it to your HTML.
Example: This example shows the use of external, internal and inline CSS into HTML file.
HTML
<!-- File name: index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- Importing External CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Using Internal CSS -->
<style>
h2 {
color: green;
}
</style>
</head>
<body>
<!-- Using Inline CSS -->
<h2 style="text-align: center;">Welcome To GFG</h2>
<p>Showing all type of CSS use - GeeksforGeeks</p>
</body>
</html>
/* External CSS */
/* File name: style.css */
p {
text-align: center;
}
Output:
OutputWhat is JavaScript ?
JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming language. It is also known as the scripting language for webpages. It is well-known for the development of web pages, and many non-browser environments also use it.
JavaScript is a weakly typed language (dynamically typed). JavaScript can be used for Client-side developments as well as Server-side developments. JavaScript is both an imperative and declarative type of language. JavaScript contains a standard library of objects, like Array, Date, and Math, and a core set of language elements like operators, control structures, and statements.
Example: This example shows the alert by the use of alert method provided by JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Custom Alert Box</title>
<style>
body {
display: flex;
justify-content: center;
width: 100vw;
margin-top: 20px;
}
.alert {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f8d7da;
color: #721c24;
padding: 15px 20px;
border: 1px solid #f5c6cb;
border-radius: 5px;
}
</style>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
const alertBox = document.createElement('div');
alertBox.className = 'alert';
alertBox.textContent = 'This is a custom alert box.';
document.body.appendChild(alertBox);
}
</script>
</body>
</html>
Output:
There are others frontend frameworks are used to create a website so that the UI can be more better and it could be fast running website.
Similar Reads
Websites and Software that help HTML, CSS And JavaScript Developers Developing a website using HTML, CSS, and JS is a time consuming and lengthy process. But using proper resources for the work can accelerate the process. These tools not only make things easier, but you also step it up on the quality level. Here is a list of websites and software that will help you
3 min read
Begin Web Development with a Head Start To get a head start in web development, you can take the following steps: Learn the basics: Learn the basics of HTML, CSS, and JavaScript, which are the building blocks of web development. You can use online tutorials and resources, such as Codecademy, W3Schools, and FreeCodeCamp to start learning.
8 min read
Manipulating HTML Elements with JavaScript JavaScript is a powerful language that can be used to manipulate the HTML elements on a web page. By using JavaScript, we can access the HTML elements and modify their attributes, styles, and content. This allows us to create dynamic and interactive web pages. Methods to Identify the elements to man
5 min read
Javascript: A gateway to the world of web development JavaScript is a widely-used programming language that is essential for modern web development. While it is most well-known as the scripting language for Web pages It is a high-level, dynamic, and interpreted language that allows developers to add interactivity and dynamic content to web pages. It’s
6 min read
How to make Live Coding Editor using HTML CSS and JavaScript ? In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.Final OutputPrerequisiteHTMLCSSJavaScriptAppr
3 min read
How to Create a Portfolio Website using HTML CSS and JavaScript ? A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that
15+ min read
Best Books to Learn Front-End Web Development There is a huge demand for Front-End Web Developers or Web Designers in IT, and Front-End Developer Jobs are also some of the highest-paying jobs. These all are the reason people love to choose this field. Frontend development is all about UI/UX, where the main concern is related to the layout, styl
9 min read
Why learn JavaScript Foundations ? JavaScript is like a cornerstone in the world of programming languages. It's famous for being adaptable and everywhere. No matter if you're into making websites, or mobile apps, or diving into server stuff, understanding the basics of JavaScript is super important. Let's talk about why it's so cruci
4 min read
How to Host HTML, CSS & JavaScript Website on Vercel ? In this article, we will host HTML, CSS & JavaScript Websites on Vercel. Every web developer wants to not only create a website but also host it properly, ensuring that visitors and others have a problem-free experience while visiting your website and with Vercel you can seamlessly host your web
4 min read
Using Primer CSS - A Simple and Transparent CSS Library for Web Development Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS helps you to control the layout and appearance of web pages. In this article, we will discuss the concept of Primer CSS, a CSS library that provides a simple and easy-to
3 min read