A legjobb 25 Web Design Tutorial
A számítástechnika és azon belül a web napjaink egyik leggyorsabban fejődő területe, így szinte lehetetlen néhány száz órába belesűríteni az alapoktól mindent. Cikkünk célja az intézményünkben végzett résztvevők segítése további, önálló tanulásukban.
Ha ismered a HTML, CSS, Photoshop és a webdesigner mesterség alapjait, akkor jó helyen jársz, olvasd tovább cikkünket! Ha nem, akkor mindenekelőtt érdemes ezeket az alapokat megtanulni egyik webdesign tanfolyamunkon.
Az Top School Oktató Központ évek óta foglalkozik webszerkesztő és webdesigner tanfolyamok és képzések szervezésével. A közel egy évtizedes múltra visszatekintő oktatási munka és a képzési programok jól felépített, jól strukturált tananyagrendszere már több átalakításon ment át az évek során. Minden változatás azt a célt szolgálta, hogy a képzési anyag elsajátítása könnyebb és egyszerűbb legyen. Ez a cikk a megszerzett ismeretek továbbfejlesztését szolgálja, nem kezdő tananyag!
Webdesigner komplex tanfolyamok:
Webdesigner modul képzések:
A webdesign tutoriálokról, s azok nyelvéről
Sajnos az informatika nyelve az angol, így a legtöbb tutorial angol nyelvű. Ahhoz, hogy webdesign szakmában képesek legyünk fejlődni és ne legyünk folyamatosan valamennyire lemaradva, meg kell tanulnunk angolul. Kb. 100 órás tanfolyamon már meg lehet szerezni az „induló” nyelvi kompetenciákat.
Angol tanfolyamainkról és nyelvi képzéseinkről itt tájékozódhatsz: angol nyelvtanfolyam
Cikkünk írásakor iskolánk speciális, angol nyelvi képzéshez kapcsolódó akciót hirdetett: minden komplex képzésre beiratkozó résztvevő ingyen járhat angol nyelvi kurzusra.
A webdesign segédleteket témakörönként csoportosítottuk, ezek a következők:
Grafikai tervezés (Graphic Design)
Ebbe a csoportba kerültek azok a segédletek, amelyek célja, hogy webdesign grafikai terveink jobbak, szebbek és célzottabbak legyenek.
Ez a webdesigner tutorial a tipográfia alapjaival foglalkozik, és némi segédletet ad az első grafikai tervek elkészítéséhez. Kezdőknek ajánlott, haladó designerek és képzett grafikusok átléphetik.
A szépen megtervezett és gyönyörű tipográfiával elkészített logókat hosszú éveken át nem tudtuk megjeleníteni a weboldalakon, képként, úgynevezett img tag segítségével kellett beszúrni. Ez a webdesign tutorial egyfajta megoldást nyújt erre a problémára.
Flat webdesign Tutorial – Landing Page
A Flat webdesign meglehetősen új dolog, az IOS 7 operációs rendszerrel jelent meg – sok webdesigner szereti, sokan pedig támadják. A tutorial bemutatja, hogyan készíthet a webdesigner lélegzetelállító portfólió nyitóoldalt a Flat Design használatával.
HTML, CSS, PSD to HTML
Kezdő Webdesign videó tutorial – Photoshop eszközök, panelek és tervezés
Ebben a segédletben Photoshop videó turorialokat láthatunk, amelyek hasznosak minden webdesigner számára a tervezéshez, wireframe elkészítéséhez és a HTML/CSS kód elkészítéséhez. Szükséges hozzá a Photoshop tanfolyam anyagának ismerete.
Saját rácsrendszer készítése Photoshopban
A rácsszerkezet használata a webdesign tervezésben nem új keletű dolog, korábban könyvek, kiadványok szerkesztésénél is használták, mert igen nagy segítséget nyújt a grafikai tervezésben. A tutorial azt mutatja be, hogyan készíthet a webdesigner magának rácsszerkezet-rendszert (Grid System-et).
Felugró értesítési sáv CSS3 segítségével
A HTML 5/CSS 3 webdesign segédletből megtanulhatjuk a megjeleníthető és elrejthető értesítési sáv egyszerű elkészítését.
CSS konvertálása SASS és SCCS formátumba
A SASS és SCCS a legtöbb designer, webdesigner számára új. Ez a tutorial bemutatja, hogyan konvertáljunk CSS-ből SASS, illetve SCCS formátumba.
Térkép hozzáadása a weboldaladhoz nagyszerű dolog, ebből a tutoriálból elsajátíthatod a térkép szerkesztését, s akkor nem kényszerülsz arra, hogy tudás híján a konkurencia oldaláról kelljen ellopnod! Különösen ajánlott ez a cikk, ha nem nálunk, hanem másolós iskolában tanultál webdesignt!
A Google Maps API kreatív felhasználása
A webdesigner egyik fő feladata lenyűgözni az ügyfeleket. Google Maps lehetővé teszi, hogy a sablon térképeken túl olyan egyéni, személyre szabott grafikát jelenítsünk meg a weboldalba ágyazott térképen, amelyek illeszkednek a weboldalon kialakított dizájnhoz.
Egyenlő oszlopmagasság CSS-ben
Kezdő webdesigner számára nem könnyű feladat az egyenlő oszlopmagasság beállítása, és sajnos ez később sem lesz egyszerű… Persze, csak tréfálunk, ebből a segédletből megtanulhatod, hogyan lehet egyszerű eszközökkel pontos eredményt elérni a webdesign tervezés során!
Web alapú videó lejátszó létrehozása
Abban a legtöbb webdesigner, programozó, sitebuilder egyetért, ha korábbi verzióiban valahol gyengén teljesített a HTML nyelv, akkor az a videó és audio támogatás volt. Gyakorlatilag olyan böngészőbe ágyazott külső programokra voltunk kénytelenek támaszkodni, mint például a Flash vagy a Silverlight. A HTML5 natív módon, külső segítség nélkül támogatja a
Több háttér használata CSS3-ban
Háttérkép hozzáadása egy HTML objektumhoz nem kihívás, hanem alapfeladat volt a CSS korábbi verzióiban is. A CSS3 újdonsága a webdesignerek számára, hogy a Photoshop réteghasználatához hasonlóan lehetőségünk nyílik több képből egyszerre kialakítani az adott HTML objektum hátterét, lehetővé téve összetettebb animációk létrehozását.
Tartalomfül készítése Pure CSS-ben
Tartalomfülek készítéséhez korábban Java Script alapú kódokat kellett használnunk. A CSS3 segítségével ezekre többé nincs szükség, létrehozhatunk pusztán CSS segítségével ilyen interaktív elemeket weboldalunk számára.
Keresőmezővel rendelkező legördülő menü készítése CSS3-ban és HTML-ben
A segédlet az egyszerű és elegáns Flat Design stílusú legördülő menü létrehozását mutatja be. Nagyon hasznos lehet azoknál a webes projekteknél, webdesignoknál amikor a dizájner, webdesigner egy webprogramozóval dolgozik együtt, és a feladatok közé tartozik űrlapelemek tervezése is.
Hogyan készítsünk Flat Style morzsa linkeket CSS-ben
Flat Style morzsa linkek készítése CSS-ben
Lemonade Responsive Grid System
Lemonade egy olyan rácsszerkezet (Grid System), amely segít a designereknek, webdesignernek és a webfejlesztőknek responsive webdesign létrehozásában.
HTML Email sablon az alapoktól
Ebből a segédletből megtudhatod, hogyan készíts látványos email sablonokat HTML és CSS segítségével.
Circle Navigation Effect with CSS3
Egy újabb minőségi tutorial, amelynek segítségével érdekes navigációs effektek készíthetők a webdesign során.
Korábbi Flash oldalakról ismerős effekt, a CSS3 újdonságainak hála, mostantól tisztán HTML, CSS kóddal megvalósítható ez a fajta navigációs effekt a webdesign készítésekor.
Űrlap formázás CSS3 segítségével
Ez a tutorial egyaránt hasznos a webdesigner és a webfejlesztő számára. Letisztult, egyszerű űrlap készítése tanulható meg CSS3 segítségével.
jQuery
Hogyan alkalmazzunk végtelen oldal görgetés effektet statikus weboldalakon
Az egyik legismertebb, Facebook által is használt szolgáltatás a végtelen görgetés. Sajnos a webdesign tanfolyami anyagba ritkán fér bele, de ennek a tutorialnak a segítségével könnyen elkészíthető lesz.
Interaktív 3D objektum jQuery segítségével
Néhány évvel ezelőtt az interaktív, forgatható, méretezhető 3D objektumok megjelenítése csak Java programozók kiváltsága volt. Akkor még nem is sejtettük, hogy néhány év múlva szinte mindennapi rutin webdesign feladat lesz egy ilyen elkészítése.
jQuery Immersive Slider készítése
A sliderek még mindig fontos és kedvelt eszközök a modern web dizájnban. Kreatív és egyszerű megoldást kínál az alábbi segédlet.
Görgetős weboldal a Jarallax.js használatával
Parallax Scrolling egy nagyon érdekes és látványos technológia, amelynek segítségével általában történeteket mesélnek el a weboldalakon, de bizonyára hasznos lehet a kereskedelmi weboldalak esetében is.
Szuper egyszerű szövegelforgatás szinte erőlködés nélkül
Szöveg forgatása soha nem volt ilyen egyszerű, mint ennek a webdesign tutorialnak a segítségével!
A tutorial a Chart JS használatát mutatja be, különböző effektekkel díszített, látványos diagramok készíthetők segítségével.
Tanfolyam ajánló
