Automatikus lejátszás
Automatikus kiegészítés
Előző előadás
Készre jelölés és folytatás
Weboldalépítő Modul
Weboldalszerkesztés HTML nyelven
HTML Útmutató (4:35)
HTML projekt létrehozása (3:44)
HTML Dokumentumok Létrehozása Codesandboxban (7:46)
HTML dokumentum szerkezete és validáció (6:45)
A Heading elem - Címek (4:03)
Bekezdések (5:50)
A strong és az em elem (3:27)
Rendezett és rendezetlen listák (4:58)
Képek (7:24)
Táblázatok (15:02)
Táblázatok feladat
ID attribútum (4:27)
Hivatkozások (5:38)
Szemantikus HTML (14:24)
HTML osztályok (3:52)
HTML alapok jegyzet
HTML Űrlapok (33:06)
Űrlapok jegyzet
A formspree használata (5:46)
Multimédiás tartalmak - Feladatok
HTML Alapjai gyakorló feladatsor
Workshop - Weboldalépítés HTML nyelven (140:30)
Kiegészítő témák
Osztályok használata a gyakorlatban (12:32)
Gyakori kérdések
HTML összefoglaló (158:18)
HTML kvíz
CSS Alapjai
Bevezetés a CSS nyelvbe (13:51)
Nehézségek a CSS nyelvvel kapcsolatban (4:05)
CSS gyakorló feladatok (10:56)
CSS szabályok felépítése (8:40)
CSS szelektorok (5:33)
Szelektorok működése, kulcs szelektor (2:44)
CSS szelektorok - 1. gyakorlat (4:27)
CSS szelektorok - 2. gyakorlat (5:09)
CSS alapjai, szelektorok - Diák
CSS szelektorok - 3. gyakorlat
Színek megadása CSS-ben (17:09)
Félkövér, dőlt, aláhúzott szöveg (4:49)
Google Chrome Developer Tools - Szelektorok prioritása (8:17)
Szöveg igazítása - text-align (4:08)
Display: block, inline, inline-block (9:13)
Betűtípusok (3:46)
Listák (3:59)
Szöveg, lista, display tulajdonság - Diák
Abszolút és relatív mértékegységek (8:34)
Mértékegységek példa (2:23)
CSS doboz modell - 1. rész (4:32)
CSS doboz modell - 2. rész (7:30)
Mértékegységek és doboz modell - diák
Háttér: background-color, background-image, background-size (8:04)
Parallax scroll, background-origin, background-clip (6:00)
Background-position (1:14)
Több háttér megadása (3:14)
Háttér - Diák
Összefoglaló jegyzet - CSS alapjai
Összefoglaló feladatok
Gyakori kérdések
CSS kvíz
Rugalmas webes elrendezés Flexbox segítségével
Hagyományos elrendezés (5:01)
Flexbox elrendezés (4:32)
Flexbox használata (5:37)
Flexbox konténerek tulajdonságai (28:37)
Flex elemek tulajdonságai (30:27)
Flexbox gyakorlás (14:16)
Flexbox jegyzet + feladatok
További Flexbox feladatok
A Grid rendszer
Klasszikus elrendezés (8:36)
Grid elrendezés (3:36)
Grid tároló tulajdonságai (30:59)
Grid elemek tulajdonságai (21:11)
További Grid tulajdonságok (14:57)
Grid repeat függvény (6:46)
Grid jegyzet és feladatok
Grid megoldások
Összefoglaló Flexbox és Grid feladatok
Téglalapok pozícionálása
Bevezető (19:02)
Pozícionálás alapjai (29:22)
Tartalom túlcsordulása - Overflow (4:33)
Lebegtetés - Float, Clear (14:27)
Téglalapok takarása - Z-Index (1:25)
Lebegtetés és pozícionálás összehasonlítása (15:48)
Pozícionálás feladatok (3:04)
Pozícionálás - Diák
Pozícionálás, float, z-index jegyzet
A jegyzet feladatainak megoldása
Összefoglaló feladatok
Responsive Web Design, Töréspontok
Jegyzet - Responsive Web Design, töréspontok
Responsive Web Design és töréspontok videó (16:57)
Haladó CSS - reset, normalizer, media query-k, karbantarthatóság
Reset és normalizer a gyakorlatban (14:46)
Gyakorlás - Desktop First (37:36)
Pszeudo elemek, pszeudo osztályok, animáció, árnyékolás
Pszeudo elemek, pszeudo osztályok
Animáció és árnyékolás jegyzet
Animáció és árnyékolás példa
Animációk - diák
CSS összefoglaló
01. CSS áttekintés (3:42)
02. CSS elhelyezése a HTML kódban (16:41)
03. Szövegek formázása (15:28)
04. Keretek és színek (10:59)
05. Hátterek (színek és képek) (11:09)
06. Térközök és Box-modell (14:33)
07. Box-modell és méretezés (11:29)
08. Szövegek igaztása és árnyékolás (11:36)
09. Betűtípusok módosítása (7:47)
10. Ikonkészletek használata (8:16)
11. Hivatkozások és pszeudo-osztályok (16:06)
12. Listák formázása (7:01)
13. Megjelenítési beállítások (8:24)
14. Pozícionálás (12:31)
15. Z-index használata (3:29)
16. Elemek úsztatása (5:42)
17. Képek úsztatása (2:10)
18. Menü létehozása (9:46)
19. CSS mértékegységek (7:41)
20. Szelektorok és kombinátorok (5:07)
21. Pszeudo-osztályok és -elemek (9:56)
22. CSS függvények (4:08)
23. Színátmenetek (3:21)
24. Doboz árnyékolás (2:15)
25. Kifutó szövegek beállítása (5:25)
26. CSS változók (2:43)
27. Reszponzivitás megvalósítása (11:27)
28. Transzformációk (5:06)
29. Átmenetek beállítása (7:02)
30. Animáció (8:55)
31. Flexbox (48:31)
32. Grid (43:03)
Git és GitHub
Git-GitHub videótanfolyam
Git Submodule szerkezet (9:33)
Git-GitHub feladatsor
Gitignore fájl létrehozása (13:37)
Git gyakorlás (20:56)
Weboldalak akadálymentesítése - Accessibility
Akadálymentesítés webinár (70:00)
Akadálymentesítés jegyzet
HTML és CSS a gyakorlatban
Portfólió oldal építése (105:06)
Hamburger menü létrehozása HTML és CSS segítségével (72:12)
Személyi edző oldal feladat
Fashion site oldalépítés feladat
5 napos weboldalépítő kihívás
Haladó weboldalépítő példák
Statikus weboldal projektfeladat
Példa projekt: könyvesbolt (1. rész) (12:42)
Példa projekt: könyvesbolt (2. rész) (43:26)
Példa projekt: könyvesbolt (3. rész) (70:02)
Példa projekt: jóga oldal (1. rész) (86:52)
Példa projekt: jóga oldal (2. rész) (110:19)
Példa projekt: jóga oldal (3. rész) (74:02)
Példa projekt: jóga oldal (4. rész) (87:17)
Karácsonyi kihívás projekt (HTML-CSS)
1. nap (25:22)
2. nap (24:13)
3. nap (21:35)
Videómegosztó oldal klónozása (HTML-CSS)
01 Projekt előkészítése (HTML) (13:36)
02 Tartalom és szerkezet (HTML) (34:56)
03 Menüsor és alapok (CSS) (57:46)
04 Fejléc és tartalom formázása (CSS) (34:16)
05 Reszponzivitás (CSS) (28:08)
06 Interaktivitás (CSS-JS) (34:45)
HTML és CSS interjúkérdések (Bónusz)
HTML Interjúkérdések
CSS interjúkérdések
Stíluslapszerkesztés Sass nyelven
Sass jegyzet
Sass feladatmegoldások
Bootstrap CSS keretrendszer
Bootstrap 5 (Videó) (73:19)
Webinár - Bootstrap komponensek beillesztése (23:41)
Bootstrap 5 jegyzet
Weboldalépítés WordPress-ben
WordPress oldal építése lépésről, lépésre
WordPress weboldalépítés - 1. rész (videó a fenti dokumentumhoz) (37:07)
WordPress weboldalépítés - 2. rész (videó a fenti dokumentumhoz) (44:53)
WordPress weboldalépítés - 3. rész (videó a fenti dokumentumhoz) (40:36)
WordPress weboldalépítés - 4. rész (videó a fenti dokumentumhoz) (27:07)
WordPress fejlesztés saját gépen
WordPress projekt
1. rész (14:46)
2. rész (16:12)
3. rész (26:13)
4. rész (28:51)
5. rész (44:18)
6. rész (33:53)
7. rész (29:56)
8. rész (29:55)
9. rész (25:22)
10. rész (21:16)
11. rész (21:25)
Komplett portfólióoldal építés (HTML-CSS)
Figma (60:31)
HTML (76:41)
1_portfolio - css - reset (37:49)
2_portfolio - css - header (55:04)
3_portfolio - css - fooldal (43:29)
4_portfolio - css - rolam (32:30)
5_portfolio - css - portfolio (19:43)
6_portfolio - css - kapcsolat (15:22)
7_portfolio - css - footer (3:28)
Komplett weboldalépítés (HTML-CSS)
1.Nap_1.1 (119:06)
2.Nap_1.0 (48:24)
3.Nap_1.1 (65:48)
4.Nap_1.0 (84:29)
5.Nap_1.0 (42:46)
Kiegészítő anyagok
Hasznos linkek
Coolors.co (7:04)
Recaptcha (5:51)
Képek hátterének eltávolítása (7:16)
Képoptimalizálás és a webp (10:42)
Domain ellenőrzés (7:52)
Viszlát Xampp (6:43)
CSS animáció (8:22)
Oldal nyomtatása (11:24)
Oldal frissítése (3:34)
PoUp ablak html-css-js segítségével (25:15)
PoUp ablak Elementor PRO-val (15:09)
Front-end eszközök
Mértékegységek példa
Az előadás tartalma zárolva
Ha már beiratkoztál,
be kell jelentkezned
.
Iratkozz fel a tanfolyamra a feloldáshoz