🏠 Kurzus › 1. Fázis — HTML & CSS
1. Fázis · HTML & CSS
← Lark Noa ← Főoldal 2. Fázis →
1. Fázis · 1. Lecke

A kódszerkesztőnk — Visual Studio Code

Mielőtt egyetlen sort írunk, szükségünk van egy jó eszközre. A mi választásunk a VS Code — ingyenes, minden programnyelvet ismer, és a világ egyik legelterjedtebb kódszerkesztője.

⏱ 30 perc
🛠 Telepítés
🆓 Teljesen ingyenes
🎯 Feladat: első HTML megnyitása

1Mi az a kódszerkesztő és miért kell?

Technikailag a Windows Notepad-ban is lehet HTML-t írni — de az olyan, mint kalapáccsal sebészeti műtétet végezni. Elvégezhető, de sokkal nehezebb és több a hiba lehetősége. Egy kódszerkesztő segít megelőzni a hibákat, gyorsabban dolgozni, és egyből látni mi micsoda a kódban.

Mit csinál egy kódszerkesztő amit a Notepad nem?

Szintaxis kiemelés — a HTML tagek pirosak, a JS kulcsszavak lilák, a szövegek zöldek. Egy pillantásra látod a struktúrát.

Automatikus kiegészítés — elkezded írni hogy <div és ajánlja a </div> lezárást.

Hibakiemelés — piros aláhúzással jelzi ha valamit elírtál, még mielőtt megpróbálnád futtatni.

Keresés és csere — az egész projektben egyszerre megtalál és átír minden szót.

2Miért a VS Code — összehasonlítás

Szerkesztő Ár Nyelvek Bővíthetőség Tanulási görbe
VS Code ✓ Ingyenes 100+ Több ezer bővítmény Közepes — 1-2 nap
Notepad++ Ingyenes Sok Kevés Nagyon könnyű
Sublime Text ~80 USD Sok Közepes Könnyű
WebStorm ~70 USD/év Web-fókusz Beépített Nehezebb
Notepad (Windows) Ingyenes Nincs kiemelés Nincs Azonnal
A mi döntésünk

A VS Code a legjobb egyensúly: teljesen ingyenes, de profi szintű. Ugyanezt használják a Google, Microsoft, Netflix fejlesztői is. Ha megtanulod most, ez a tudás évtizedekig hasznos marad.

3Telepítés — lépésről lépésre

Letöltési cím

https://code.visualstudio.com
Windows, Mac és Linux verziók mind elérhetők ugyanitt. Válaszd a te operációs rendszerednek megfelelőt.

Telepítési lépések — Windows TELEPÍTÉS 
1. Nyisd meg: https://code.visualstudio.com
2. Kattints a nagy kék "Download for Windows" gombra
3. Futtasd a letöltött VSCodeSetup-x64-*.exe fájlt
4. Telepítés során hagyd bepipálva ezeket:
   ✓ "Add to PATH"               ← fontos!
   ✓ "Register Code as editor for supported file types"
   ✓ "Add 'Open with Code' action to Windows Explorer"
5. Telepítés után indítsd el a VS Code-ot
6. Megnyílik az üdvözlőképernyő — kész vagy!

Első indítás — mit fogsz látni

Az első indításkor egy üdvözlőképernyő jelenik meg. Ezt bezárhatod. A legfontosabb részek:

Explorer (Ctrl+Shift+E)

Bal oldalt — a fájljaid és mappáid fája. Innen nyitod meg a HTML fájlokat.

Editor (középső rész)

Itt írod a kódot. Egyszerre több fájl is nyitva lehet — fülek formájában.

Terminal (Ctrl+`)

Beépített parancssor. Egyelőre nem kell, de hasznos lesz később.

Extensions (Ctrl+Shift+X)

Bővítmények telepítési helye. Ide kell menni a Live Server-hez.

4Kötelező bővítmény: Live Server

A Live Server a legfontosabb bővítmény az oktatáshoz. Nélküle minden mentés után F5-tel kell frissíteni a böngészőt — vele automatikusan frissül amint mentesz.

Live Server telepítése BŐVÍTMÉNY 
1. VS Code-ban nyomj Ctrl+Shift+X (Extensions panel)
2. A keresőbe írd be: "Live Server"
3. Keresd a "Live Server" bővítményt — szerzője: Ritwick Dey
4. Kattints az "Install" gombra
5. Telepítés után megjelenik az állapotsorban:
   "Go Live"  ← erre kell kattintani a kiszolgálás indításához

Használat:
- Nyiss meg egy HTML fájlt
- Kattints a "Go Live" gombra (jobb alsó sarok)
- Automatikusan megnyílik a böngésző: http://127.0.0.1:5500
- Minden mentésnél (Ctrl+S) azonnal frissül!
Ajánlott bővítmények (nem kötelező, de hasznos)

Prettier — automatikusan szép formátumba rendezi a kódot mentéskor
Auto Rename Tag — ha átírod a nyitó taget, a zárót is átírja automatikusan
Color Highlight — a #ff0000 kód mellett megmutatja a tényleges színt

5Leghasznosabb billentyűparancsok

ParancsMit csinálMikor hasznos
Ctrl + SMentésMinden módosítás után — Live Server figyeli
Ctrl + ZVisszavonásHa valamit elrontottál
Ctrl + /Komment ki/beSor kikommentezése gyorsan
Alt + ↑↓Sor mozgatásaKód átrendezése másolás nélkül
Ctrl + DKövetkező egyező kijelöléseTöbb helyen egyszerre szerkesztés
Ctrl + FKeresés a fájlbanMegtalálni egy tag-et vagy változót
Ctrl + Shift + FKeresés minden fájlbanProjektszintű keresés
F12Definícióra ugrásAhol egy függvény vagy változó definiálva van
Ctrl + `Terminal megnyitásaParancssor közvetlenül VS Code-ban
Shift + Alt + FKód formázásaRendetlen kód azonnal rendbe rakása

6A Castle Siege megnyitása VS Code-ban

Most próbáljuk ki a valóságban! Nyisd meg a castle_siege.html fájlt VS Code-ban és nézd meg hogyan jelenik meg a kód.

Első megnyitás lépései GYAKORLAT 
1. VS Code-ban: File → Open Folder (nem File → Open File!)
   → Válaszd ki azt a mappát ahol a játékok vannak
   → Bal oldalt megjelenik az összes fájl

2. Kattints a "castle_siege.html"-re a bal oldali panelen
   → Megnyílik a szerkesztőben
   → Látod a szintaxis kiemelést? Piros tagek, sárga attribútumok?

3. Kattints a "Go Live" gombra (jobb alsó sarokban)
   → Megnyílik a böngészőben és játszható!

4. Próba: keresd meg a <title> taget (Ctrl+F → "title")
   → Változtasd meg a szövegét
   → Mentés (Ctrl+S) → nézd meg a böngésző fülét!
Amit most látni fogsz a kódban

A Castle Siege közel 900 sor kód. Ez elsőre ijesztőnek tűnhet — de a kurzus végére minden egyes sort érteni fogsz. Az első leckékben csak a legelső 15 sort nézzük meg.

✏️ 1. Lecke feladata — VS Code első lépések

Telepítsd a VS Code-ot és végezd el ezeket a feladatokat:

  • Telepítsd a VS Code-ot a code.visualstudio.com oldalról
  • Telepítsd a Live Server bővítményt (Ritwick Dey)
  • Nyisd meg a játékok mappáját (File → Open Folder)
  • Nyisd meg a castle_siege.html fájlt — látod a szintaxis kiemelést?
  • Indítsd el Live Server-rel (Go Live gomb) — fut a játék a böngészőben?
  • Keresd meg a <title> taget (Ctrl+F), írd át a nevet, mentsd (Ctrl+S) — változott a fül felirata?

🧠 Melyik állítás igaz a VS Code-ról?

Fizetős szoftver, de van 30 napos próbaverzió
Csak HTML és CSS szerkesztésre alkalmas
Ingyenes, és 100+ programnyelvet támogat bővítményekkel
A Live Server automatikusan települ VS Code-dal együtt
1. Fázis · 2. Lecke

A HTML dokumentum felépítése

Megismerjük a weboldal "csontvázát" — azt a keretet, amelybe minden más kerül. Megnézzük hogyan néz ki ugyanez a Castle Siege játékban.

⏱ 45–60 perc
📁 HTML
🎮 Castle Siege példa
🎯 Feladat: első saját HTML fájl

1Mi az a HTML?

A HTML (HyperText Markup Language) nem programozási nyelv — hanem egy leírónyelv. Megmondjuk vele, hogy mi van a weboldalon, és mi micsoda. Nem az a dolgunk, hogy a gépnek utasításokat adjunk, hanem hogy struktúrát adjunk a tartalomnak.

Analógia

A HTML olyan, mint egy épület alaprajza. Megmutatja hol van az ajtó, hol a ablak, hol a fal — de azt nem mondja meg, milyen színűek legyenek. A színeket CSS mondja meg, a mozgást (ki nyitja ki az ajtót) JavaScript.

A HTML tagekből (jelölőkből) áll. Minden tagnek van egy nyitó és egy záró változata:

pelda.htmlHTML 
<h1>Ez egy főcím</h1>
<!--  ↑ nyitó tag        ↑ záró tag (perjellel kezdődik) -->

<p>Ez egy bekezdés.</p>

<!-- Vannak önzáró tagek is (nincs tartalmuk): -->
<br>    <!-- sortörés -->
<img src="kep.jpg">  <!-- kép -->

2Az alap dokumentumszerkezet

Minden HTML fájlnak ugyanígy kell kezdődnie. Ez nem opcionális — a böngésző ezt várja:

index.html — az alap vázHTML 
<!DOCTYPE html>                    <!-- 1. Ez HTML5 dokumentum -->
<html lang="hu">                    <!-- 2. Az oldal nyelve -->

  <head>                             <!-- 3. Fejléc (nem látható) -->
    <meta charset="UTF-8">          <!-- ékezetek működnek -->
    <meta name="viewport"
          content="width=device-width">  <!-- mobilos nézet -->
    <title>Oldal neve</title>         <!-- böngésző füle -->
    <style>
      /* CSS ide kerül */
    </style>
  </head>

  <body>                             <!-- 4. Törzs (ez látható) -->
    <h1>Helló Világ!</h1>
    <script>
      // JavaScript ide kerül
    </script>
  </body>

</html>

Pontosan ezt látjuk a Castle Siege-ben

Nyisd meg a castle_siege.html fájlt szövegszerkesztőben — az első 10 sora pontosan ez a szerkezet, csak a title és a tartalom más:

castle_siege.html — valódi fájlunk elejeHTML 
<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Castle Siege – 50 Pálya</title>
  <style>
    /* ... itt van az összes stílus ... */
  </style>
</head>
<body>
  <canvas id="c"></canvas>   <!-- a játék vászna -->
  <div id="hud">...</div>    <!-- sebességváltó gombok -->
  <script>
    // ... itt van az összes JavaScript ... 
  </script>
</body>
</html>
Fontos megfigyelés

A Castle Siege-ben a <body>-ban csak 3 dolog van: egy <canvas>, egy <div>, és egy <script>. A játék 99%-a a scriptben van — de a HTML keret mindig ugyanaz.

3A négy fő elem magyarázata

ElemMit csinálHol látod a játékban
<!DOCTYPE html> Megmondja a böngészőnek hogy ez HTML5 — kötelező első sor Castle Siege, Froggy Rush, Teknős Verseny — mindenütt az első sor
<html lang="hu"> Az egész dokumentum gyökere, a lang attribútum a képernyőolvasóknak és keresőknek szól Minden játékunkban lang="hu" van, mert magyarul írtuk
<head> Meta-adatok, cím, stílusok — a felhasználó NEM látja közvetlenül A Castle Siege <head>-jében van az összes CSS stílus (300+ sor)
<body> A látható tartalom — ami a böngészőben megjelenik A Froggy Rush body-jában van a canvas, a D-pad gombok, a modal ablak

4Megjegyzések a kódban

A megjegyzések (kommentek) csak a kód olvasójának szólnak — a böngésző figyelmen kívül hagyja őket. Nagyon fontosak, hogy később is értsd a saját kódodat.

megjegyzések HTML-benHTML 
<!-- Ez egy egysoros HTML megjegyzés -->

<!--
  Ez egy
  többsoros megjegyzés
-->

<canvas id="c"></canvas>  <!-- a játék vászna, JavaScript kezeli -->
✏️ 1. Lecke feladata

Hozd létre az első saját HTML fájlodat! Nyiss meg egy szövegszerkesztőt, hozz létre egy sajat.html nevű fájlt, és írd bele az alap szerkezetet.

  • Szerepeljen benne a helyes DOCTYPE, html, head, body szerkezet
  • A title legyen "Az én első oldalám"
  • A body-ban írj egy h1 tagbe a nevedet
  • Adj hozzá egy megjegyzést ami elmagyarázza mit csinál a h1
  • Mentés után dupla kattintással nyisd meg böngészőben — megjelenik a neved?

🧠 Gyors ellenőrzés — melyik állítás igaz?

A <head> tartalma jelenik meg a böngészőben
A DOCTYPE opcionális, elhagyható
A <body> tartalmazza a látható elemeket
A megjegyzések befolyásolják az oldal megjelenését
1. Fázis · 3. Lecke

Szöveg, címsorok, listák

Megtanuljuk hogyan jelenítünk meg szöveget — és hogyan néz ez ki a játékaink kezelőfelületén.

⏱ 45 perc
📁 HTML
🎮 Froggy Rush panel

1Címsorok — h1-től h6-ig

A HTML 6 szintű címsort ismer. Az <h1> a legfontosabb (legnagyobb), a <h6> a legkisebb. Egy oldalon csak egy <h1> legyen!

cimszorok.htmlHTML 
<h1>🐸 Froggy Rush!</h1>          <!-- legnagyobb -->
<h2>Jelenlegi szint</h2>
<h3>Statisztikák</h3>
<h4>Kontrollok</h4>             <!-- ritkán használt -->
<h5>Lábjegyzet</h5>              <!-- még ritkábban -->
<h6>Jogi szöveg</h6>             <!-- legkisebb -->
Játékpélda

A Froggy Rush oldalán: <h1>🐸 FROGGY RUSH!</h1> — pontosan ezt látod a játék felett. A böngésző automatikusan nagy és félkövér betűvel jeleníti meg.

Bekezdések és szöveges formázás

szoveg.htmlHTML 
<p>Ez egy bekezdés. Több mondatot is tartalmazhat.</p>

<p>Ez <strong>félkövér</strong> szöveg — fontos kiemeléshez.</p>
<p>Ez <em>dőlt</em> szöveg — hangsúlyozáshoz.</p>

<br>   <!-- sortörés (önzáró tag, nincs </br>) -->

<hr>   <!-- vízszintes elválasztó vonal -->

<code>Math.floor(Math.random() * 10)</code> <!-- kódrészlet -->

Listák

listak.htmlHTML 
<!-- Felsorolás (unordered list) — pontokkal -->
<ul>
  <li>Froggy Rush</li>
  <li>Teknős Verseny</li>
  <li>Castle Siege</li>
</ul>

<!-- Sorszámozott lista (ordered list) — számokkal -->
<ol>
  <li>Nyisd meg böngészőben</li>
  <li>Irányíts nyilakkal</li>
  <li>Gyűjtsd a tojásokat</li>
</ol>
Mikor melyiket?

<ul> — ha a sorrend nem számít (pl. játékszabályok felsorolása)
<ol> — ha a sorrend fontos (pl. lépések sorrendben)

✏️ 2. Lecke feladata

Bővítsd az előző fájlodat szöveges tartalommal!

  • Adj hozzá egy h2-es alcímet "Kedvenc játékaim" szöveggel
  • Alatta egy ul listát a három játékkal
  • Egy bekezdésben írj röviden miért szereted a játékokat — kiemelj egy szót strong-gal
  • Adj hozzá egy ol listát: hogyan kell elindítani a Froggy Rush-t (3 lépés)

🧠 Melyik lista-elem helyes szintaxissal?

<list><item>Elem</item></list>
<ul><li>Elem</li></ul>
<ul><list>Elem</list></ul>
<ol><item>Elem</ul>
1. Fázis · 4. Lecke

Linkek és képek

A web lényege a hivatkozás. Megtanuljuk hogyan kötjük össze az oldalakat — és hogyan mutatunk képeket. A játékportálunk linkjei mind ezzel készülnek.

⏱ 45 perc
📁 HTML
🎮 Játékportál linkek

1Linkek — <a> tag

linkek.htmlHTML 
<!-- Külső link — másik weboldalra -->
<a href="https://netlify.com">Netlify oldal</a>

<!-- Belső link — saját fájlra -->
<a href="castle_siege.html">Castle Siege játék</a>

<!-- Új lapon nyílik meg -->
<a href="froggy_rush.html" target="_blank">Froggy Rush</a>

<!-- Ugyanazon az oldalon belül (horgony) -->
<a href="#l2">Ugrás a 2. leckéhez</a>
<!-- ... majd az oldalon valahol: -->
<h2 id="l2">2. Lecke</h2>

Képek — <img> tag

kepek.htmlHTML 
<!-- Alapkép -->
<img src="beka.png" alt="Egy zöld béka">

<!-- Mérettel -->
<img src="teknos.png" alt="Teknős karakter"
     width="200" height="150">

<!-- Kép mint link -->
<a href="turtle_race.html">
  <img src="preview.png" alt="Teknős Verseny">
</a>
Az alt attribútum kötelező!

Az alt szöveg jelenik meg ha a kép nem tölt be — és a vak felhasználók képernyőolvasói ezt olvassák fel. Mindig adj értelmes alt szöveget.

✏️ 3. Lecke feladata — Játékportál oldal

Készítsd el a saját játékportálod alapját! Egy HTML fájlban:

  • h1 cím: "Játékaim"
  • Három link a három játékra (castle_siege.html, froggy_rush.html, turtle_race.html)
  • Minden link target="_blank" legyen (új lapon nyíljon)
  • Hozz létre egy "kapcsolat" horgonyt az oldal alján, és linkelj rá az oldal tetejéről

🧠 Melyik attribútum nyitja meg a linket új böngésző lapon?

href="_new"
target="_blank"
open="new"
link="tab"
1. Fázis · 5. Lecke

div, span, id és class

A HTML "dobozai" — ezekkel szervezzük csoportokba az elemeket. A Castle Siege és Froggy Rush paneljeinek minden sora ezen alapszik.

⏱ 60 perc
📁 HTML + CSS
🎮 Castle Siege HUD

1A div — blokk szintű konténer

A <div> (division) egy láthatatlan doboz, ami összekapcsol elemeket. Önmagában semmit nem csinál — de CSS-sel és JavaScripttel együtt a webfejlesztés egyik legfontosabb eszköze.

castle_siege.html — a HUD panel divjaiHTML 
<!-- Egy panel a sebességváltó gomboknak -->
<div id="hud">
  <span>Sebesség:</span>

  <!-- Minden gomb egy button elem a divin belül -->
  <button class="sb on" id="s0">🐌 Gyerek</button>
  <button class="sb"    id="s1">🐢 Lassú</button>
  <button class="sb"    id="s2">⚔️ Normal</button>
</div>

id vs class — miben különböznek?

Tulajdonságidclass
EgyediségOldalanként egyszer szerepelhetTöbb elemnél is használható
Szintaxis CSS-ben#hud { ... }.sb { ... }
Szintaxis JS-bengetElementById('hud')getElementsByClassName('sb')
Mikor használdEgyedi elem azonosításához (pl. canvas, modal)Újrafelhasználható stílushoz (pl. gombok)
A Castle Siege-ben például

Az id="hud" egyedi — az egész oldalon csak egy HUD van.
A class="sb" (speed button) viszont 4 gombon is rajta van — mind ugyanolyan stílusú.

A span — sor szintű konténer

span_pelda.htmlHTML 
<!-- div: új sort kezd (blokk elem) -->
<div>Ez egy blokk — teljes sort foglal el.</div>
<div>Ez a következő blokkra kerül.</div>

<!-- span: nem kezd új sort (inline elem) -->
<p>A pontszám: <span id="ui-score">0</span> pont.</p>
<!-- A span csak a "0"-t veszi körül, a bekezdés folyamatos marad -->

<!-- A Froggy Rush-ban is így mutatjuk a pontot: -->
<div class="pbox">
  <div class="plabel">Pont</div>
  <div class="pval" id="ui-score">0</div>
</div>
✏️ 4. Lecke feladata

Készítsd el a játékportálod panel-struktúráját div-ekkel!

  • Hozz létre egy id="fejlec" divt a cím és navigáció számára
  • Hozz létre egy id="jatekok" divt, benne 3 darab class="jatek-kártya" divvel
  • Minden kártyában legyen: h3 (játék neve), p (rövid leírás), a (link a játékra)
  • Hozz létre egy id="lablec" divt az oldal alján

🧠 Mi a különbség az id és a class között?

Nincs különbség, felcserélhetők
Az id stílushoz való, a class azonosításhoz
Az id oldalanként egyszer szerepelhet, a class több elemnél is használható
A class csak CSS-ben, az id csak JavaScript-ben használható
1. Fázis · 6. Lecke

Gombok és input elemek

A Castle Siege mentési rendszerének, a sebességváltóknak és a modal ablaknak is van HTML inputja. Most megértjük ezeket.

⏱ 45 perc
📁 HTML
🎮 Castle Siege — mentés modal

1Gombok és szövegmezők

castle_siege.html — a mentési modal HTML-jeHTML 
<!-- A mentési modal ablak -->
<div id="modal-bg">
  <div id="modal">

    <!-- Szövegbeviteli mező -->
    <input id="save-name"
           maxlength="12"
           placeholder="Írd be a neved...">

    <!-- Gombok -->
    <button class="mb" onclick="doSave()">💾 Mentés</button>
    <button class="mb" onclick="closeModal()">✕ Mégse</button>

  </div>
</div>
<button>

Kattintható gomb. Az onclick attribútumban JavaScript futtatható.

<input type="text">

Egysoros szövegbevitel. A mentési rendszer így kéri a nevet.

<input type="number">

Csak számot fogad el. Hasznos pálya- vagy pontszám bevitelhez.

<input type="checkbox">

Jelölőnégyzet. Beállításokhoz, opciókhoz.

placeholder=

Halvány segédszöveg az üres mezőben — eltűnik gépeléskor.

maxlength=

Maximális karakterszám a beviteli mezőben (Castle Siege: 12).

✏️ 5. Lecke feladata

Adj hozzá egy "Játékosregisztráció" szekciót a portálodhoz!

  • Név mező (input, maxlength=15, placeholder="A neved")
  • Kedvenc játék legördülő (select + 3 option)
  • "Regisztrálás" gomb (button, onclick=alert('Szia!'))
  • A gombok kapjanak class attribútumot a stílusozáshoz

🧠 Melyik input típus fogad el csak számokat?

<input type="text">
<input type="number">
<input type="integer">
<input numeric>
1. Fázis · 7. Lecke

CSS — Szín, betűtípus, méret

A CSS adja meg a játékaink vizuális megjelenését. Az első CSS leckében megtanuljuk a színeket, betűtípusokat és méreteket — a Castle Siege sötét témáján keresztül.

⏱ 60 perc
📁 CSS
🎮 Castle Siege stílusa

7Lecke — Szín, betűtípus, méret

castle_siege.html — CSS változók és alapstílusokCSS 
/* CSS változók — az egész játék színpalettája egy helyen */
:root {
  --bg: #0d0a05;           /* sötét háttér */
  --player: #00d4ff;      /* kék — játékos szín */
  --ai: #ff3d6e;           /* piros — AI szín */
  --gold: #FFD700;          /* arany — pontszám szín */
}

/* Az egész oldal alap stílusa */
body {
  background: var(--bg);    /* változó használata */
  color: #c4a870;           /* szöveg színe */
  font-family: Georgia, serif; /* betűtípus */
  font-size: 15px;           /* betűméret */
}

/* Gombok stílusa */
.sb {
  background: #1a1208;
  border: 1px solid #5a3a10; /* vastagság | stílus | szín */
  color: #c4a870;
  border-radius: 4px;          /* lekerekített sarok */
  cursor: pointer;            /* kéz kurzor hover-re */
}
.sb.on {                       /* aktív gomb stílusa */
  background: #3a2010;
  border-color: #FFD700;
  color: #FFD700;
}
CSS változók (:root)

A :root-ban deklarált változókkal (--nev: ertek) az egész fájl bármely részén használhatjuk ugyanazt a színt. Ha változtatni akarod, elég egy helyen módosítani — ez a professzionális megközelítés.

✏️ 7. Lecke feladata

Stílusozd meg a játékportál oldaladat CSS-sel:

  • Adj sötét hátteret a body-nak (background: #1a1a2a)
  • Változtasd meg a szöveg színét világosra (color: #c4d0e0)
  • Állíts be Google Fonts betűtípust (Fredoka One vagy Nunito)
  • A :root-ban definiálj 3 CSS változót: --bg, --text, --highlight
  • Használd ezeket a változókat a stílusokban

🧠 Hogyan kell CSS változót HASZNÁLNI (nem definiálni)?

color: --primary;
color: $primary;
color: var(--primary);
color: #{--primary};
1. Fázis · 8. Lecke

CSS — Box model (dobozmodell)

Miért nem ott van valami, ahol vártad? A box model magyarázza meg. Minden HTML elem egy doboz — a mérete a tartalom, padding, border és margin összege.

⏱ 60 perc
📁 CSS
🎮 Játék panel méretek

8Lecke — Box model (dobozmodell)

box_model.cssCSS 
.jatek-kartya {
  width: 300px;           /* tartalom szélessége */
  padding: 20px;          /* belső margó (tartalom körül) */
  margin: 10px;           /* külső margó (elem körül) */
  border: 2px solid #444; /* keret */

  /*
    Valós szélesség = width + padding*2 + border*2
    = 300 + 40 + 4 = 344px
    (hacsak box-sizing: border-box nincs beállítva)
  */
}

/* Modern megközelítés — a padding és border beleszámít a width-be */
* {
  box-sizing: border-box; /* minden játékunkban ott van! */
}
✏️ 8. Lecke feladata

Box model kísérletezés — nyisd meg a böngésző DevTools-t (F12 → Elements):

  • Adj a játékkártyáknak padding: 20px értéket — mit tapasztalsz?
  • Adj border: 3px solid #4d9fff keretet egy kártyának
  • Add a * { box-sizing: border-box } szabályt — változott valami?
  • F12-vel nézd meg a "Box Model" diagramot az Elements panelen — látod a margin/padding/border rétegeket?

🧠 Mit csinál a box-sizing: border-box?

Kiveszi a border-t a számításból
A padding és border beleszámít a megadott width-be, nem adódik hozzá
Csak a border méretét állítja be
Kizárólag dobozokra alkalmazható
1. Fázis · 9. Lecke

CSS — Flexbox elrendezés

A Flexbox a modern webfejlesztés elrendezési rendszere. A játékaink HUD paneljeinek, gombjainak sorba rendezése mind ezzel készül.

⏱ 60 perc
📁 CSS
🎮 Froggy Rush panel

9Lecke — Flexbox

froggy_rush.html — a panel CSS-eCSS 
/* A sebességgombok sorba rendezése */
#hud {
  display: flex;          /* flexbox bekapcsolása */
  align-items: center;  /* függőlegesen középre */
  gap: 10px;             /* elemek közötti rés */
  flex-wrap: wrap;       /* kis képernyőn tördelés */
}

/* A Froggy Rush oldal elrendezése */
#layout {
  display: flex;
  gap: 16px;
  justify-content: center; /* vízszintesen középre */
}

/* Az oldalpanel szélességének rögzítése */
#panel {
  width: 160px;
  flex-shrink: 0; /* ne zsugorodjon össze */
}
✏️ 9. Lecke feladata

Rendezd Flexboxszal a játékportál kártyáit:

  • A #jatekok div-nek adj display: flex stílust
  • Adj gap: 20px rést a kártyák közé
  • Középre igazítás: justify-content: center
  • Próbáld ki a flex-direction: column értéket — mi változik?
  • Állítsd vissza row-ra és adj flex-wrap: wrap értéket

🧠 Melyik CSS tulajdonság rendezi a flex elemeket középre vízszintesen?

align-items: center
justify-content: center
text-align: center
flex-align: center
1. Fázis · 10. Lecke

CSS — Reszponzív design

Hogyan néz ki a játék mobilon? A @media szabályok segítségével a játékaink telefonon és tableten is tökéletesen működnek.

⏱ 60 perc
📁 CSS
🎮 Mobilos D-pad megjelenítés

10Lecke — Reszponzív design

reszponziv.css — mobilos átméretezésCSS 
/* Asztali nézet: két oszlop egymás mellett */
#layout {
  display: flex;
  flex-direction: row;   /* vízszintes */
}

/* Ha a képernyő kisebb mint 768px (tablet/telefon): */
@media (max-width: 768px) {
  #layout {
    flex-direction: column; /* egymás alá kerül */
  }
  #panel {
    width: 100%;           /* teljes szélességű */
  }
}

/* Ha az eszköz érintős (telefon/tablet) — D-pad megjelenik */
@media (pointer: coarse) {
  #dpad {
    display: flex;  /* csak érintős eszközön látható */
  }
}
✏️ 10. Lecke feladata

Tedd mobilbaráttá a játékportált @media szabályokkal:

  • Adj @media (max-width: 768px) blokkot a CSS-be
  • Mobilon a kártyák kerüljenek egymás alá: flex-direction: column
  • Mobilon a kártyák legyenek teljes szélességűek: width: 100%
  • Tesztelj Chrome DevTools-szal: F12 → telefon ikon — látod a mobilos nézetet?

🧠 Melyik @media feltétel aktiválódik ha a képernyő kisebb mint 768px?

@media (screen: mobile)
@media (width < 768px)
@media (max-width: 768px)
@media (min-width: 768px)
1. Fázis · 11. Lecke

🏆 Projektzáró — Játékportál oldal

Az 1. Fázis lezáró projektje. Most már tudod az összes HTML és CSS alapot — ideje összerakni egy valódi, stílusos játékportál oldalt.

⏱ 2–3 óra
🎯 Önálló fejlesztés
📁 HTML + CSS

11Lecke — 🏆 Projektzáró: Játékportál oldal

Az 1. Fázis lezáró projektje

Most már tudod az összes szükséges HTML és CSS alapot. Ideje összerakni egy valódi, stílusos játékportál oldalt, ahol a három játékod linkként szerepel — pontosan úgy, mint egy igazi weboldal.

Követelmények

jatekok.html — az elkészítendő portál szerkezeteHTML 
<!DOCTYPE html>
<html lang="hu">
<head>
  <!-- charset, viewport, title -->
  <!-- CSS: sötét téma, flex elrendezés, kártyák stílusa -->
  <!-- @media mobilos átméretezés -->
</head>
<body>
  <div id="fejlec">
    <h1>🎮 Játékaim</h1>
    <p>Három böngészős játék, amit magam készítettem</p>
  </div>

  <div id="jatekok">
    <!-- 3 darab kártya, mindegyikben: -->
    <div class="kartya">
      <h2>🏰 Castle Siege</h2>
      <p>Tower defense játék 50 pályával</p>
      <a href="castle_siege.html" target="_blank">
        <button class="jatszas-gomb">▶ Játék indítása</button>
      </a>
    </div>
    <!-- ... további 2 kártya ... -->
  </div>

  <div id="lablec">
    <p>Készítette: <strong>[A te neved]</strong></p>
  </div>
</body>
</html>
✏️ 10. Lecke — Projekt Checklist
  • Helyes HTML5 dokumentumszerkezet (DOCTYPE, html, head, body)
  • Ékezetes szövegek helyesen jelennek meg (charset UTF-8)
  • Mobilon is olvasható (@media és viewport)
  • Sötét háttér, olvasható szöveg (CSS color + background)
  • 3 játékkártya flex elrendezésben egymás mellett (asztali)
  • Mobilon egymás alá kerülnek a kártyák (@media)
  • Minden kártyán van link a játékra (target="_blank")
  • A gombok hover-re megváltoznak (:hover CSS)
  • A fejléc és lábléc egyértelműen elkülönül
  • A kód rendezett és kommentelt
← Vissza
Kurzus főoldal