12B felkészülő feladatok a Junior Skill versenyre

 Feladat: Reszponzív Weboldal Készítése a Megadott HTML Alapján

Készítsd el a "Webfejlesztő Konferencia 2025" weboldalt az alábbi instrukciók alapján. A cél, hogy gyakoroljátok a reszponzív design, táblázatok és médiaelemek kezelését, valamint JavaScript használatát a DOM manipulációra.

HTML

1. Készíts egy conference.html fájlt, és másold bele a megadott HTML-kódot.
2. A meglévő HTML szerkezet tartalmazza:
• Header: Oldalcím (h1) és navigációs menü (nav, ul, li, a elemek).
• Main:
• About szakasz (section#about):
• Egy leíró szöveg (p), valamint egy konferencia képe (img) az alábbi URL-ről: https://picsum.photos/id/1081/600/400.
• Schedule szakasz (section#schedule):
• Egy program táblázat (table), amely tartalmazza:
• Az előadások idejét, előadókat és témákat.
• Egy ebédszünet sort (colspan attribútum).
• Egy kérdések és válaszok blokkot, amely két sort foglal össze (rowspan és colspan attribútumok).
• Konferencia Videó (article):
• Egy videó elem (video) az alábbi URL-lel: https://www.w3schools.com/html/mov_bbb.mp4. A videónak legyenek vezérlőelemei.
• Információk szakasz (aside):
• Tartalmazza a konferencia helyszínét és dátumát.
• Footer:
• Készítő neve (p).
• Egy üres bekezdés (p#session-count), amely JavaScript segítségével fogja megjeleníteni az előadások számát.
3. Ellenőrizd, hogy a HTML szerkezete megfelelően szemantikus.

---

CSS

4. Készíts egy conference.css fájlt, és csatold a HTML dokumentumhoz.
5. Állítsd be az alap stílusokat:
• Testreszabott betűtípusok: font-family: Arial, sans-serif;.
• Háttér és szöveg színek:
• Header: Sötétzöld háttér (#4CAF50), fehér szöveg.
• Footer: Sötétszürke háttér (#333), fehér szöveg.
• Aside: Világosszürke háttér (#e0e0e0).
• Kép és videó reszponzív méretezése: Szélességük legyen 100%.
6. Táblázat formázása:
• Fejlécek (thead): Sötét szürke háttér (#333), fehér szöveg.
• Sorok váltakozó színezése:
• Páros sorok: Világos szürke (#f9f9f9).
• Páratlan sorok: Még világosabb szürke (#e9e9e9).
• Szegélyek (border): 2px vastag, világos szürke.
7. Navigációs menü:
• A menüpontok (li) legyenek vízszintesen elhelyezve.
• A menüpontok között legyen 1rem távolság.
8. Reszponzív design:
• 768px-nél kisebb képernyőn:
• A main grid tartalma egymás alá kerüljön (grid-template-columns: 1fr).
• Az aside a main tartalom aljára kerüljön.

---

JavaScript

9. Készíts egy conference.js fájlt, és csatold a HTML dokumentumhoz.
10. Írj egy kódot, amely a dokumentum betöltődése után az alábbiakat teszi:
• Írd ki a konzolra: "Az oldal betöltődött!".
• Számold meg, hogy hány előadás van a táblázatban (az ebédszünet és a kérdések és válaszok sorokat is beleszámítva).
• Írd be az előadások számát a láblécben található #session-count elembe.