Practical Code Examples: HTML + CSS

1. Basic HTML Page Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is a sample web page.</p>
  </body>
</html>

2. Creating Links and Lists

<h2>Useful Links</h2>
<ul>
  <li><a href="https://example.com">Example Website</a></li>
  <li><a href="#section2">Go to Section 2</a></li>
</ul>
<ol>
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

3. Adding Images with Alt Text

<img src="images/logo.png" alt="Site Logo" width="200" />

4. HTML Semantic Tags

<header>
  <h1>My Blog</h1>
</header>
<main>
  <article>
    <h2>Post Title</h2>
    <p>This is an article.</p>
  </article>
</main>
<footer>
  <p>© 2025 My Website</p>
</footer>

5. Linking External CSS

HTML head:

<link rel="stylesheet" href="styles/main.css" />

CSS file:

body {
  background-color: #f9f9f9;
  color: #2c3e50;
  font-family: Arial, sans-serif;
}

6. Box Model and Spacing

.container {
  padding: 20px;
  margin: 10px;
  border: 2px solid #3498db;
}

7. Flexbox Layout

HTML:

<div class="flex-row">
  <div>Left</div>
  <div>Right</div>
</div>

CSS:

.flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

8. Responsive Text with Media Query

h1 {
  font-size: 36px;
}

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

9. Button with Hover Effect

HTML:

<button class="cta-button">Click Me</button>

CSS:

.cta-button {
  background-color: #2980b9;
  color: #fff;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s;
}

.cta-button:hover {
  background-color: #1f6392;
}

10. GitHub Pages Deployment Tip

If your HTML file is named index.html and placed at the root of your repository, GitHub Pages will automatically render it at:

https://yourusername.github.io/your-repo-name/

Make sure your CSS and image paths are relative, not absolute.

Use these examples as building blocks for your own mini projects and lab tasks.