Web App and Data Dashboard Development
Web Development Basics
The Three Pillars of the Web
Every website you visit, from a simple blog to a complex application, is built on three core technologies: HTML, CSS, and JavaScript. Think of them like building a house.
HTML is the structure: the foundation, walls, and roof. CSS is the decoration: the paint, furniture, and landscaping. JavaScript provides the functionality: the electricity, plumbing, and appliances that make the house usable.
These three languages work together in the browser on your computer or phone to create the web pages you see and interact with. Let's look at each one.
HTML The Skeleton
HTML stands for HyperText Markup Language. It's the standard language for creating web pages. HTML describes the structure of a page using elements, which are represented by tags.
tag
noun
A keyword surrounded by angle brackets, used to mark the beginning and end of an HTML element.
Tags tell the browser how to display the content. For instance, <h1> creates a main heading, <p> creates a paragraph, and <img> embeds an image. Most tags come in pairs: an opening tag like <p> and a closing tag like </p>. The content goes in between.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>A Big Heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
This simple HTML document has a head (which contains meta-information like the title) and a body (which contains the visible content). This structure is the foundation of every web page.
CSS The Style
Without any styling, an HTML page looks plain. That's where CSS, or Cascading Style Sheets, comes in. CSS is the language used to describe the presentation of a document written in HTML. It handles the look and feel—colors, fonts, spacing, and layout.
CSS separates the presentation from the structure. This is a powerful idea. It means you can completely change how a website looks without touching the underlying HTML.
CSS works by selecting HTML elements and applying style rules to them. You can select elements by their tag name (like p), a class name, or an ID. Here's how you could style the previous HTML to change the colors and font size.
/* This is a CSS comment */
body {
background-color: #f0f0f0; /* Light gray background */
font-family: sans-serif;
}
h1 {
color: #333366; /* Dark blue color */
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
You can include this code in a <style> tag in your HTML head, or, more commonly, save it in a separate .css file and link to it from your HTML. This keeps your content and styling organized.
JavaScript The Interactivity
HTML and CSS create static pages. They look nice, but they don't do anything. JavaScript is the programming language that brings web pages to life. It's used to create interactive elements, validate forms, communicate with servers, and dynamically change content without reloading the page.
Core language for web development, enabling dynamic and interactive features in websites with fewer lines of code.
JavaScript can manipulate the HTML and CSS of a page. This is called DOM manipulation. The DOM, or Document Object Model, is the browser's representation of the page's structure. JavaScript can add, remove, or change any element or attribute on the page.
// Select the h1 element
const heading = document.querySelector('h1');
// Add an event listener for a click
heading.addEventListener('click', function() {
// Change the text content when clicked
heading.textContent = 'You clicked me!';
});
If you added this script to the previous example, clicking the main heading would change its text. This is a simple example, but it demonstrates the core power of JavaScript: responding to user actions and updating the page in real time.
Together, these three technologies form the foundation of front-end web development. Mastering them is the first step toward building anything on the web.
Ready to check your understanding?
If building a website is like building a house, what role does HTML play?
Which technology is primarily responsible for adding interactivity, like responding to a button click, to a web page?
With a solid grasp of these building blocks, you're ready to start creating your own web pages.