Full Stack Web Development Fundamentals
Introduction to Web Development
The Building Blocks of the Web
Every website you visit, from your favorite news source to your online banking portal, is built with code. At its core, web development is about using different programming languages to tell a browser how to display a webpage. The two most fundamental languages are HTML and CSS.
Think of it like building a house. HTML (HyperText Markup Language) is the frame and foundation. It provides the structure: this is a wall, this is a door, this is a roof. CSS (Cascading Style Sheets) is all the interior and exterior design. It adds the paint, hangs the pictures, and arranges the furniture, making the house look good and feel like a home.
HTML (HyperText Markup Language) is the foundation of web development.
Together, these two languages create the static web pages that form the backbone of the internet. A static page is one that looks the same for every visitor because its content is fixed directly in the code.
HTML Gives a Page Structure
HTML isn't a programming language in the traditional sense; it's a markup language. This means it uses tags to annotate, or "mark up," content to define its structure and meaning. These tags are keywords surrounded by angle brackets, like <html>.
Tags usually come in pairs: an opening tag and a closing tag. For example, to create a paragraph, you wrap your text in <p> and </p> tags. Everything between them is considered part of that paragraph. This combination of an opening tag, content, and a closing tag is called an element.
The image above shows a basic webpage with a heading and a paragraph. The HTML code to create this is straightforward. It establishes the document type, the head (which contains metadata like the page title), and the body (which holds the visible content).
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<!-- Lists are another common element -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</body>
</html>
In this example, <h1> defines the most important heading, <p> defines a paragraph, and <ul> creates an unordered (bulleted) list with <li> for each list item. By using these semantic tags, we give meaning to our content, which is crucial for both search engines and accessibility tools.
CSS Makes It Look Good
Once you have your HTML structure, CSS brings it to life with style. CSS allows you to control colors, fonts, spacing, layout, and much more. It separates the presentation of a document from its content.
This separation is powerful. You can completely change the look of a website just by changing the CSS file, without ever touching the HTML. A CSS rule has two main parts: a selector and a declaration block.
The selector points to the HTML element you want to style. The declaration block contains one or more declarations, and each declaration includes a property and a value, separated by a colon.
Let's add some style to our previous HTML example. We want to make the heading blue and change the font for the entire page.
/* This is a CSS comment */
body {
font-family: sans-serif;
line-height: 1.5;
}
h1 {
color: #005A9C; /* A nice shade of blue */
font-size: 32px;
}
p {
color: #333333; /* Dark gray for readability */
}
Here, body, h1, and p are the selectors. They target the <body>, <h1>, and <p> elements in the HTML. The properties inside the curly braces, like font-family and color, are then applied to those elements. To connect this CSS to our HTML, we would typically save it in a separate file (e.g., style.css) and link to it from within the <head> section of the HTML document.
By mastering these two simple languages, you can build clear, well-structured, and beautifully designed static websites. This is the essential first step for anyone looking to get into web development.
In the analogy of building a house, what roles do HTML and CSS play?
What are the two main parts of a CSS rule?