In dieser Lektion werden wir uns mit dem Erstellen komplexer Webseiten und der Verwendung von Strukturen in HTML und CSS vertraut machen. Wir werden uns mit Div-Container, Layouts und Flexbox auseinandersetzen, um strukturierte und responsive Seiten zu erstellen. Ein typisches Beispiel ist ein Blog-Layout, das eine Hauptnavigationsleiste, einen Hauptinhalt und eine Seitenleiste enthält. Hier ist ein einfaches Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Blog</title>
<style>
.header, .content, .sidebar {
margin: 10px;
padding: 10px;
}
.header { background-color: #4CAF50; color: white; }
.content { background-color: #f4f4f4; }
.sidebar { background-color: #ddd; }
</style>
</head>
<body>
<div class="header">Mein Blog</div>
<div class="content">
<h1>Willkommen bei meinem Blog</h1>
<p>Ein interessanter Beitrag über CSS Flexbox.</p>
</div>
<div class="sidebar">Rechtlicher Hinweis</div>
</body>
</html>