<article class="container">
<!-- Article Header -->
<header>
<h1>Build Your First Web Page: A Beginner's Guide to HTML & CSS</h1>
<p class="intro">
Ever wondered how the websites you visit every day are made? It all starts with two fundamental technologies: HTML and CSS. This guide will walk you through creating your very first, simple web page from scratch. No prior experience needed!
</p>
</header>
<!-- Section 1: Prerequisites -->
<section id="prerequisites">
<h2>What You'll Need</h2>
<p>The best part about web development is how accessible it is. You only need two things to get started:</p>
<ul>
<li><strong>A Text Editor:</strong> This is where you'll write your code. You can use something simple like Notepad (Windows) or TextEdit (Mac), but we recommend a free code editor like <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a> for a better experience.</li>
<li><strong>A Web Browser:</strong> Any modern browser like Google Chrome, Mozilla Firefox, or Microsoft Edge will do. You already have one of these!</li>
</ul>
</section>
<!-- Section 2: Understanding HTML -->
<section id="html-basics">
<h2>Part 1: The Structure with HTML</h2>
<p>HTML stands for <strong>HyperText Markup Language</strong>. Think of it as the skeleton of your website. It provides the structure and content, like headings, paragraphs, images, and links.</p>
<div class="step">
<h3>Step 1: Create Your File</h3>
<p>Open your text editor and create a new file. Save it as <code>index.html</code>. The <code>.html</code> extension is very important—it tells the browser that this is a web page.</p>
</div>
<div class="step">
<h3>Step 2: The Basic HTML Boilerplate</h3>
<p>Every HTML page has a standard structure. Copy and paste the code below into your <code>index.html</code> file. This is your starting template.</p>
<pre><code><!DOCTYPE html><html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>My First Web Page</title>
</head>
<body>
<!– Your content will go here! –>
</body>
</html>
Here’s a quick breakdown:
<!DOCTYPE html>: Declares the document type.<html>: The root element of the page.<head>: Contains meta-information (like the title that appears in the browser tab).<body>: Contains the visible content of the page.
<div class="step">
<h3>Step 3: Add Some Content</h3>
<p>Let's add a heading and a paragraph inside the <code><body></code> tag. Replace <code><!-- Your content will go here! --></code> with the following:</p>
<pre><code><h1>Hello, World!</h1><p>This is my very first web page. I’m learning how to build things for the web!</p>
<h2>Things I’m Learning</h2>
<ul>
<li>HTML for structure</li>
<li>CSS for style</li>
<li>And so much more!</li>
</ul>
Save your file and drag it into your web browser window. You should see your content appear!
)
<!-- Section 3: Understanding CSS -->
<section id="css-basics">
<h2>Part 2: The Style with CSS</h2>
<p>CSS stands for <strong>Cascading Style Sheets</strong>. If HTML is the skeleton, CSS is the clothing. It controls colors, fonts, spacing, and the overall look of your page.</p>
<div class="step">
<h3>Step 1: Add a Style Block</h3>
<p>For this simple project, we'll add our CSS directly into the HTML file using a <code><style></code> tag. Place this tag inside your <code><head></code> section, right after the <code><title></code>.</p>
<pre><code><head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<style>
/* Our CSS rules will go here! */
</style></head>
