Getting Started with Web Development
Every website starts with HTML and CSS. HTML provides structure, CSS adds style. Let’s build a complete website from scratch.
Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Welcome</h1></header>
<main><p>Hello World!</p></main>
</body>
</html>Adding CSS Styles
body { font-family: Arial, sans-serif; margin: 0; }
header { background: #2c3e50; color: white; padding: 1rem; }
main { max-width: 900px; margin: auto; padding: 2rem; }Key HTML Elements
| Tag | Purpose |
|---|---|
| <h1>-<h6> | Headings |
| <p> | Paragraphs |
| <a> | Links |
| <img> | Images |
| <div> | Containers |
CSS Box Model
Every element has margin, border, padding, and content. Understanding the box model is essential for layouts.
Making It Responsive
@media (max-width: 768px) {
main { padding: 1rem; }
header h1 { font-size: 1.5rem; }
}Next Steps
Learn CSS Flexbox and Grid for layouts, then add JavaScript for interactivity. Congratulations on building your first website!