30 безплатни видео урока за учене на уеб дизайн
Започването на уеб дизайн може да бъде доста трудно. За читателите има много страхотни безплатни уроци онлайн. Някои хора обаче намират визуалната инструкция за по-ефективна за техния стил на обучение.
Инструктивните видеоклипове са невероятно богат инструмент за обучение и може да бъде точно това, което трябва най-накрая да научите правилно уеб разработката. Съставихме списък от над 30 отлични екранизации за начинаещи в редица уеб технологии и дисциплини.
Разгледайте дизайнерските ресурси
NetTuts
NetTuts е един от най-добрите доставчици за безплатно съдържание, свързано с учене на уеб дизайн. Те имат богатство от статии и видео уроци за учащи на всички нива. Ето няколко за начинаещи в HTML5, CSS3 и JavaScript.
Крайното ръководство за създаване на дизайн и преобразуването му в HTML и CSS
„Това екранно предаване ще послужи за финал в многосерийна поредица в сайтовете на TUTS, което показва как да се изгради красива начална страница за измислен бизнес. Научихме как да създадем телената рамка на Vectortuts +; добавихме цвят, текстури и ефекти върху Psdtuts +; сега ще вземем нашия завършен PSD и ще го преобразуваме в добре кодиран HTML и CSS уебсайт. “
Как да накарате всички браузъри да представят правилно HTML5 надпис: Screencast
„HTML 5 предоставя някои страхотни нови функции за уеб дизайнерите, които искат да кодират лесни, семантично значими оформления. Поддръжката за HTML 5 все още се развива и Internet Explorer е последният, който добави поддръжка. В този урок ще създадем общо оформление, използвайки някои от новите семантични елементи на HTML 5, след което ще използваме JavaScript и CSS, за да направим дизайна си обратно съвместим с Internet Explorer. Да, дори IE 6. “
Как да изградите навигационно меню в стил лава-лампа
„Един от нашите читатели поиска урок за това как да се създаде меню в стил лава-лампа. За щастие това е доста проста задача, особено когато използвате JavaScript библиотека. Днес ще го изградим от нулата. "
JavaScript от Null: Видео серия
„Тази екранизирана серия се фокусира изключително върху JavaScript и ще ви отведе от първия си сигнал„ Здравей, свят “до по-напреднали теми.“
Как да конвертирате PSD в XHTML
„Продължавам да се изумявам от това колко добре урокът„ Създайте елегантен сайт за портфолио от нулата “на Collis продължава да се представя. Минаха месеци, но въпреки това тя все още публикува силни числа всяка седмица. Имайки предвид този факт, реших да създам скрийншот, който ви показва как да преобразувате PSD в перфектен XHTML / CSS. "
Нарязвайте и нарязвайте, че PSD
„В днешния видео урок ще нарязваме PSD, ще го издаваме за мрежата и ще го сервираме на топла котлона. Дизайнът ни споменава изящно “Web 2.0 ″ усещане и идва от любезното съдействие на Джоуфри от ThemeForest.net. Не забравяйте да посетите неговия профил, ако имате възможност. “
Doctype TV
Момчетата от Doctype излъчват чести екранизации по теми, вариращи в целия спектър на уеб дизайна. По-долу ще намерите видеоклипове, за да започнете с Ajax, базиран на решетка дизайн, колони CSS3 и изграждане на първата ви jQuery приставка.
Решетен дизайн и AJAX 101
„Ник дава преглед на дизайна, базиран на решетката, а Джим разгражда основите на AJAX.“
CSS3 колони и jQuery приставки
„Nick деконструира CSS оформлението на много колони и Джим ви показва стъпка по стъпка как да създадете своя собствена jQuery приставка.“
TutVid
TutVid е сайт за уроци за уеб дизайн, който предлага безплатни видеоклипове с инструкции. Можете също така да купите даден видеоклип, за да получите версия за изтегляне с по-висока разделителна способност, заедно с всички свързани файлове на проекта. По-долу ще разгледаме няколко от наличните уроци за Dreamweaver.
Dreamweaver CS4: Стилизиране на етикети с CSS
„Научете всичко за стилизиращите маркери и как да пишете CSS код в Dreamweaver. В края на този урок ще имате добро разбиране как да пишете CSS, как работи CSS и как можете да напишете своя CSS код в Dreamweaver. "
14 стъпки: Как да използвате Divs
„Ще разгледаме цял куп неща, които искате да бъдете сигурни, когато започнете да използвате Divs. Научете всичко за поставянето и използването на Divs, както и за стилизирането им с CSS в Dreamweaver! “
Създайте основен XML документ
„В това видео бързо ще прехвърлим XML, какво представлява и за какво се използва. След това ще седнем и ще изпишем нашия първи XML документ само прост списък от шест души. Ще използваме Dreamweaver, но наистина всеки редактор на текстове е добре. Ще обхващаме създаването на действителния език, добавянето на атрибути, както и как създаваме свои собствени тагове и само някои основи, за да ви накараме да напишете свой собствен XML документ. "
Създайте пълен CSS уебсайт
„В това видео ще започнем с папка от изображения и след около 30 минути ще конструираме много просто оформление на две колони, използвайки CSS, за да стилизираме нашата страница! Ще научим всичко за използването на divs, създаването на CSS правила, насочването към divs, създаването на фон и много други! Започнете да се научите да използвате суровата сила на каскадни таблици за стилове, за да създадете, подредите и стилизирате своите уеб страници още днес! “
Themeforest
Themeforest е пазар на Envato, който продава шаблони на уебсайтове от различни видове (HTML, WordPress, Joomla и др.). Сайтът има и блог, който публикува понякога полезно съдържание. Вижте екранните предавания на PHP и jQuery по-долу.
Потапяне във видео серия PHP (11 части)
„Днес поставя началото на съвсем нова серия, която ще ви покаже ТОЧНО как да започнете работа с PHP. Точно както при серията "jQuery за абсолютни начинаещи", ние ще започнем от нулата и бавно ще преминем към някои по-напреднали теми. "
jQuery за абсолютно начинаещи
„От днес стартирам ежедневна видео поредица, която ще ви научи ТОЧНО как да използвате библиотеката на jQuery във вашите собствени проекти. Ще започнем с изтеглянето на рамката, създаването на първата ни функция, изследването на синтаксиса и други. Всеки ден ще публикувам пет-десет минутен „режим на обучение“, който разширява това, което вече сте научили. Така че няма причина да се борите с него повече! Научете това нещо и започнете да печелите повече пари на ThemeForest.net с новите си намерения. "
CSS трикове
Крис Койер в CSS Tricks излъчва постоянен поток от невероятно образователни видео уроци. В момента неговият сайт има 84 безплатни за изтегляне на екрани, които обхващат различни техники и съвети HTML, CSS и JavaScript. По-долу ще разгледаме шест, които трябва да са полезни за начинаещи.
Конвертиране на макет на Photoshop (част 1 от 3)
„В този първи по рода си видеокаст стартирам процеса на преобразуване на макет на Adobe Photoshop на уебсайт в истински уебсайт, базиран на CSS. Тук е доста грубо, хора, сигурен съм, че с времето ще станат по-фокусирани. “
CSS форматиране
„Организирането и използването на добро форматиране във вашите CSS файлове може да ви спести много време и неудовлетвореност по време на процеса на разработка и особено по време на отстраняване на проблеми. Многоредовият формат улеснява сърфирането в атрибути, но прави файла вертикално много дълъг. Форматът на един ред поддържа файла вертикално къс, което е приятно за сърфиране на селектори, но е по-трудно да разглеждате атрибути. Можете също така да изберете как искате да групирате вашите CSS изявления. “
Конвертиране на макет на Photoshop: втора част, епизод първа
„Има много страхотни отзиви за първата серия за конвертиране на макет на Photoshop в HTML / CSS. Така че нека го направим отново! Всеки уебсайт е различен ще изисква различни техники за преобразуване, така че този път ще има какво да научите, което ще е различно от миналия път. “
Проектиране за WordPress: първа част
„В първа част ще изтегляме и инсталираме WordPress. Тогава ще инсталираме темата „Starkers“ от Елиът Джей Стокс, за да започнем с напълно свежа плоча за новия ни дизайн. Няма смисъл, като се започне с темата по подразбиране, това е повече проблеми, отколкото си струва! В част втора ще разгледаме теорията, която стои зад проектирането за WordPress и как това е много „да работим модулно“ и всъщност да започнем да проектираме. В трета част ще завършим дизайна и ще започнем с някои по-модерни функции. “
HTML и CSS - МНОГО основите
„Този видеоклип е МНОГО основите на това какво представляват HTML и CSS за абсолютния начинаещ. HTML и CSS файловете са буквално само текстови файлове. Не се нуждаете от специален софтуер, за да ги създадете, въпреки че е полезен хубав редактор на кодове. Можете да създадете тези файлове на всеки компютър и да използвате уеб браузъра си, за да ги прегледате по време на разработването. Можете да мислите за HTML като за съдържанието на вашия уебсайт: куп текст и препратки към изображения, увити в маркери. CSS е дизайнът на вашия уебсайт. Той е насочен към маркерите, които сте написали във вашия HTML и прилага стила. Поддържането на тези две неща е от ключово значение за качествения уеб дизайн. "
Изграждане на уебсайт: HTML / CSS преобразуване
„В част 2 от тази серия започваме HTML / CSS преобразуването на макета на Photoshop, който създадохме в част първа. Започваме с много скелетна рамка на проекта. След това разглеждаме организацията на файловия слой на Photoshop. След това започваме отдолу нагоре, създавайки парчетата, от които се нуждаем от файла Photoshop и пишем HTML и CSS, които ни трябват, за да свършим работата. Голяма част от работата всъщност не е "нарязване" на Photoshop файла, а погледнете внимателно към него и се опитвате да имитирате какво се прави там с правилни техники за маркиране и CSS. "
Виктория Уеб
Victoria web е вид онлайн уеб училище, което в момента е в бета версия. Те имат малка шепа безплатни видео уроци за уеб разработчици.
Първи стъпки с PHP
„Търсите да започнете да научавате и създавате PHP приложения? Този видеоклип демонстрира инструменти, използвани от професионалистите в индустрията, за да стартират своите приложения бързо и ефективно. "
jQuery Въведение
„Въведение в рамката на jQuery JavaScript. Ще научите как да използвате CSS селектори, за да модифицирате DOM обекти, плъзгайки ги във и извън изглед, избледняване и създаване на персонализирани анимации. “
Цял уеб дизайн
„Научете се да създавате целия този уебсайт за дилъри от началото до края. Покриване на различни техники, като маски на слоя, подстригващи маски, размисли, засенчване и други. “
ShowMeDo
ShowMeDo е източник за инструктивни видеоклипове за работа с технология и софтуер с отворен код.
Основите на Javascript
„В това видео показвам основите на Javascript. Маркерът започва между маркера. Той също може да бъде между маркера. Ето защо ние наричаме функцията message () от атрибута onload в маркера (тоест, когато страницата се зарежда). Извеждането на прост текст на html страницата и полетата за предупреждение, определящо функция и клауза if / else, ни дава незабавно и общо усещане за това какво е Javascript. “
Python от нула
„Тази серия от видеоклипове е много основен подход за програмиране на питони за начинаещи. С надеждата, че публиката ще остане тунингована до уроците по пигейм, които ще покажат как да се правят прости 2D игри без предварително познаване на компютърната графика. "
Други източници
Видеоклиповете по-долу са от разпръснати източници из мрежата. Винаги е добре да се учите от възможно най-много отделни източници, за да сте сигурни, че получавате задълбочено образование.
Създаване на WordPress шаблон - Част 1 от 3
„Дълбока разходка в три части за създаване на първата ви тема на WordPress.“
Променете темата на WordPress - Видеоурок
„Това е 3-тото видео от видео уроци за разширени WordPress. Този видео урок показва как да работите с някои кодове на тема WordPress, тоест как да добавите код за автоматичен отговор към страничната лента на блога, как да поставите банер в един пост и подобни неща. “
Как да направите приставка за WordPress
„Кратък видео урок за това как да направите приставка за WordPress“.
Създаване на уебсайт: От начало до край
Серия от три части, която ви отвежда от създаването на уебсайт във Photoshop докрай чрез кодиране в HTML и CSS.
Онлайн урок за филми на jQuery от Джон Ресиг
„Джон Ресиг, създател на JavaScript библиотека на jQuery, публикува онлайн видео за това как да направите меню в стил акордеон с помощта на jQuery. Доста основни неща ... но добро въведение в jQuery, ако сте нови в това. "
заключение
С всички безплатни ресурси по-горе, надявам се да ви изчерпят извиненията, че не можете да кодирате сайтове на ръка. Време е да скочите и да намокрите краката си. Самото следване заедно с горепосочените видеоклипове ще ви научи да зареждате и ще ви помогне да се превърнете в пълноправен уеб програмист.
Знаете ли за още безплатни видео уроци? Оставете линк в коментарите по-долу.
