12 évfolyam gyakorló feladatsor

 Webfejlesztési Feladatleírás

1. HTML szerkezet

Hozz létre egy teljes weboldalt az alábbi szerkezettel:

• A dokumentum címe legyen "Összetett Webes Feladat".
• Használj szemantikus elemeket.
• A fejlécben () legyen egy főcím () és egy navigációs menü (), amely három menüpontot tartalmaz:
• Kezdőlap
• Galéria
• Kapcsolat
• A szekció három alrészt tartalmazzon:

1. Bevezető szöveg egy címmel () és egy bekezdéssel ().
2. Képgaléria, amely három képet jelenít meg (), és egy szülő konténerben () legyenek elhelyezve. (lorempicsum hajós képek)
3. Táblázat, amely három oszlopból és három sorból áll, és egy terméklistát jelenít meg ().
4. Interaktív gomb, amely lehetővé teszi a háttérszín változtatását egy gombnyomással.
• A láblécben () legyen egy szerzői jogi nyilatkozat.

2. CSS stílusok

Formázd meg az oldalad CSS segítségével az alábbi módon:

• A fejléc háttérszíne legyen sötétszürke (#333), a szöveg színe pedig fehér.
• A navigációs menü egy vízszintes sáv legyen, amelyben a menüpontok középre igazítottak és egymás mellett jelennek meg.
• A képek 200 pixel szélesek legyenek, lekerekített sarkokkal és árnyékkal.
• A képek hover állapotban nagyobb méretűre nőjenek (scale(1.1)).
• A táblázat fejlécének háttérszíne sötétszürke legyen, a szöveg pedig fehér.
• A táblázat páros sorai világosszürkék legyenek (nth-child(even)).
• A táblázat celláira hover hatás legyen beállítva, amely színváltozást eredményez.
• A gomb alapértelmezett háttérszíne kék (#008CBA) legyen, hover állapotban pedig sötétebb árnyalatú.

3. JavaScript Interaktivitás

Készíts egy JavaScript fájlt (script.js), amely az alábbi funkciókat tartalmazza:

• Egy gombnyomásra változtassa meg az oldal háttérszínét egy véletlenszerű színre.
• Használj addEventListener() függvényt az eseménykezeléshez.

4. Pszeudóosztályok és Pszeudóelemek

Használj legalább három pszeudóosztályt vagy pszeudóelemet a következők közül:

• :hover a képek és gombok esetében.
• :nth-child() a táblázatsorok kiemelésére.
• ::before és ::after a címsorok díszítésére.

5. Értékelési Kritériumok

A feladat akkor számít teljesítettnek, ha: ✅ Az oldal szerkezete megfelel az előírásoknak. ✅ A navigációs menü megfelelően működik és esztétikus. ✅ A képgaléria megfelelően jelenik meg, és hover effektus működik. ✅ A táblázat sávos színezése és hover állapota helyesen működik. ✅ A háttérszín-változtató gomb funkcionális és használható. ✅ A CSS-ben szerepelnek pszeudóosztályok és pszeudóelemek. ✅ Az oldal összképe esztétikus és jól formázott.

A feladat elvégzése után teszteld a működését egy böngészőben, és ellenőrizd a kód helyességét a fejlesztői konzol segítségével!

Jó munkát! 🚀