30 bezplatných videonávodů pro výuku webdizajnu
Začínáme s web designem může být docela obtížné. Pro čtenáře existuje spousta skvělých bezplatných výukových programů online. Někteří lidé však shledávají, že vizuální výuka je pro jejich styl učení efektivnější.
Instrukční videa jsou neuvěřitelně bohatý nástroj pro učení a mohla by být přesně tím, co potřebujete, abyste se konečně mohli správně naučit vývoj webových aplikací. Sestavili jsme seznam více než 30 vynikajících scénářů pro začátečníky napříč řadou webových technologií a disciplín.
Prozkoumejte zdroje návrhu
NetTuts
NetTuts je jedním z nejlepších poskytovatelů bezplatného obsahu vztahujícího se k výuce webdesignu. Mají velké množství článků a videonávodů pro studenty na všech úrovních. Zde je několik pro začátečníky v HTML5, CSS3 a JavaScript.
Konečný průvodce vytvořením návrhu a jeho převod na HTML a CSS
„Toto vysílání bude sloužit jako finální vstup do vícedílné série na stránkách TUTS, která ukazuje, jak vytvořit nádhernou domovskou stránku pro fiktivní firmu. Naučili jsme se, jak vytvořit drátový model na Vectortuts +; přidali jsme barvu, textury a efekty na Psdtuts +; nyní vezmeme naše hotové PSD a převedeme je na pěkně kódovaný web HTML a CSS. “
Jak správně zajistit, aby všechny prohlížeče správně vykreslily značku HTML5: Screencast
„HTML 5 poskytuje některé skvělé nové funkce pro webové designéry, kteří chtějí kódovat čitelná a sémanticky významná rozvržení. Podpora pro HTML 5 se však stále vyvíjí a Internet Explorer jako poslední přidává podporu. V tomto tutoriálu vytvoříme společné rozvržení pomocí některých nových sémantických prvků HTML 5, poté pomocí JavaScriptu a CSS učiníme náš návrh zpětně kompatibilním s Internet Explorer. Ano, dokonce i IE 6. “
Jak vytvořit navigační nabídku stylu lávové lampy
„Jeden z našich čtenářů požádal o tutoriál o tom, jak sestavit menu ve stylu lávové lampy. Naštěstí je to docela jednoduchý úkol, zejména při používání knihovny JavaScript. Budeme stavět jeden od nuly dnes. “
JavaScript z Null: Video Series
„Tato série screencastů se zaměřuje výhradně na JavaScript a přivede vás od prvního upozornění„ Ahoj, svět “až po pokročilejší témata.“
Jak převést PSD na XHTML
„Stále mě udivuje, jak dobře pokračuje výuková příručka Collis„ Build a elegant Portfolio Site From Scratch “. Už jsou to měsíce, přesto to každý týden zveřejňuje silná čísla. Vzhledem k této skutečnosti jsem se rozhodl vytvořit screencast, který vám přesně ukáže, jak převést PSD na perfektní XHTML / CSS. “
Plátek a kostky, že PSD
"V dnešním výukovém videu si připravíme PSD, nakrájíme na web a servírujeme ho na horké plotýnce." Náš design sportuje úhledný pocit „Web 2.0“ a přichází se svolením Joefrey z ThemeForest.net. Pokud máte šanci, nezapomeňte navštívit jeho profil. “
Doctype TV
Chlapi v Doctype zveřejňovali časté televizní vysílání na témata z celého spektra webového designu. Níže naleznete videa, která vám pomohou začít s Ajaxem, návrhem založeným na mřížce, sloupci CSS3 a sestavením prvního pluginu jQuery.
Design na bázi mřížky a AJAX 101
"Nick podává přehled designu založeného na mřížce a Jim rozebírá základy AJAXu."
Sloupy CSS3 a doplňky jQuery
"Nick dekonstruuje vícestupňová rozvržení CSS a Jim vám krok za krokem ukazuje, jak vytvořit svůj vlastní plugin jQuery."
TutVid
TutVid je webová stránka s webovým designem, která nabízí bezplatná instruktážní videa. Můžete si také koupit dané video, abyste obdrželi verzi ke stažení s vyšším rozlišením spolu se všemi souvisejícími soubory projektu. Níže se podíváme na několik dostupných výukových programů Dreamweaveru.
Dreamweaver CS4: Stylingové značky s CSS
„Naučte se vše o stylingových značkách a o tom, jak psát kód CSS v Dreamweaveru. Na konci tohoto tutoriálu budete dobře rozumět tomu, jak psát CSS, jak funguje CSS a jak můžete psát svůj CSS kód v Dreamweaveru. “
14 kroků: Jak používat Divs
"Když začneme používat Divs, podíváme se na spoustu věcí, které chcete vědět." Naučte se vše o umisťování a používání Divů a také o jejich stylingu pomocí CSS v Dreamweaveru! “
Vytvořte základní dokument XML
„V tomto videu rychle přejdeme XML, co to je a na co se používá. Poté si posadíme a napíšeme náš první XML dokument jen na jednoduchý seznam šesti lidí. Použijeme Dreamweaver, ale ve skutečnosti je jakýkoli textový editor v pořádku. Pokryjeme vytváření psaní skutečného jazyka, přidávání atributů a také to, jak vytváříme vlastní značky a jen některé základy, které vám pomohou při psaní vlastního XML dokumentu. “
Vytvořte úplný web CSS
„V tomto videu začneme složkou obrázků a za zhruba 30 minut vytvoříme velmi jednoduché rozložení ve dvou sloupcích pomocí CSS pro stylování naší stránky! Naučíme se vše o používání divs, vytváření CSS pravidel, cílení divs, vytvoření pozadí a ještě mnohem více! Začněte se učit využívat skutečnou sílu kaskádových stylů k vytváření, rozvržení a stylování vašich webových stránek ještě dnes! “
Tématický les
Themeforest je tržiště společnosti Envato, které prodává šablony různých typů webových stránek (HTML, WordPress, Joomla atd.). Stránka také obsahuje blog, který čas od času zveřejňuje opravdu užitečný obsah. Podívejte se na vysílání obrazovky na PHP a jQuery níže.
Potápění do PHP Video Series (11 částí)
„Dnes je začátek zbrusu nové série, která vám přesně Ukáže, jak začít s PHP. Stejně jako u série „jQuery pro absolutní začátečníky“ začneme od nuly a pomalu se propracováváme k pokročilejším tématům. “
jQuery pro absolutní začátečníky
"Od dnešního dne spouštím denní video série, které vás naučí PRECISELY, jak používat knihovnu jQuery ve vašich vlastních projektech." Začneme stažením rámce, vytvořením naší první funkce, zkoumáním syntaxe a dalšími. Každý den zveřejním pětiminutový „tréninkový režim“, který rozšiřuje to, co jste se již naučili. Takže už není důvod bojovat proti němu! Naučte se tuto nebezpečnou věc a začněte vydělávat více peněz na ThemeForest.net pomocí svých nově nalezených dovedností. “
Triky CSS
Chris Coyier na CSS Tricks vysílá stálý proud neuvěřitelně vzdělávacích videonávodů. Na jeho webu je v současné době zdarma 84 ke stažení screencastů, které pokrývají různé techniky a tipy HTML, CSS a JavaScript. Níže se podíváme na šest, které by měly být užitečné pro začátečníky.
Převod programu Photoshop Mockup (část 1 ze 3)
„V tomto vůbec prvním videopodcastu zahajuji proces přeměny maketa webu Adobe Photoshop na skutečný živý web založený na CSS. Tohle je docela drsné, lidi, jsem si jistý, že se časem více soustředí. “
Formátování CSS
„Být organizovaný a používat dobré formátování v souborech CSS vám může ušetřit spoustu času a frustrace během procesu vývoje a zejména při odstraňování problémů. Víceřádkový formát usnadňuje procházení atributů, ale váš soubor je vertikálně velmi dlouhý. Jednořádkový formát udržuje váš soubor svisle krátký, což je příjemné pro výběr prohlížečů, ale je obtížnější procházet atributy. Můžete si také vybrat, jak chcete seskupovat své výkazy CSS. “
Převod programu Photoshop Mockup: Část druhá, epizoda jedna
„V první sérii převodu Photoshop Mockup na HTML / CSS došlo k velké zpětné vazbě. Tak to udělejme znovu! Každý web je jiný, bude vyžadovat různé techniky převodu, takže bude spousta toho, co se tentokrát dozví, které se bude lišit od minulého času. “
Navrhování pro WordPress: Část první
„V první části budeme stahovat a instalovat WordPress. Poté nainstalujeme téma „Starkers“ od Elliot Jay Stocks a začneme zcela novou břidlicí pro náš nový design. Nemá smysl začínat na výchozí téma, je to více problémů, než stojí za to! V druhé části projdeme teorii, která stojí za návrhem pro WordPress a jak je to jako „pracovat modulárně“ a jak začít s návrhem. Ve třetí části dokončíme návrh a začneme s některými pokročilejšími funkcemi. “
HTML & CSS - VELMI ZÁKLADY
„Toto video je základem toho, co je HTML a CSS, pro úplného začátečníka. HTML a CSS soubory jsou doslova jen textové soubory. K jejich vytvoření nepotřebujete žádný speciální software, ačkoli je užitečný pěkný editor kódu. Tyto soubory můžete vytvořit na jakémkoli počítači a během vývoje je zobrazit pomocí webového prohlížeče. Jako obsah vašeho webu si můžete představit HTML: spoustu textu a odkazy na obrázky zabalené do značek. CSS je design vašeho webu. Zacílí na značky, které jste napsali ve svém HTML, a použije styl. Zachování těchto dvou věcí odděleně je klíčem ke kvalitnímu webdesignu. “
Vytváření webových stránek: Převod HTML / CSS
„V části 2 této série začínáme konverzi HTML / CSS maketa Photoshopu, kterou jsme vytvořili v první části. Začneme velmi kosterním projektovým rámcem. Poté se podíváme na organizaci vrstvy souborů Photoshopu. Pak začneme zdola nahoru, vytváříme kousky, které potřebujeme ze souboru Photoshop, a zapisujeme HTML a CSS, abychom dokončili práci. Většina práce ve skutečnosti není „nakrájením“ na soubor Photoshopu, ale důkladným prohlédnutím a pokusem se napodobit to, co se tam dělá, se správnými značkovacími a CSS technikami. “
Victoria Web
Victoria web je druh online webové školy v současné době v beta verzi. Mají malou hrstku bezplatných videonávodů pro vývojáře webu.
Začínáme s PHP
„Chcete začít učit a vytvářet PHP aplikace? Toto video demonstruje nástroje, které používají odborníci v oboru, aby rychle a efektivně zprovoznili své aplikace. “
jQuery Úvod
„Úvod do rámce JavaScriptu jQuery. Naučíte se, jak používat selektory CSS, aby bylo možné modifikovat objekty DOM, posunout je dovnitř a z dohledu, vyblednout a vytvářet vlastní animace. “
Celý webový design
„Naučte se vytvářet celý tento web prodejce od začátku do konce. Pokrývá různé techniky, jako jsou masky vrstev, ořezové masky, odrazy, stínování a další. “
ShowMeDo
ShowMeDo je zdrojem instruktážních videí o práci s open-source technologií a softwarem.
Základy Javascriptu
"V tomto videu ukazuji základy Javascriptu." Značka začíná mezi značkou. Mohlo by to být také mezi značkou. Proto voláme funkci message () z atributu onload ve značce (To znamená, když se stránka načte). Výstup jednoduchého textu na stránku html a výstražných polí, definování funkce a klauzule if / else nám dává okamžitý a obecný pocit, co je Javascript. “
Python od nuly
„Tato série videí je velmi základní přístup k programování pythonu pro začátečníky. V naději, že publikum zůstane naladěno až do pygame tutoriálů, které ukáží, jak vytvořit jednoduché 2D hry bez předchozí znalosti počítačové grafiky. “
Další zdroje
Níže uvedená videa pocházejí z rozptýlených zdrojů po celém webu. Vždy je dobré se učit od tolika samostatných zdrojů, jak je možné, abyste se ujistili, že jste získali důkladné vzdělání.
Vytvoření šablony WordPress - část 1 ze 3
"Důkladná část se třemi částmi pro vytvoření prvního motivu WordPress."
Upravit téma WordPress - výukové video
„Toto je 3. video Advanced WordPress Video Tutorials. Toto video tutoriál ukazuje, jak pracovat s některými kódy motivů WordPress, to je, jak přidat kód automatické odpovědi na postranní panel blogu, jak vložit banner do jednoho příspěvku a podobné věci. “
Jak si vyrobit plugin pro wordpress
"Krátký video tutoriál o tom, jak vytvořit plugin pro wordpress."
Vytvoření webové stránky: od začátku do konce
Třídílná řada, která vás provede navrhováním webových stránek ve Photoshopu až po kódování v HTML a CSS.
jQuery Online Movie Tutorial od Johna Resiga
„John Resig, tvůrce knihovny javascript jQuery, zveřejnil online video o tom, jak vytvořit nabídku akordeonu pomocí jQuery. Docela základní věci ... ale dobré úvod do jQuery, pokud jste v tom nový. “
Závěr
Se všemi výše uvedenými volnými prostředky doufám, že vám docházejí omluvy za to, že stránky nelze kódovat ručně. Je čas skočit a nechat si nohy namočit. Pouhé sledování výše uvedených videí vás naučí načíst a pomůže vám na vaší cestě k tomu, abyste se stali plnohodnotným vývojářem webových stránek.
Znáte další videa zdarma? Nechte odkaz v komentářích níže.
