Att komma igång med webbdesign kan vara ganska svårt. För läsare finns det massor av bra gratis handledning online. Vissa människor finner emellertid visuell instruktion för att vara effektivare för sin inlärningssätt.
Instruktionsvideor är ett otroligt rikt lärande verktyg och kan vara precis vad du behöver för att äntligen lära dig webbutveckling korrekt. Vi har sammanställt en lista med över 30 utmärkta screencasts för nybörjare över ett antal webbtekniker och discipliner.
NetTuts
NetTuts är en av de bästa leverantörerna där ute för gratis innehåll relaterat till lärande webbdesign. De har en mängd artiklar och videohandledning för elever på alla nivåer. Här är några för nybörjare i HTML5, CSS3 och JavaScript.
Den ultimata guiden för att skapa en design och konvertera den till HTML och CSS
? Den här skärmbilden kommer att fungera som den sista posten i en serie med flera delar på TUTS-sidorna som visar hur man bygger en vacker hemsida för ett fiktivt företag. Vi lärde oss hur man skapar wireframe på Vectortuts +; Vi lade till färg, texturer och effekter på Psdtuts +; nu tar vi vår färdiga PSD och konverterar den till en snyggkodad HTML- och CSS-webbplats.?
Så här gör du alla webbläsare Renderar HTML5 Mark-up korrekt: Screencast
? HTML 5 ger några bra nya funktioner för webbdesigners som vill koda läsbara, semantiskt meningsfulla layouter. Stöd för HTML 5 utvecklas dock fortfarande, och Internet Explorer är det sista som lägger till stöd. I den här handledningen skapar vi en gemensam layout med några av HTML 5: s nya semantiska element. Använd sedan JavaScript och CSS för att göra vår design bakåtkompatibel med Internet Explorer. Ja, även IE 6.?
Hur man bygger en Lava-Lamp Style Navigation Meny
? En av våra läsare begärde en handledning om hur man bygger en lava-lampa-stilmeny. Lyckligtvis är det en ganska enkel uppgift, särskilt när du använder ett JavaScript-bibliotek. Vi ska bygga en från början idag.?
JavaScript från Null: Video Series
? Denna screencast-serie fokuserar uteslutande på JavaScript, och tar dig från din första? Hej World? varna upp till mer avancerade ämnen.?
Så här konverterar du en PSD till XHTML
? Jag fortsätter att bli förvånad över hur bra Collis är? Bygg en elegant portföljwebbplats från scratch? handledning fortsätter att utföra. Det har varit månader, men det lägger fortfarande in starka siffror varje vecka. Med tanke på det faktum bestämde jag mig för att skapa en skärmdump som visar dig exakt hur man konverterar en PSD till perfekt XHTML / CSS.?
Slice and Dice som PSD
? I dagens video handledning slicerar vi upp en PSD, slår den på nätet och serverar den på en varm hetta. Vår design sport är snygg? Web 2.0 "känner och kommer med artighet av Joefrey från ThemeForest.net. Var noga med att besöka hans profil om du har chansen.?
Doctype TV
Killarna i Doctype lägger ut vanliga screencasts på ämnen som sträcker sig över hela webbdesignspektrumet. Nedan hittar du videor för att komma igång på Ajax, nätbaserad design, CSS3-kolumner och bygga ditt första jQuery-plugin.
Grid Based Design och AJAX 101
? Nick ger en översikt över nätbaserad design och Jim bryter ner grunderna i AJAX.?
CSS3-kolumner och jQuery-plugins
? Nick dekonstruerar CSS-flerspelets layouter och Jim visar dig steg för steg hur du skapar din egen jQuery-plugin.?
TutVid
TutVid är en webbdesignswebbplats som erbjuder gratis instruktionsvideor. Du kan också köpa en viss video för att få en uppladdningsbar version med högre upplösning tillsammans med eventuella projektfiler. Nedan ser vi på några av de tillgängliga Dreamweaver-handledningarna.
Dreamweaver CS4: Styling Taggar med CSS
? Lär dig allt om styling-taggar och hur man skriver CSS-kod i Dreamweaver. I slutet av denna handledning får du en bra förståelse för hur du skriver CSS, hur CSS fungerar, och hur du kan skriva din CSS-kod i Dreamweaver.?
14 steg: hur man använder divs
? Vi ska ta en titt på en hel massa saker du vill veta när du börjar använda Divs. Lär dig allt om att placera och använda Divs samt utforma dem med CSS i Dreamweaver !?
Skapa ett grundläggande XML-dokument
? I den här videon kör vi snabbt över XML, vad det är och vad det används för. Vi ska sedan sätta ner och skriva ut vårt allra första XML-dokument bara en enkel lista över sex personer. Vi kommer att använda Dreamweaver, men verkligen är en textredigerare bra. Vi kommer att täcka att skapa skrivning av det aktuella språket, lägga till attribut, liksom hur vi skapar egna taggar och bara några grunder för att få dig att skriva ditt eget XML-dokument.?
Skapa en fullständig CSS-webbplats
? I den här videon börjar vi med en mapp med bilder och på cirka 30 minuter konstruerar vi en mycket enkel 2 kolumnlayout med hjälp av CSS för att ställa in vår sida! Vi lär oss allt om att använda div, skapa CSS-regler, rikta in div, skapa en bakgrund och så mycket mer! Börja lära dig att utnyttja den råa kraften i Cascading Style Sheets för att skapa, layout och stil dina webbsidor idag !?
Themeforest
Themeforest är en Envato-marknadsplats som säljer webbplatskartor av olika slag (HTML, WordPress, Joomla, etc.). Webbplatsen har också en blogg som postar något riktigt användbart innehåll från tid till annan. Kolla in screencasts på PHP och jQuery nedan.
Dykning till PHP Video Series (11 delar)
? Idag markerar början på en helt ny serie som visar dig EXACTLY hur man kommer igång med PHP. Precis som med "jQuery for Absolute Beginners"? serier, börjar vi från början och jobbar långsamt upp till några mer avancerade ämnen. ?
jQuery för absoluta nybörjare
? Från och med idag lanserar jag en daglig videoserie som lär dig att använda JQuery-biblioteket i dina egna projekt. Vi börjar med att ladda ner ramverket, skapa vår första funktion, undersöka syntax och mer.Varje dag lägger jag upp en träningsplan på fem och tio minuter? som expanderar på vad du redan har lärt dig. Så det finns ingen anledning att bekämpa det längre! Lär dig denna dang sak och börja tjäna mer pengar på ThemeForest.net med dina nyfunna färdigheter.?
CSS Tricks
Chris Coyier över på CSS Tricks skjuter ut en stadig ström av otroligt pedagogiska video tutorials. Hans webbplats har för närvarande 84 gratis att ladda ner screencasts som täcker olika HTML, CSS och JavaScript tekniker och tips. Nedan ser vi på sex som borde vara till nytta för nybörjare.
Konvertera en Photoshop Mockup (del 1 av 3)
? I den här första podcastsändningen börjar jag konverteringsprocessen av en Adobe Photoshop-mockup av en webbplats till en riktigt live CSS-baserad webbplats. Detta är ganska grovt här folk, jag är säker på att dessa kommer att bli mer fokuserade med tiden.?
CSS-formatering
? Att vara organiserade och använda bra formatering i dina CSS-filer kan spara mycket tid och frustration under din utvecklingsprocess och speciellt vid felsökning. Multi-line-formatet gör det enkelt att bläddra attribut, men gör din fil vertikalt väldigt länge. Enkelfiltsformatet håller din fil vertikalt kort, vilket är bra för webbläsare, men det är svårare att bläddra attribut. Du kan också välja hur du vill gruppera dina CSS-uttalanden.?
Konvertera en Photoshop Mockup: Del två, Episod One
? Det har varit massor av bra feedback på den första serien om att konvertera en Photoshop Mockup till HTML / CSS. Så låt oss göra det igen! Varje webbplats är annorlunda kommer att kräva olika konverteringsteknik, så det kommer att finnas gott att lära sig denna gång som kommer att skilja sig från förra gången.?
Utformning för WordPress: Del 1
? I del ett, kommer vi att ladda ner och installera WordPress. Då ska vi installera? Starkers? tema av Elliot Jay Stocks för att börja med en helt ny skiffer för vår nya design. Ingen mening börjar med standardtemat, det är mer problem än det är värt! I del två kommer vi att gå över teorin bakom att designa för WordPress och hur är det som att arbeta modulärt? och faktiskt komma igång med att designa. I del tre kommer vi att avsluta designen och börja med lite mer avancerad funktionalitet.?
HTML & CSS - The Very Basic
? Den här videon är mycket grundläggande för vad HTML och CSS är, för den absoluta nybörjaren. HTML och CSS-filer är ganska bokstavligen bara textfiler. Du behöver ingen speciell programvara för att skapa dem, även om en bra kodredigerare är till hjälp. Du kan skapa dessa filer på vilken som helst dator och använd din webbläsare för att förhandsgranska dem under utveckling. Du kan tänka på HTML som innehållet på din webbplats: en massa text och referenser till bilder som är inslagna i taggar. CSS är utformningen av din webbplats. Det riktar sig till taggarna du skrev i HTML och tillämpar stilen. Att hålla dessa två saker separata är nyckeln till kvalitets webbdesign.?
Bygga en webbplats: HTML / CSS-konvertering
? I del 2 i denna serie börjar vi HTML / CSS-omvandlingen av Photoshop-mockupen som vi skapade i del ett. Vi börjar med ett mycket skelettprojekt ramverk. Då tar vi en titt på Photoshop-fillagringsorganisationen. Sedan börjar vi från botten upp, skapa de bitar vi behöver från Photoshop-filen och skriva HTML och CSS vi behöver för att få jobbet gjort. Mycket av jobbet är egentligen inte? Skivning? Photoshop-filen, men tittar noga på det och försöker efterlikna vad som görs där med korrekt markup- och CSS-tekniker.?
Victoria Web
Victoria webben är en slags online webbskola som för närvarande är i beta. De har en liten handfull gratis video tutorials för webbutvecklare.
Komma igång med PHP
? Vill du börja lära och skapa PHP-applikationer? Denna video visar verktyg som används av branschpersonal för att få sina program snabbt och effektivt att komma igång.?
jQuery Introduktion
? Introduktion till jQuery JavaScript-ramverket. Du kommer lära dig hur du använder CSS-selektorer för att ändra DOM-objekt, skjuta dem in och ut ur visning, blekna och skapa anpassade animeringar.?
Hela webbdesign
? Lär dig att skapa hela denna återförsäljare webbplats från början till slut. Täcker olika tekniker som lager masker, klippmaskar, reflektioner, skuggning och mer.?
ShowMeDo
ShowMeDo är en källa till instruktionsvideor om att arbeta med öppen källkodsteknik och programvara.
Grunderna i Javascript
? I den här videon visar jag grunderna i Javascript. Taggen börjar mellan taggen. Det kan också vara mellan taggen. Det är därför vi kallar funktionen meddelande () från inloggningsattributet i taggen (det vill säga när sidan laddas). Att utfärda enkel text på html-sidan och varningslådor, definiera en funktion och en if / else-klausul ger oss en omedelbar och allmän känsla av vad Javascript är.?
Python från noll
? Denna serie av videor är ett mycket grundläggande tillvägagångssätt för pythonprogrammering för nybörjare. I hopp om att publiken kommer att bli tunnad tills pygamehandledningen, som visar hur man gör enkla 2D-spel utan förkunnande om datorgrafik.?
Andra källor
Videon nedan är från utspridda källor runt om i webben. Det är alltid bra att lära av så många separata källor som möjligt för att du ska få en grundlig utbildning.
Skapa en WordPress-mall - Del 1 av 3
? En djupgående tre del går igenom för att skapa ditt första WordPress-tema.?
Ändra WordPress Theme - Video Tutorial
? Detta är den tredje videon av Advanced WordPress Video Tutorials. Den här videotutorialen visar hur man arbetar med vissa WordPress-temakoder, det vill säga hur man lägger till autosvarkod i sidbalkan på bloggen, hur man lägger banner i samma inlägg och liknande saker.?
Hur man gör ett wordpress-plugin
? En kort videohandledning om hur man gör ett wordpress-plugin.?
Skapa en webbplats: Från Start till Slut
En serie med tre delar som tar dig från att designa en webbplats i Photoshop hela vägen genom kodning i HTML och CSS.
jQuery Online Movie Tutorial av John Resig
? John Resig, skapare av jQuery javascript bibliotek, har lagt upp en online video om hur man gör en dragspel stil meny med jQuery. Ganska grundläggande grejer? men en bra intro till jQuery om du är ny på detta.
Slutsats
Med alla de fria resurserna ovan hoppas jag att du är ute med ursäkter för att du inte kan koda webbplatser för hand. Det är dags att hoppa i en få dina fötter våta. Att bara följa med videoklippen ovan kommer att lära dig massor och kommer att få dig bra på väg till att bli en fullfjädrad webbutvecklare.
Känner du till några mer gratis video tutorials? Lämna en länk i kommentarerna nedan.