Előadás:
	Bemutatás során fontos, hogy mindenki tudjon mindent és betanult legyen az elődadás.
	Egymás között daraboljátok szét az elődást.
	Ha valaki nem tud megjelenni az ő részét is tudjátok előadni.

Célkitűzések és Közönségmegértés:
	Határozd meg a prezentáció célját: Mit szeretnél elérni a prezentációddal? Érdekelni, meggyőzni vagy informálni?
	Ismerd meg a közönséged: Milyen szinten vannak a webfejlesztés terén? Mennyire járatosak a statikus weboldalak készítésében?

Struktúra és Tartalom:
	Kezdd egy erős bevezetéssel: Mutass be egy rövid, érdekes történetet vagy statisztikát, hogy felkelted a figyelmet.
	Ismertesd a problémát: Milyen kihívásokat old meg a statikus weboldalad?
	Mutass be egyértelmű struktúrát: Használj logikus felépítést, például a probléma, a megoldás és a főbb funkciók bemutatása.

Vizuális Támogatás:
	Használj ábrákat és diagramokat: A statikus weboldal funkcióit könnyebb megérteni, ha szemléletesen mutatod be őket.
	Minimalista design: Ne túlzsúfold a prezentációt felesleges információkkal. A tiszta, egyszerű design könnyebb követni.
	Ne legyenek több mondatos bekezdések.

Interaktivitás:
	Demók és élő példák: Ha lehetséges, mutass be élő példákat a statikus weboldalról.
	Kérdések és válaszok: Engedd meg a közönségnek, hogy feltegyen kérdéseket, ez növeli a részvételt és az érdeklődést.

Narráció és Beszéd:
	Gyakorold a beszéded: Ne csak az anyagot, de a hangodat és a stílusodat is gyakorold.
	Beszélj lassan és érthetően: Figyelj arra, hogy a közönség mindenki számára követhető legyen.

Tesztelés és Visszajelzés:
	Teszteld előre: Győződj meg róla, hogy a prezentáció jól működik a használt technológia szempontjából.
	Kérj visszajelzést: Kérdezd meg másokat, hogy segítsenek értékelni a prezentációt, és fogadd meg az építő kritikát.

Időbeosztás:
    Tartsd be az időkorlátokat: Gyakorold a prezentációdat, hogy pont időben tudd befejezni.
	technikai előkészülettekel együtt 9 perc.

Záró Megállapodás és Hívás a Cselekvésre:
	Zárd le erősen: Hozz létre egy összefoglalást, amely összefoglalja a főbb pontokat.
	Hívj fel valamilyen cselekvésre: Legyen világos, hogy mit vársz a közönségtől a prezentáció után.
	
	
1. Éjszakai Mód:

	javascript

	// Egyszerű éjszakai mód váltás
	const nightModeToggle = document.getElementById('nightModeToggle');
	const body = document.body;

	nightModeToggle.addEventListener('change', () => {
	  if (nightModeToggle.checked) {
		body.classList.add('night-mode');
	  } else {
		body.classList.remove('night-mode');
	  }
	});

	HTML:

	<input type="checkbox" id="nightModeToggle"> Éjszakai Mód

2. Scroll Animáció:

	javascript

	// Gördülési animáció a lap tetejére
	const scrollToTopButton = document.getElementById('scrollToTop');

	scrollToTopButton.addEventListener('click', () => {
	  window.scrollTo({
		top: 0,
		behavior: 'smooth'
	  });
	});
	
	HTML:

	<button id="scrollToTop">Lap tetejére</button>

3. Szöveg Méret Változtatás:

javascript

// Szöveg méret változtatása
const increaseFontSizeButton = document.getElementById('increaseFontSize');
const decreaseFontSizeButton = document.getElementById('decreaseFontSize');
const textElement = document.getElementById('adjustableText');

let currentFontSize = 16;

increaseFontSizeButton.addEventListener('click', () => {
  currentFontSize += 2;
  textElement.style.fontSize = `${currentFontSize}px`;
});

decreaseFontSizeButton.addEventListener('click', () => {
  currentFontSize -= 2;
  textElement.style.fontSize = `${currentFontSize}px`;
});

HTML:

<button id="increaseFontSize">Nagyítás</button>
<button id="decreaseFontSize">Kicsinyítés</button>
<p id="adjustableText">Ez egy állítható méretű szöveg.</p>

4. Tooltip (Eszközleíró felugró szöveg):

javascript

// Tooltip megjelenítése
const tooltipTrigger = document.getElementById('tooltipTrigger');
const tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
tooltip.textContent = 'Ez egy tooltip szöveg';

tooltipTrigger.addEventListener('mouseenter', () => {
  document.body.appendChild(tooltip);
});

tooltipTrigger.addEventListener('mouseleave', () => {
  document.body.removeChild(tooltip);
});

CSS:

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

HTML:

<span id="tooltipTrigger">Hover me</span>

5. Keresési Funkció Kiemelése:

javascript

// Kiemelés a keresési találatokban
const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value.toLowerCase();
  const paragraphs = searchResults.getElementsByTagName('p');

  Array.from(paragraphs).forEach((paragraph) => {
    const text = paragraph.textContent.toLowerCase();

    if (text.includes(searchTerm)) {
      paragraph.classList.add('highlight');
    } else {
      paragraph.classList.remove('highlight');
    }
  });
});

CSS:

.highlight {
  background-color: yellow;
}

HTML:

<input type="text" id="searchInput" placeholder="Keresés">
<div id="searchResults">
  <p>Az első bekezdés szövege.</p>
  <p>Második bekezdés szövege.</p>
  <!-- További bekezdések... -->
</div>

Népszerű Bootstrap CSS stílusosztályok.

https://getbootstrap.com/

1. Alap Stílusok:

    .container: Körülveszi a tartalmat és középre igazítja azt.
    .row: Egy sorréteg a tartalom elrendezéséhez.
    .col: Az oszlopokat jelöli meg a sorokon belül.
    .img-fluid: A képek szélességét 100%-ra állítja be a tartalommal arányosan.

2. Betűtípus és Szöveg:

    .text-center: Szöveg középre igazítása.
    .text-right: Szöveg jobbra igazítása.
    .text-muted: Halvány színű, nem hangsúlyos szöveg.
    .text-primary, .text-success, stb.: Színes szöveg a Bootstrap színkódokkal.

3. Háttérszínek:

    .bg-primary, .bg-success, stb.: Háttérszínek a Bootstrap színkódokkal.

4. Gombok:

    .btn: Általános gombstílus.
    .btn-primary, .btn-success, stb.: Színes gombok a Bootstrap színkódokkal.

5. Formázás és Űrlapelemek:

    .form-control: Beviteli mezők, legördülő menük stb. stílusát állítja be.
    .form-group: Az űrlap elemeit csoportosítja.
    .input-group: Beviteli mezőket és hozzájuk tartozó elemeket (pl., gombok) egy csoportba rendezi.

6. Navigáció:

    .navbar: Alap navigációs sáv.
    .navbar-expand: A navigációs sáv kitölti a rendelkezésre álló helyet.
    .nav: Alap stílusú navigációs linkek.

7. Ikonok:

    .glyphicon: Bootstrap ikonokat jelöl.
    .fa, .fab, .far, stb.: Font Awesome ikonokat jelöl.

8. Responszív Elrendezés:

    .d-none, .d-md-block: Egy elemet rejt el bizonyos képernyőméretek alatt, vagy megjeleníti azokon.

9. Táblázatok:

    .table: Általános táblázatstílus.
    .table-striped: Csíkozott sorok a táblázatban.

10. Kártyák:

    .card: Kártya stílusa.
    .card-header, .card-body, .card-footer: A kártya különböző részeinek stílusai.