Every website you've ever visited is built with HTML and CSS. HTML provides the structure, CSS provides the style. Together, they're the foundation of all web development.
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses elements wrapped in tags to define content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my website.</p>
</body>
</html>Essential HTML Elements
Headings (h1–h6)
<h1>Main Title (Most Important)</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>Always have only ONE h1 per page — it's crucial for SEO!
Paragraphs & Text
<p>This is a paragraph.</p>
<strong>Bold text</strong>
<em>Italic text</em>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->Links & Images
<a href="https://pouchcraft.in" target="_blank">Visit PouchCraft</a>
<img src="photo.jpg" alt="Description of image" width="300">Lists
<!-- Unordered list -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Ordered list -->
<ol>
<li>Plan your site</li>
<li>Write HTML structure</li>
<li>Style with CSS</li>
</ol>Forms
<form action="/submit" method="POST">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" rows="5" placeholder="Your Message"></textarea>
<button type="submit">Send</button>
</form>Semantic HTML5 Elements
<header> <!-- Site header/navigation -->
<nav> <!-- Navigation links -->
<main> <!-- Main content -->
<section> <!-- Distinct section -->
<article> <!-- Self-contained content -->
<aside> <!-- Sidebar content -->
<footer> <!-- Page footer -->Semantic HTML improves accessibility and SEO significantly!
What is CSS?
CSS (Cascading Style Sheets) controls how HTML elements look. You can add CSS in three ways:
<!-- 1. Inline (avoid this) -->
<p style="color: red;">Red text</p>
<!-- 2. Internal (for small pages) -->
<style>
p { color: blue; }
</style>
<!-- 3. External (best practice) -->
<link rel="stylesheet" href="styles.css">CSS Selectors
/* Element selector */
p { color: black; }
/* Class selector */
.highlight { background: yellow; }
/* ID selector */
#hero { font-size: 2rem; }
/* Descendant selector */
nav a { color: white; }
/* Hover state */
button:hover { background: #4db5ff; }The Box Model
Every HTML element is a box with these properties:
┌─────────────────────────────┐
│ MARGIN │
│ ┌───────────────────────┐ │
│ │ BORDER │ │
│ │ ┌─────────────────┐ │ │
│ │ │ PADDING │ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘.box {
width: 300px;
padding: 20px;
border: 2px solid #4db5ff;
margin: 10px auto;
}Flexbox — Modern Layouts
.container {
display: flex;
justify-content: center; /* horizontal alignment */
align-items: center; /* vertical alignment */
gap: 20px;
flex-wrap: wrap; /* wrap to next line */
}CSS Grid
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Responsive grid */
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}Responsive Design with Media Queries
/* Mobile first */
.container { width: 100%; padding: 15px; }
/* Tablet */
@media (min-width: 768px) {
.container { width: 80%; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { width: 75%; max-width: 1200px; }
}CSS Custom Properties (Variables)
:root {
--primary-color: #4db5ff;
--text-color: #ffffff;
--bg-color: #000000;
--font-size-lg: 1.5rem;
}
.hero {
background: var(--bg-color);
color: var(--text-color);
font-size: var(--font-size-lg);
}Conclusion
HTML and CSS are the foundation of every website. Master these fundamentals, and you'll be well on your way to becoming a full-stack developer. Practice by building small projects — a personal portfolio, a landing page, or a blog layout. The more you build, the faster you'll learn!