Master Full Stack Development
Introduction to Web Development
The Blueprint of the Web
Every website you visit, from a simple blog to a massive online store, is built on a foundation of HTML. Think of HTML (HyperText Markup Language) as the skeleton of a webpage. It provides the essential structure and content, but not the style. It tells the browser what each piece of content is—a heading, a paragraph, a list, an image—using a system of tags.
HTML defines the content and its structure, like a blueprint for a house. It outlines where the rooms, doors, and windows are, but doesn't say anything about the paint color or furniture.
HTML tags are keywords surrounded by angle brackets, like <h1> or <p>. Most tags come in pairs: an opening tag that starts an element (e.g., <p>) and a closing tag that ends it (e.g., </p>). Everything between the two is the content of that element. Let's look at a basic example.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>This is a Main Heading</h1>
<p>This is a paragraph of text. It's where you'd write most of your content.</p>
</body>
</html>
Here’s a quick breakdown:
<!DOCTYPE html>: Declares that this is an HTML5 document.<html>: The root element that wraps everything on the page.<head>: Contains meta-information, like the page title that appears in the browser tab.<body>: Holds all the visible content of the page.<h1>: A top-level heading.<p>: A paragraph.
Adding Style with CSS
An HTML document on its own is functional but plain. To add visual flair—colors, fonts, spacing, and layout—we use CSS, or Cascading Style Sheets. If HTML is the skeleton, CSS is the clothing, hair, and makeup. It's the language we use to tell the browser how to display the HTML elements.
CSS works by selecting HTML elements and applying style rules to them. A rule consists of a selector (which element to target) and a declaration block (the styles to apply). Declarations are made of a property (like color or font-size) and a value (like blue or 16px).
/* This is a CSS comment */
body {
font-family: sans-serif;
}
h1 {
color: #005A9C; /* A nice shade of blue */
}
p {
line-height: 1.5;
}
To apply these styles, you save them in a separate file with a .css extension (e.g., style.css) and then link to it from your HTML file. You add a <link> tag inside the <head> section of your HTML.
<head>
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
Keeping your HTML and CSS separate is a key principle of modern web development. It makes your code cleaner, easier to manage, and more reusable.
Building Static Pages
By combining an HTML file for structure and a CSS file for style, you create a static web page. This is the simplest type of website. It's called "static" because the content is fixed—it looks the same for every single person who visits it, until the developer manually changes the files.
static web page
noun
A web page that displays the same fixed content to every user, delivered from the server exactly as it's stored.
These foundational skills—structuring with HTML and styling with CSS—are the starting point for all web development. They are the essential building blocks you'll use to create any website, no matter how complex it eventually becomes.
Ready to check your understanding of these core concepts?
What is the primary role of HTML in creating a webpage?
In a standard HTML5 document, which tag is used to contain all the visible content of the page, such as headings, paragraphs, and images?
With HTML and CSS, you have the power to build clean, well-structured, and beautifully designed websites from scratch.