Magyar zászlóMagyar

Class 1 – Introduction to HTML & CSS

2025-02-12

Topics

  • How the web works: HTTP, browsers, client-server model
  • HTML5 semantic elements
  • CSS selectors and the cascade
  • Box model and Flexbox

HTML Document Structure

Every HTML document is built on the following basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <!-- Page content -->
</body>
</html>

CSS Flexbox

Flexbox is a one-dimensional layout system that enables flexible positioning of elements:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.item {
  flex: 1;
  padding: 1rem;
}

Homework

Create a simple navigation bar using Flexbox that behaves responsively on small screens.

Note: We’ll continue with JavaScript in the next class!