30 tasuta videoõpetust veebidisaini õppimiseks
Veebikujundusega alustamine võib olla üsna keeruline. Lugejate jaoks on veebis tohutult palju tasuta õpetusi. Mõne inimese arvates on visuaalne juhendamine oma õpistiili jaoks tõhusam.
Juhendmaterjalid on uskumatult rikkalik õppevahend ja võiksid olla just see, mida peate veebiarenduse korralikult õppimiseks. Oleme koostanud nimekirja üle 30 suurepärase ekraanilõigu algajatele paljudel veebitehnoloogiatel ja erialadel.
Tutvuge disainiressurssidega
NetTuts
NetTuts on üks parimaid tasuta veebidisaini õppimisega seotud tasuta pakkujaid seal. Neil on rikkalikult artikleid ja videoõpetusi kõigi tasemete õppijatele. Siin on mõned HTML5, CSS3 ja JavaScripti algajatele.
Ülim juhend kujunduse loomiseks ja selle HTML-i ja CSS-i teisendamiseks
“See ekraanisaade on lõplik sissekanne mitmest osast koosnevas sarjas kogu TTÜS-i saitidel, mis näitab, kuidas ilukirjandusliku ettevõtte jaoks ilusat kodulehte üles ehitada. Õppisime, kuidas luua juhtraami saidil Vectortuts +; lisasime värvidele, tekstuuridele ja efektidele rakenduse Psdtuts +; nüüd võtame meie valminud PSD ja teisendame selle kenasti kodeeritud HTML- ja CSS-i veebisaidiks. ”
Kuidas panna kõik brauserid HTML5-märgistust õigesti renderdama: ekraanisaade
„HTML 5 pakub suurepäraseid uusi funktsioone veebidisaineritele, kes soovivad kodeerida loetavaid, semantiliselt tähendusrikkaid paigutusi. HTML 5 tugi on siiski alles arenev ja Internet Explorer on tugi viimasena lisanud. Selles õpetuses loome ühise paigutuse, kasutades mõnda HTML 5 uut semantilist elementi, seejärel kasutame JavaScripti ja CSS-i, et muuta meie disain tagurpidi ühilduvaks Internet Exploreriga. Jah, isegi IE 6. ”
Kuidas luua laavalambi stiilis navigeerimismenüü
“Üks meie lugeja taotles õpetust laavalambi stiilimenüü koostamiseks. Õnneks on see üsna lihtne ülesanne, eriti JavaScripti teegi kasutamisel. Ehitame täna selle nullist üles. ”
JavaScripti firmalt Null: Videoseeria
"See ekraanisaadetesari keskendub eranditult JavaScriptile ja viib teid alates esimesest" Tere, maailm "hoiatusest kuni edasijõudnumate teemadeni."
Kuidas teisendada PSD XHTML-i
„Mind hämmastab endiselt see, kui hästi Collis juhendab õpetust„ Ehita kleepsust portfelli sait nullist “. On olnud mitu kuud, kuid endiselt on see igal nädalal tugev. Arvestades seda asjaolu, otsustasin luua ekraanisaate, mis näitab teile täpselt, kuidas teisendada PSD täiuslikuks XHTML / CSS-ks. ”
Viil ja täring, mis PSD
„Tänases videoõppes viilutame PSD, kuubikuteks selle veebi jaoks ja serveerime sooja kuumale taldrikule. Meie disainilahendus on puhas “Web 2.0” ja see on Joefrey viisakalt vastu võetud saidilt ThemeForest.net. Kui teil on võimalust, külastage kindlasti tema profiili. ”
Doctype-teler
Doctype'i poisid panid sageli ekraanil üle veebidisaini spektri. Altpoolt leiate videoid, kus saate alustada Ajaxi kasutamist, ruudustusel põhinevat disaini, CSS3 veerge ja oma esimese jQuery pistikprogrammi ehitamist.
Võrgupõhine disain ja AJAX 101
"Nick annab ülevaate võrgupõhisest disainist ja Jim jaotab AJAXi põhitõed."
CSS3 veerud ja jQuery pluginad
"Nick dekonstrueerib CSS-i mitme veeru paigutuse ja Jim näitab sulle samm-sammult, kuidas luua omaenda jQuery plugin."
TutVid
TutVid on veebikujunduse õpetamise sait, mis pakub tasuta õppevideoid. Võite osta ka antud video, et saada kõrgema eraldusvõimega allalaaditavat versiooni koos kõigi seotud projektifailidega. Allpool vaatame mõnda saadaolevat Dreamweaveri õpetust.
Dreamweaver CS4: siltide kujundamine CSS-iga
„Lugege kõike siltide kujundamise ja Dreamweaveris CSS-koodi kirjutamise kohta. Selle õpetuse lõpuks on teil hea arusaam, kuidas kirjutada CSS-i, kuidas CSS töötab ja kuidas oma CSS-koodi Dreamweaveris kirjutada. ”
14 sammu: Kuidas divide kasutada?
“Vaatame terve hulga asju, mida soovite Divide kasutamise alustamisel kindlasti teada. Siit saate teada nii Divide paigutamise ja kasutamise kui ka nende kujundamise kohta CSS-i abil Dreamweaveris! ”
Looge põhiline XML-dokument
„Selles videos juhime kiiresti XML-i üle, mis see on ja milleks seda kasutatakse. Seejärel istume maha ja kirjutame välja oma kõige esimese XML-dokumendi, milleks on lihtne kuue inimese nimekiri. Me kasutame Dreamweaverit, kuid tegelikult on kõik tekstiredaktorid korras. Me käsitleme tegeliku keele kirjutamist, atribuutide lisamist, aga ka seda, kuidas loome oma silte ja lihtsalt mõned põhitõed, et saaksite oma XML-dokumenti kirjutada. ”
Looge täielik CSS-i veebisait
“Selles videos alustame piltide kaustaga ja konstrueerime umbes 30 minutiga väga lihtsa kaheveerulise paigutuse, kasutades CSS-i meie lehe stiilimiseks! Õpime kõike divide kasutamise, CSS-i reeglite loomise, divide sihtimise, tausta loomise ja palju muu kohta! Hakake kasutama kaskaadlaadilehtede toorest jõudu oma veebilehtede loomiseks, paigutamiseks ja stiilimiseks juba täna! ”
Teemamets
Teemamets on Envato turuplats, mis müüb erinevat tüüpi veebisaidimalle (HTML, WordPress, Joomla jne). Saidil on ka ajaveeb, mis postitab aeg-ajalt tõeliselt kasulikku sisu. Vaadake allpool PHP ja jQuery ekraanikuvasid.
Sukeldumine PHP videoseeriatesse (11 osa)
„Täna tähistatakse uhiuue sarja algust, mis näitab teile täpselt, kuidas PHP-ga alustada. Nagu sarja "jQuery for Absolute Beginners" puhul, alustame ka nullist ja töötame aeglaselt edasi mõne keerukama teema juurde. ”
jQuery absoluutsete algajate jaoks
„Alates tänasest lansseerin igapäevase videoseeria, mis õpetab teile täpselt, kuidas jQuery raamatukogu oma projektides kasutada. Alustame raamistiku allalaadimisega, oma esimese funktsiooni loomisega, süntaksi uurimisega ja muuga. Iga päev saadan viie-kümneminutilise “treeningrežiimi”, mis laiendab juba õpitu. Nii et pole enam põhjust sellega võidelda! Õppige seda dang-asja ja hakake oma äsja leitud oskustega teenima ThemeForest.net-is rohkem raha. ”
CSS-nipid
Chris Coyier CSS Tricksis viib läbi uskumatult harivaid videoõpetusi. Tema saidil on praegu 84 tasuta allalaadimist ekraanisaadetest, mis hõlmavad erinevaid HTML-, CSS- ja JavaScripti tehnikaid ja näpunäiteid. Allpool vaatame kuut, millest peaks algajatele abi olema.
Photoshop-maketi teisendamine (1. osa 3-st)
„Selles esimeses video taskuhäälingusaates alustan veebisaidi Adobe Photoshopi maketi teisendamise protsessi reaalseks CSS-põhiseks veebisaidiks. See on siinsete inimeste jaoks üsna umbmäärane, olen kindel, et need muutuvad aja jooksul keskendunumaks. ”
CSS-i vormindamine
„Kui olete oma CSS-failides korraldatud ja kasutate head vormingut, saate arendusprotsessi ja eriti tõrkeotsingu ajal säästa palju aega ja pettumust. Mitmerealine vorming teeb atribuutide sirvimise lihtsaks, kuid muudab faili vertikaalselt väga pikaks. Üherealine vorming hoiab faili vertikaalselt lühikesena, mis on mõnus valijatele sirvimiseks, kuid atribuutide sirvimine on raskem. Samuti saate valida, kuidas soovite oma CSS-i avaldusi grupeerida. ”
Photoshop-maketi teisendamine: teine osa, esimene osa
“Photoshop-maketi HTML / CSS-i teisendamise esimese seeria kohta on olnud palju palju tagasisidet. Teeme siis uuesti! Iga veebisait on erinev ja nõuab teistsuguseid teisendustehnikaid, nii et seekord on palju õppida, mis erineb eelmisest korrast. ”
Kujundus WordPressile: esimene osa
„Esimeses osas laadime alla ja installime WordPressi. Seejärel installime Elliot Jay Stockssi teema “Starkers”, et alustada meie uue kujunduse jaoks täiesti värske kiltkiviga. Pole mõtet vaikimisteemaga alustada, see on rohkem vaeva, kui see väärt on! Teises osas käsitleme WordPressi kujundamise taga olevat teooriat ja seda, kuidas see sarnaneb „modulaarselt töötamisega”, ning alustame tegelikult disainimisega. Kolmandas osas viime disaini lõpule ja alustame mõne keerukama funktsionaalsusega. ”
HTML ja CSS - VÄGA põhitõed
“See video on absoluutselt algajale VÄGA põhiline, mis HTML ja CSS on. HTML- ja CSS-failid on üsna sõna-sõnalt lihtsalt tekstifailid. Nende loomiseks pole vaja spetsiaalset tarkvara, kuigi toredast koodiredaktorist on abi. Saate neid faile luua mis tahes arvutis ja kasutada veebibrauserit nende arendamise ajal eelvaate saamiseks. Võite mõelda HTML-i kui oma veebisaidi sisu: hunnik teksti ja viiteid siltidesse mähitud piltidele. CSS on teie veebisaidi kujundus. See sihib teie HTML-is kirjutatud silte ja rakendab stiili. Nende kahe asja lahus hoidmine on kvaliteetse veebidisaini võti. ”
Veebisaidi loomine: HTML / CSS-i teisendus
„Selle seeria 2. osas alustame esimeses osas loodud Photoshopi maketi HTML / CSS-i teisendamist. Alustame väga skeleti projekti raamistikuga. Seejärel heidame pilgu Photoshopi failikihtide organisatsioonile. Seejärel alustame alt ülespoole, luues Photoshop-failist vajalikud tükid ning kirjutades HTML-i ja CSS-i, mis meil töö jaoks vaja on. Suur osa tööst ei ole tegelikult Photoshop-faili "viilutamine", vaid selle läbilõikamine ja proovimine jäljendada, mida seal tehakse õigete märgistuste ja CSS-tehnikatega. "
Victoria veeb
Victoria veeb on omamoodi veebikool, mis on praegu beetaversioon. Neil on väike käputäis tasuta videoõpetusi veebiarendajatele.
PHP-ga alustamine
“Kas soovite hakata õppima ja looma PHP-rakendusi? See video tutvustab tööriistu, mida tööstusespetsialistid kasutavad oma rakenduste kiireks ja tõhusaks käivitamiseks. "
jQuery sissejuhatus
„JQuery JavaScripti raamistiku sissejuhatus. Saate teada, kuidas kasutada CSS-i valijaid DOM-i objektide muutmiseks, libistades neid vaatesse ja välja, hääbudes ja kohandatud animatsioone luues. ”
Terve veebidisain
„Õppige kogu selle esinduste veebisaiti algusest lõpuni looma. Kaetakse mitmesuguseid tehnikaid, näiteks kihtmaske, klammerdamismaske, peegeldusi, varje ja palju muud. ”
ShowMeDo
ShowMeDo on juhendvideote allikas avatud lähtekoodiga tehnoloogia ja tarkvaraga töötamise kohta.
Javascripti põhitõed
“Selles videos näitan Javascripti põhitõdesid. Silt algab sildi vahelt. See võib asuda ka sildi vahel. Sellepärast kutsume funktsiooni teade () sildi atribuudist onload (st lehe laadimisel). Lihtsa teksti väljutamine html-lehel ja häireväljadel, määratledes funktsiooni ja if / else klausli, annab meile Javascripti kohest ja üldist tunnetust. "
Python nullist
“See videoseeria on väga lihtne lähenemisviis algajatele pythoni programmeerimisele. Lootuses, et publik püsib kuni pygame-õpetusteni, kus näidatakse, kuidas teha lihtsaid 2D-mänge ilma arvutigraafika eelteadmisteta. ”
Muud allikad
Allpool olevad videod on pärit hajutatud allikatest kogu veebis. Põhjaliku hariduse saamiseks on alati hea õppida võimalikult paljudest erinevatest allikatest.
WordPressi malli loomine - 1. osa 3-st
„Esimese WordPressi teema loomiseks on põhjalik ülevaade kolmest osast.“
WordPressi teema muutmine - videoõpetus
“See on täpsemate WordPressi videoõpetuste 3. video. See videoõpetus näitab, kuidas töötada mõne WordPressi teemakoodiga, st kuidas lisada automaatvastaja kood blogi külgribale, kuidas panna riba ühte postitusse riba ja muid sarnaseid asju. ”
Kuidas teha WordPressi pistikprogrammi
“Lühike videoõpetus, kuidas teha WordPressi pistikprogrammi.”
Veebisaidi loomine: algusest lõpuni
Kolmeosaline seeria, mis viib teid Photoshopis veebisaidi kujundamisest HTML-i ja CSS-i kodeerimise kaudu.
jQuery veebifilmi juhendaja, autor John Resig
„JQuery javascripti teegi looja John Resig on postitanud veebivideo, kuidas jQuery abil akordionistiilide menüüd teha. Päris põhilised asjad ... aga hea tutvustus jQueryga, kui olete selles uus. "
Järeldus
Kõigi ülaltoodud tasuta ressursside abil loodan, et teil on vabandusi, et sa ei saa saite käsitsi kodeerida. On aeg hüpata jalad märjaks. Ainuüksi ülaltoodud videote jälgimine õpetab teid laadima ja aitab teil täieõiguslikuks veebiarendajaks saada.
Kas teate veel mõnda tasuta videoõpetust? Jätke link allolevatesse kommentaaridesse.
