Videók automatikus lejátszása
Automatikus ugrás a következő leckére
Előző lecke
Következő lecke
Weboldalkészítés tanfolyam
1. hét
Helló Világ!
Kódszerkesztők
1.1. Kódszerkesztők: Miért használunk kódszerkesztőket?
1.2. Kódszerkesztők: Online kódszerkesztők I.
1.3. Kódszerkesztők: Online kódszerkesztők II.
1.4. Kódszerkesztők: Kódszerkesztők a gépeden
1.5. Kódszerkesztők: Javaslataink
HTML alapok
1.1. Bevezetés: Hogyan használd ezt a projektet
1.2. Bevezetés: Mi az a HTML?
1.3. Bevezetés: Egy HTML-dokumentum
1.4. Bevezetés: Egy HTML-tag
1.5. Bevezetés: HTML írása
2.1. Alapvető elemek: Címsorok
2.2. Alapvető elemek: Paragrafusok
2.3. Alapvető elemek: Linkek
2.4. Alapvető elemek: Képek
2.5. Alapvető elemek: Speciális jelentés
3.1. Táblázatok és listák: Táblázatok
3.2. Táblázatok és listák: Listák
4.1. Formázási útmutató: Google formázási útmutató
4.2. Formázási útmutató: Néhány ajánlás
4.3. Formázási útmutató: Kódvalidáció
CSS alapok
1.1. Bevezetés a CSS-be: Mi az a CSS?
2.1. A HTML- és a CSS-fájlok összefűzése: Az inline módszer
2.2. A HTML- és a CSS-fájlok összefűzése: Az internal style sheet
2.3. A HTML- és a CSS-fájlok összefűzése: Az external style sheet
2.4. A HTML- és a CSS-fájlok összefűzése: Relatív elérési út
2.5. A HTML- és a CSS-fájlok összefűzése: Abszolút elérési út
2.6. A HTML- és a CSS-fájlok összefűzése: Több külső CSS-stíluslap használata
3.1. A rendezett CSS: User agent stylesheet
3.2. A rendezett CSS: CSS reset
3.3. A rendezett CSS: CSS-kommentek
4.1. A CSS-szabályok alapjai: A CSS-szabályok formai követelményei
4.2. A CSS-szabályok alapjai: CSS-szabályok gyakorlása
5.1. A CSS-szelektorok: Alapok a CSS-szelektorokról
5.2. A CSS-szelektorok: Egyszerű szelektorok 1. - A típus szelektor
5.3. A CSS-szelektorok: Egyszerű szelektorok 2. - Az ID szelektor
5.4. A CSS-szelektorok: Egyszerű szelektorok 3. - A class szelektor
5.5. A CSS-szelektorok: Az egyszerű szelektorok gyakorlása
5.6. A CSS-szelektorok: Az egyszerű szelektorok gyakorlása – megoldás
5.7. A CSS-szelektorok: Komplex szelektorok 1. - A pseudo-class szelektor
5.8. A CSS-szelektorok: Komplex szelektorok 2. - Az attribútum szelektorok
5.9. A CSS-szelektorok: Komplex szelektorok 3. - A pseudo-element szelektorok
5.10. A CSS-szelektorok: Többszörös szelektorok
5.11. A CSS-szelektorok: Kombinátorok (combinators)
5.12. A CSS-szelektorok: A komplex szelektorok és szelektorkombinációk gyakorlása
5.13. A CSS-szelektorok: A komplex szelektorok és szelektorkombinációk gyakorlása – megoldás
6.1. A CSS-kaszkád: A CSS-szabályok érvényesülésének sorrendje
6.2. A CSS-kaszkád: A CSS-szabályok súlyozása - importance
6.3. A CSS-kaszkád: A CSS-szabályok súlyozása - selector specificity
6.4. A CSS-kaszkád: A CSS-szabályok súlyozása - source order
6.5. A CSS-kaszkád: A CSS-szabályok súlyozása - inheritance
7.1. Összefoglalás: Mit tanultál eddig?
8.1. Teszt: Ellenőrizd a tudásod!
2. hét
HTML-vázak
Medium-cikk
1.1. Bevezető a Medium-cikkhez: Mit fogunk megtanulni?
1.2. Bevezető a Medium-cikkhez: Egy gyors megjegyzés a fejlesztői környezetedről
2.1. Add hozzá a tartalmat: Cím és címsor
2.2. Add hozzá a tartalmat: Hozzáadunk egy képet
2.3. Add hozzá a tartalmat: Hozzáadunk egy képaláírást
2.4. Add hozzá a tartalmat: Az első három bekezdés
3.1. Formázd meg a tartalmat: A címsor megformázása
3.2. Formázd meg a tartalmat: A címsor további formázása
3.3. Formázd meg a tartalmat: A kép átméretezése
3.4. Formázd meg a tartalmat: A böngésző saját stílusai
3.5. Formázd meg a tartalmat: Szélesség és térközök
3.6. Formázd meg a tartalmat: Pozicionálás
3.7. Formázd meg a tartalmat: A bekezdések formázása
3.8. Formázd meg a tartalmat: Linkek formázása
4.1. Egy szép cikk: Készen vagyunk
Építs HTML-t
1.1. Építs HTML-t
2.1. Teszt: Ellenőrizd a tudásod!
3. hét
CSS gyakorlás
Díszítsd fel a sáskarákot
1.1. Díszítsd fel a sáskarákot
1.2. Díszítsd fel a sáskarákot: Nem telepített betűkészletek használata
1.3. Díszítsd fel a sáskarákot: A sáskarák maga
4. hét
Mondrian és okos kérdések
Olvass, keress, kérdezz
1.1. Olvass, keress, kérdezz: Tanuld meg kihúzni magad a gödörből
1.2. Olvass, keress, kérdezz: Olvass (Read)
1.3. Olvass, keress, kérdezz: Keress (Search)
1.4. Olvass, keress, kérdezz: Kérdezz (Ask)
1.5. Olvass, keress, kérdezz: Összefoglalás
Mondrian-festmény
1.1. Művészi CSS és HTML: Mondrian festménye
2.1. Hozd létre a vásznat
2.2. Hozd létre a vásznat: Akaszd fel a falra a képet
3.1. Fesd meg az első sort: A kép szerkezete
3.2. Fesd meg az első sort: A piros négyzet
3.3. Fesd meg az első sort: A piros négyzet a helyére kerül
3.4. Fesd meg az első sort: Az első fekete elválasztó
3.5. Fesd meg az első sort: A felső oszlop
4.1. A második és harmadik sor: A második sor
4.2. A második és harmadik sor: Az alsó sor
4.3. A második és harmadik sor: Az alsó sor egy lehetséges megoldása
5.1 Gyakorlás és összefoglalás: Fess szabadon
6.1. Teszt: Ellenőrizd a tudásod!
5. hét
Fejlesztői eszközök és egy névjegy
Fejlesztői eszközök a böngészőben
1. Fejlesztői eszközök a böngészőben: Bevezetés
2. Fejlesztői eszközök a böngészőben: 1. feladat: Forráskód a böngészőben
3. Fejlesztői eszközök a böngészőben: 2. feladat: Chrome fejlesztői eszközök
4. Fejlesztői eszközök a böngészőben: 3. feladat: Egy elem vizsgálata
5. Fejlesztői eszközök a böngészőben: 4. feladat: A konzol
Online névjegy
1.1 Bemelegítés a projekthez: Egy baráti telefon
1.2. Bemelegítés a projekthez: Muszáj-e kódolni?
2.1. Specifikáció és wireframing: Tedd föl a jó kérdéseket
2.2. Specifikáció és wireframing: Specifikáció és adatok
2.3. Specifikáció és wireframing: Rajzolj egy wireframe-et
2.4. Specifikáció és wireframing: A váz tervezése
2.5. Specifikáció és wireframing: Összegyűjtjük az alapanyagokat
3.1. A HTML-váz: A konténerek
3.2. A HTML-váz: A tartalom hozzáadása
3.3. A HTML-váz: Az ikonok
3.4. A HTML-váz: Egy lehetséges váz
4.1. CSS pozicionálás: Találd meg a dobozokat
4.2. CSS pozicionálás: CSS reset
4.3. CSS pozicionálás: A méret beállítása
4.4. CSS pozicionálás: Középre helyezés flexbox-szal
4.5. CSS pozicionálás: Konténerek és tartalom középre helyezése
4.6. CSS pozicionálás: A profilfotó
4.7. CSS pozicionálás: Az inline lista
4.8. CSS pozicionálás: Térközök hozzáadása
5.1 Még egy kis CSS: A háttérkép
5.2. Még egy kis CSS: A névjegykártya megformázása
5.3. Még egy kis CSS: Keret hozzáadása
5.4. Még egy kis CSS: Interakció
6.1. Tipográfia és színek: Te jössz
7.1. Teszt: Ellenőrizd a tudásod!
6. hét
Az asztali szerkesztők és a verziókezelés
Frontend fejlesztés asztali kódszerkesztővel
1.1. Bevezetés: Üdv!
1.2. Bevezetés: Miért van erre szükségem?
2.1. Ismerd meg a VS Code-ot: Miért a VS Code-ot választottuk?
2.2. Ismerd meg a VS Code-ot: VS Code telepítése
2.3. Ismerd meg a VS Code-ot: Kiegészítők telepítése
3.1. A hercegnő-illúzió: A hercegnő projekt
3.2. A hercegnő-illúzió: A projekt elkészítése
3.3. A hercegnő-illúzió: Fájlok hozzáadása
3.4. A hercegnő-illúzió: A HTML
3.5. A hercegnő-illúzió: A HTML boilerplate
3.6. A hercegnő-illúzió: Előnézet
3.7. A hercegnő-illúzió: Saját média
3.8. A hercegnő-illúzió: A CSS
3.9. A hercegnő-illúzió: Egy gyors összefoglaló
4.1. Haladó tippek és trükkök: VS Code szupererők
4.2. Haladó tippek és trükkök: VS Code gyorsbillentyűk
4.3. Haladó tippek és trükkök: Hogyan kérdezz jól
5.1. Összefoglalás: Gratulálunk
Tanuld meg az alap Git-munkamenetet
1.1. Bevezetés: Üdvözlünk
1.2. Bevezetés: A Gitről röviden
1.3. Bevezetés: A GitHubról röviden
2.1. A parancssor kezelése
3.1. Git és GitHub: GitHub-regisztráció
3.2. Git és GitHub: Personal Access Token
3.3. Git és GitHub: A Git telepítése
3.4. Git és GitHub: Állítsd be a Git-identitásod
4.1. Első lépések a Gitben: Bevezető
4.2. Első lépések a Gitben: Hozd létre az első repositoryd
4.3. Első lépések a Gitben: Klónozd le
4.4. Első lépések a Gitben: Hozd létre az első fájlodat
4.5. Első lépések a Gitben: Kövesd el az első commitod
4.6. Első lépések a Gitben: Mikor commitolj?
5.1. A munkád szinkronizálása: A Git színterei
5.2. A munkád szinkronizálása: Commitok importálása
5.3. A munkád szinkronizálása: Változtatások beolvasztása
5.4. A munkád szinkronizálása: Commitok importálása és beolvasztása
6.1. Branchek és Git: A branchek rendszere
6.2. Branchek és Git: Egy új branch
6.3. Branchek és Git: Másik branchre váltás
6.4. Branchek és Git: Branchek egyesítése
6.5. Branchek és Git: Branch törlése
7.1. Közös munka a Git segítségével: Hogyan dolgozzunk együtt GitHubon?
7.2. Közös munka a Git segítségével: Adjunk háttérképet a honlaphoz
7.3. Közös munka a Git segítségével: Pull request készítése
7.4. Közös munka a Git segítségével: Pull request kezelése
8.1. Publikáld a munkád: Publikáld a munkád a GitHub Pages segítségével
9.1. Összefoglalás: Itt a vége
10.1. Teszt: Ellenőrizd a tudásod!
7. hét
Saját "online névjegy" oldal készítése
Egy online névjegy neked
1.1 Készítsd el a sajátod
8. hét
Haladó pozicionálás CSS-sel
Minden a helyén
1.1. A display tulajdonság: Bevezetés
1.2. A display tulajdonság: Inline és block elemek
1.3. A display tulajdonság: Egy elem megváltoztatása
1.4. A display tulajdonság: A megjelenítés megváltoztatása
1.5. A display tulajdonság: Mindkét világok legjobbika
1.6. A display tulajdonság: Egy utolsó display típus
2.1. A box modell: Ugyanolyan dobozok?
2.2. A box modell: Mérd meg
2.3. A box modell: A box-sizing tulajdonság
2.4. A box modell: Két doboz egymás mellett
2.5. A box modell: Még egy dolog
3.1. A position tulajdonság: A normál sorrend
3.2. A position tulajdonság: Csak egy pár pixellel arrébb
3.3. A position tulajdonság: Fixáció
3.4. A position tulajdonság: Egy új dimenzió
3.5. A position tulajdonság: Abszolút varázslat
3.6. A position tulajdonság: Egy egyszerű layout
3.7. A position tulajdonság: Vágj arcokat
4.1. Floatok: Körbevenni egy képet szöveggel
4.2. Floatok: Három csomag megjelenítése
4.3. Floatok: Floatok rendezése
4.4. Floatok: Clearfixek
5.1. Összefoglalva: A layout arzenál
6.1. Teszt: Ellenőrizd a tudásod!
9. hét
Reszponzív webdesign
Reszponzív webdesign
1.1. Bevezetés: Mit fogsz megtanulni?
1.2. Bevezetés: Mit fogsz megépíteni?
1.3. Bevezetés: Néhány definíció
2.1. A váz előkészítése: A HTML megépítése
2.2. A váz előkészítése: Egyéb elemek hozzáadása
2.3. A váz előkészítése: Egy egyszerű CSS Reset
2.4. A váz előkészítése: Segítő színek
2.5. A váz előkészítése: Minden készen áll
3.1. Gyors betűtípus-kitérő: Hol tartunk?
3.2. Gyors betűtípus-kitérő: A projekthez megfelelő betűkészletek kiválasztása
3.3. Gyors betűtípus-kitérő: Nem telepített betűkészletek használata
3.4. Gyors betűtípus-kitérő: Állítsd be a betűtípust
3.5. Gyors betűtípus-kitérő: Még egy kis tipográfia
3.6. Gyors betűtípus-kitérő: Egy lehetséges megoldás
4.1. Relatív egységek: Az első pillér
4.2. Relatív egységek: A hossz egységei
4.3. Relatív egységek: Em
4.4. Relatív egységek: Rem
4.5. Relatív egységek: Tipográfia és a rem
4.6. Relatív egységek: Százalékok
4.7. Relatív egységek: A viewport szélessége és magassága
4.8. Relatív egységek: Összefoglaló a relatív egységekről
5.1. Reszponzív elrendezés: A második pillér
5.2. Reszponzív elrendezés: Példa a reszponzív elrendezésre
5.3. Reszponzív elrendezés: A mobile first elv
5.4. Reszponzív elrendezés: Építsd a blogot – Box-sizing méretezés
5.5. Reszponzív elrendezés: Építsd a blogot – A header
5.6. Reszponzív elrendezés: Építsd a blogot – A tartalom
5.7. Reszponzív elrendezés: Építsd a blogot – Vertikális ritmus
5.8. Reszponzív elrendezés: Építsd a blogot – Végső simítások
5.9. Reszponzív elrendezés: Összefoglalás a reszponzív elrendezésekhez
6.1. Media queryk: A harmadik pillér
6.2. Media queryk: A megfelelő media queryk
6.3. Media queryk: A tartalom floatolása
6.4. Media queryk: A desktop méret
6.5. Media queryk: Összefoglalás a media querykhez
7.1. Reszponzív média: A negyedik pillér
7.2. Reszponzív média: Flexibilis médiabeágyazás
7.3. Reszponzív média: Összefoglalás a reszponzív médiához
8.1. Összefoglalás: Mindent a reszponzív webdesignról
9.1. Teszt: Ellenőrizd a tudásod!
10. hét
Gyakran használt komponensek
Gyakori komponensek
1.1. Bevezetés: Mit fogsz megtanulni
1.2. Bevezetés: A megépítendő komponensek
1.3. Bevezetés: Mielőtt belevágnánk
2.1. Gombok: Bevezető
2.2. Gombok: Egy sor színes gomb
2.3. Gombok: Minden gomb alapja
2.4. Gombok: A .btn hozzáadása
2.5. Gombok: A .btn megformázása
2.6. Gombok: A kontextuális classok
2.7. Gombok: A Bootstrap-gombok egy lehetséges megoldása
2.8. Gombok: A "flat" gombok
2.9. Gombok: A "flat" gombok egy lehetséges megoldása
2.10. Gombok: Összefoglalás
3.1. Navigáció: Bevezető
3.2. Navigáció: Minden navigáció tervrajza (HTML)
3.3. Navigáció: Minden navigáció tervrajza (CSS)
3.4. Navigáció: Egyszerű felső navigáció – a HTML-váz
3.5. Navigáció: Alapstílusok
3.6. Navigáció: Speciális állapotok
3.7. Navigáció: Az asztali gépre szánt stílusok
3.8. Navigáció: Egyszerű felső navigáció – Kész
3.9. Navigáció: Rögzített felső navigáció – Kihívás
3.10. Navigáció: Rögzített felső navigáció – Egy lehetséges megoldás
3.11. Navigáció: Összefoglalás
4.1. Fejlécek (headers): Bevezető
4.2. Fejlécek (headers): Egy egyszerű blog header – HTML-váz
4.3. Fejlécek (headers): Egy egyszerű blog header - CSS
4.4. Fejlécek (headers): Header egy teljes képernyős cikkhez
4.5. Fejlécek (headers): HTML-váz
4.6. Fejlécek (headers): CSS 1.
4.7. Fejlécek (headers): CSS 2.
4.8. Fejlécek (headers): Összefoglalás
5.1. Footerek: Bevezető
5.2. Footerek: Egy egyszerű footer - HTML-váz
5.3. Footerek: CSS 1.
5.4. Footerek: CSS 2.
5.5. Footerek: A ragadós footer probléma
5.6. Footerek: Az abszolút pozíció megoldás
5.7. Footerek: A calc() megoldás
5.8. Footerek: A Bootstrap-megoldás
5.9. Footerek: Összefoglalás
6.1. Készítsd el a saját komponenstárolódat: Bevezető és feliratkozás
6.2. Készítsd el a saját komponenstárolódat: Egy repo létrehozása
6.3. Készítsd el a saját komponenstárolódat: A git telepítése és klónozás
6.4. Készítsd el a saját komponenstárolódat: Komponensek feltöltése
6.5. Készítsd el a saját komponenstárolódat: Összefoglalás
7.1. Összefoglalás: A komponensekről
8.1. Teszt: Ellenőrizd a tudásod!
11. hét
Záró projekt: saját esküvői weboldal készítése
Oszd meg a tanulás örömét barátaiddal! 🤝
Ajánlói kedvezmény
Esküvői weboldal
1.1. Bevezetés: Gyors figyelmeztetés
1.2. Bevezetés: Játékszabályok
1.3. Bevezetés: Specifikáció és nyersanyagok
1.4. Bevezetés: Design és demó
2.1. Lépésről lépésre: Drótváz és HTML-váz
2.2. Lépésről lépésre: Add hozzá az általános stílusokat
2.3. Lépésről lépésre: Formázd meg a headert (fejléc)
2.4. Lépésről lépésre: Formázd meg a "Helyszínek" részt
2.5.Lépésről lépésre: Formázd meg a "Program" részt
2.6. Lépésről lépésre: Formázd meg a "Nászajándék" részt
2.7. Lépésről lépésre: Formázd meg a "Gyakori kérdések" részt
2.8. Lépésről lépésre: Formázd meg a footert (lábléc)
2.9. Lépésről lépésre: Utolsó simítások és media queryk
3.1. Összefoglalás: Itt a vége
12. hét
Ismerkedés a Javascript világával
Szeretnél oklevelet kapni?
Színóra
1.1. Bevezető a színórához: Építs egy működő színórát
2.1. Építsd meg az órát: Az óra váza
2.2. Építsd meg az órát: Az óra arca
2.3. Építsd meg az órát: A számlap a helyére kerül
3.1. Csinosítsd a számlapot: Cseréld le a betűtípust
3.2. Csinosítsd a számlapot: Növeld meg a méretet
3.3. Csinosítsd a számlapot: Az eltolódás korrekciója
4.1. A pontos idő: Az első programod
4.2. A pontos idő: Írd ki magadból
4.3. A pontos idő: Hány óra van éppen?
4.4. A pontos idő: Tárolj változókban
4.5. A pontos idő: Kész a pontos idő
5.1. Írd ki az időt az oldalra: Módosítsd a HTML-t
5.2. Írd ki az időt az oldalra: Javítsd meg a formátumot
6.1. Indítsd el az órát: Adj neki nevet
6.2. Indítsd el az órát: Indítsd el minden másodpercben
7.1. Tedd színessé: Fesd pirosra
7.2. Tedd színessé: Fesd időre
7.3. Tedd színessé: Engedd szabadon a fantáziád
8.1. Töltsd fel GitHubra: Építsd a programozói portfóliódat
Itt a vége
Eljött az ünneplés ideje! 🎉🍾
2.4. A váz előkészítése: Segítő színek
Ez a lecke még nem elérhető
Ha már beiratkoztál,
be kell jelentkezned
.
Beiratkozom a tanfolyamra