
Webtanárwebmesterek online iskolája
|
|
Köszöntelek a Modern webfejlesztés kurzuson, én Kovács Bence vagyok. Magyarországon elsőként, 2002-ben kezdtem el oktatóvideókat készíteni, főként a webes programozás témakörében. Azóta kb. 70 kurzust készítettem el, melyekkel többezer hallgatót tudtam a tanulásban és a munkaszerzésben segíteni.
Ez a kurzus egy akciós csomag, amely három alapkurzust foglal magába.
Az első kurzus a CSS3 – modern webdizájn címet kapta. A CSS3-mal való ismerkedést teljesen az alapoktól kezdjük, de azért feltételezem, hogy már rendelkezel alapfokú HTML ismeretekkel - ha netán mégsem, akkor iratkozz fel a HTML alapok című kurzusomra! A CSS alapjainak átismétlése után áttekintjük a CSS3 népszerű új funkcióit (úgymint lekerekítések, árnyékolás, színátmenetek használata stb.), majd megismerkedünk az animációk és transzformációk használatával. A kurzus végén néhány gyakorló feladattal foglaljuk össze és próbáljuk ki a tanultakat.
A második kurzus a HTML 5-tel foglalkozik. A HTML5 a modern webfejlesztés alapköve, minden webmester számára kötelezően ajánlott az ismerete és használata. Az oktatóanyagban megismerkedünk a HTML5 új szerkezeti elemeivel, az űrlapok és a multimédiás tartalmak kezelésének új lehetőségeivel.
A harmadik kurzus a Bootstrap – reszponzív weblapok készítése címet viseli. Manapság, amikor a legtöbben már mobiltelefonon és táblagépen nézegetik a weblapokat, a webmestereknek nagy hangsúlyt kell fektetniük a reszponzivitásra – vagyis arra, hogy a weblap minden készüléken szépen jelenjen meg. Ez a kurzus megismerteti veled a reszponzív weblapkészítés eszközeit. Foglalkozunk a Bootstrap rács-szerkezetével, különféle navigációs megoldásokkal, a reszponzív űrlapok készítésével és egyéb hasznos eszközökkel, melyekkel könnyedén tudsz majd modern, reszponzív weblapokat készíteni.
A videókon lépésről lépésre láthatod majd a forráskód szerkesztését, az elkészült kódokat a segédfájlok között találod majd meg. Érdemes minden lecke után a gyakorlatban is kipróbálni a látottakat!
Most pedig nézd meg az ingyenes leckéket, és ha hasznosnak tartod, vásárold meg az akciós csomagot! Remélem, hogy hamarosan tanítványomként köszönthetlek! :-)
Hova és hogyan írhatjuk be a CSS kódot
Háttérszín és háttérkép beállítása
Szövegformázás
Keretek és margók
Listák formázása
Méretezés, megjelenes, pozícionálás
Pszeudo osztályok és elemek használata
Új lehetőségek a formázandó elemek kiválasztására
Doboz elemek sarkának lekerekítése
Szövegek és doboz elemek árnyékolása
Keretek - színek helyett képeket használunk
Saját betűtípusok használata (TTF, OTF, WOFF)
Egyenes vonalú színátmenetek
Körkörös színátmenetek
Színkeverés (RGB és HSL) és áttetszőség
Animáció létrehozása - kulcskockák időtartama
Több tulajdonság animálása: késleltetés, ismétlés
További beállítási lehetőségek
Az animáció megállítása és elindítása (JavaScript)
Egy kis gyakorlás: 3 gomb rezegtetése kattintásra
Mozgatás
Elforgatás
Átméretezés
Megdöntés
Egy kis gyakorlás: 2D-a animáció
Elforgatás a térben
A perspektíva beállítása
Mozgatás térben
Átméretezés, a Z-tengely módosítása
Kétoldalú terület megforgatása
Minden böngészőben ugyanúgy futnak az animációk
Css tulajdonságok megváltoztatása jQuery-vel
Átmenetek használata
Css osztályok hozzáadása és eltávolítása jQueryvel
Kétoldalú forgatás megoldása IE-ben
Elemek egymás alá- és fölérendelése Z-tengelyen
Feladat: területek egymás alá mozgatása 3d-ben
Feladat: könyv oldalainak lapozása 3D-ben
A HTML5 története, előnyei és támogatása
A HTML5 újításai a 4-es változathoz képest
A weboldal szerkezetének leírása új HTML5 elemmel
Megoldás a kompatibilitási problémákra
Szöveges mezők új paraméterei, beállításai
Kötelező szövegformátumok megadása
Külső elemek hozzárendelése az űrlaphoz
Az űrlap vezérlése új paraméterekkel
A jó öreg legördülő lista helyett: adatlista
Szám típusú mezők kezelése
Dátum és idő típusú mezők kezelése
Telefonszám, email cím, URL és kereső mező
Színválasztó
Műveletek eredményének megjelenítése az OUTPUTtal
Videók beillesztése és lejátszása
A videó vezérlése JavaScript-tel
Feliratsáv megjelenítése
Több feliratsáv kezelése, vezérlés JavaScript-tel
A feliratok pozícionálása és formázása
Audió (zene és hang) lejátszása
A HTML5 vászon előkészítése
Téglalap rajzolása
Szín és vonalvastagság beállítása
Egyenes vonalú és körkörös színátmenetek
Vonal és körív rajzolása
Szövegek elhelyezése a vászonra
A HTML5 vásznon elvégezhető egyéb műveletek
Webapp készítése Android-os készülékekhez
Webapp készítése iOS-t futtató Apple eszközökhöz
A Bootstrap keretrendszer letöltése, használata
A weblapunk rács-szerkezetének kialakítása
Szövegek megjelenítése
Táblázatok megjelenítési lehetőségei
Képek és beágyazott videók reszponzív megjelenítés
Figyelemfelkeltő szövegek, fejlécek
Bezárható értesítési blokkok megjelenítése
Gombok
Gombcsoportok és vízszintes (legördülő) menük
Ikonok használata
Címkék és szám-jelvények
Folyamatjelző sávok
Oldalválasztó gombcsoportok és lapozó gombok
Listacsoportok
Panelek
Lenyíló menük
Lenyíló és összecsukható (harmónika) panelek
Füles szerkezetű lapok (tab-ok) navigációja
Menüszerkezet gombokkal
Menüsor készítése
Űrlapok készítése
Az alapvető űrlap-elemek áttekintése
Az űrlap-elemek különböző állapotai
Az űrlap-elemek méretezése
Kép-lapozó (carousel) készítése
Üzenetablak készítése (bármilyen HTML tartalommal)
Súgószöveg (tooltip) készítése
A súgószövegek egyedi formázása
Scrollspy - a gördítésre reagáló menüsor
Affix - gördítés után fixálható menüsor