1. gyakorlat – HTML és CSS bevezető – Kliensoldali webprogramozás

Témakörök

A web működése: HTTP, böngészők, szerver-kliens modell
HTML5 szemantikus elemek
CSS szelektorok és a kaszkád
Box model és Flexbox

A HTML dokumentum felépítése

Minden HTML dokumentum a következő alapstruktúrára épül:

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dokumentum címe</title>
</head>
<body>
  <!-- Az oldal tartalma -->
</body>
</html>

CSS Flexbox

A Flexbox egy egydimenziós elrendezési rendszer, amely lehetővé teszi elemek rugalmas pozicionálását:

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

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

Házi feladat

Készíts egy egyszerű navigációs sávot Flexbox segítségével, amely reszponzívan viselkedik kis képernyőn.

Megjegyzés: A következő gyakorlaton JavaScript-tel folytatjuk!