Iniziare nel web design può essere abbastanza difficile. Per i lettori ci sono tantissime fantastiche esercitazioni gratuite online. Tuttavia, alcune persone ritengono che l'istruzione visiva sia più efficace per il loro stile di apprendimento.
I video didattici sono uno strumento di apprendimento incredibilmente ricco e potrebbero essere proprio ciò di cui hai bisogno per imparare finalmente lo sviluppo del web in modo appropriato. Abbiamo compilato un elenco di oltre 30 screencast eccellenti per principianti in una serie di tecnologie e discipline web.
Nettuts
NetTuts è uno dei migliori fornitori là fuori per contenuti gratuiti relativi all'apprendimento del web design. Hanno una ricchezza di articoli e video tutorial per studenti a tutti i livelli. Ecco alcuni per principianti in HTML5, CSS3 e JavaScript.
La guida definitiva per creare un design e convertirlo in HTML e CSS
? Questo screencast servirà come la voce finale in una serie multi-parte attraverso i siti TUTS che dimostra come costruire una bella home page per un business immaginario. Abbiamo imparato come creare il wireframe su Vectortuts +; abbiamo aggiunto colori, trame ed effetti su Psdtuts +; ora, prenderemo il nostro PSD completo e lo convertiremo in un sito Web HTML e CSS ben codificato.
Come rendere tutti i browser che eseguono il markup HTML5 correttamente: Screencast
? HTML 5 offre alcune fantastiche nuove funzionalità per i web designer che desiderano codificare layout leggibili e semanticamente significativi. Tuttavia, il supporto per HTML 5 è ancora in evoluzione e Internet Explorer è l'ultimo ad aggiungere supporto. In questo tutorial, creeremo un layout comune utilizzando alcuni nuovi elementi semantici di HTML 5, quindi utilizzeremo JavaScript e CSS per rendere il nostro progetto retrocompatibile con Internet Explorer. Sì, anche IE 6.?
Come costruire un menu di navigazione in stile lava-lampada
"Uno dei nostri lettori ha richiesto un tutorial su come costruire un menu in stile lava-lamp. Fortunatamente, è un compito abbastanza semplice, soprattutto quando si utilizza una libreria JavaScript. Ne costruiremo uno da zero oggi.?
JavaScript da Null: serie video
? Questa serie di screencast si concentra esclusivamente su JavaScript e ti porterà dal tuo primo? Hello, World? avvisare su argomenti più avanzati.?
Come convertire un PSD in XHTML
? Continuo a essere stupito da quanto bene di Collis? Costruire un elegante portafoglio sito da zero? il tutorial continua ad esibirsi. Sono passati mesi, ma registra ancora numeri forti ogni settimana. Considerato questo, ho deciso di creare uno screencast che ti mostra esattamente come convertire un PSD in XHTML / CSS perfetto.
Slice and Dice that PSD
"Nel video tutorial di oggi, affettiamo un PSD, lo tagliamo per il Web e lo serviamo su una piastra calda. Il nostro design sfoggia un look "Web 2.0" accurato e viene fornito da Joefrey di ThemeForest.net. Assicurati di visitare il suo profilo se ne hai la possibilità.
Doctype TV
I ragazzi di Doctype pubblicano frequenti screencast su argomenti che spaziano in tutto lo spettro del web design. Qui di seguito troverai i video per iniziare con Ajax, design basato su griglia, colonne CSS3 e creare il tuo primo plug-in jQuery.
Grid Based Design e AJAX 101
"Nick offre una panoramica del design basato sulla griglia e Jim analizza le basi di AJAX."
Colonne CSS3 e plugin jQuery
"Nick decostruisce i layout multi-colonna CSS e Jim ti mostra passo dopo passo come creare il tuo plugin jQuery."
TutVid
TutVid è un sito di tutorial sul web design che offre video didattici gratuiti. È anche possibile acquistare un determinato video per ricevere una versione scaricabile ad alta risoluzione insieme a qualsiasi file di progetto associato. Di seguito esamineremo alcuni tutorial di Dreamweaver disponibili.
Dreamweaver CS4: tag di stile con CSS
? Scopri tutto sui tag di stile e su come scrivere il codice CSS in Dreamweaver. Alla fine di questo tutorial avrai una buona conoscenza di come scrivere CSS, come funzionano i CSS e come puoi scrivere il tuo codice CSS in Dreamweaver.
14 Passi: Come usare Div
? Daremo un'occhiata a un sacco di cose che vuoi essere sicuro di sapere quando inizi a usare Div. Scopri tutto su come posizionare e usare Divs e come abbinarli a CSS in Dreamweaver !?
Creare un documento XML di base
? In questo video correremo rapidamente su XML, a cosa serve ea cosa serve. Poi ci sediamo e scriviamo il nostro primo documento XML solo un semplice elenco di sei persone. Useremo Dreamweaver, ma in realtà qualsiasi editor di testo va bene. Tratteremo la creazione della scrittura della lingua attuale, l'aggiunta di attributi e il modo in cui creiamo i nostri tag e solo alcune nozioni di base per iniziare a scrivere il tuo documento XML.
Crea un sito Web CSS completo
? In questo video inizieremo con una cartella di immagini e in circa 30 minuti costruiremo un semplice layout a 2 colonne usando il CSS per modellare la nostra pagina! Impareremo tutto sull'uso di div, sulla creazione di regole CSS, sul targeting di div, sulla creazione di uno sfondo e molto altro ancora! Inizia a imparare a sfruttare la potenza di Cascading Style Sheets per creare, impaginare e modellare le tue pagine web oggi !?
ThemeForest
Themeforest è un marketplace di Envato che vende modelli di siti Web di vario tipo (HTML, WordPress, Joomla, ecc.). Il sito ha anche un blog che pubblica di tanto in tanto alcuni contenuti molto utili. Controlla gli screencast su PHP e jQuery di seguito.
Immergersi nella serie di video PHP (11 parti)
"Oggi segna l'inizio di una nuova serie che ti mostrerà ESATTAMENTE come iniziare con PHP. Proprio come con? JQuery per Absolute Beginners? serie, inizieremo da zero e lentamente avanzeremo verso argomenti più avanzati. ?
jQuery per i principianti assoluti
? A partire da oggi, sto lanciando una serie di video giornalieri che ti insegneranno PRECISAMENTE come utilizzare la libreria jQuery nei tuoi progetti. Inizieremo scaricando il framework, creando la nostra prima funzione, esaminando la sintassi e altro ancora.Ogni giorno pubblicherò un regime di allenamento di cinque-dieci minuti? che si espande su ciò che hai già imparato. Quindi non c'è motivo di combatterlo più! Impara questa cosa e inizia a guadagnare più soldi su ThemeForest.net con le tue nuove abilità.
Trucchi CSS
Chris Coyier alla CSS Tricks spinge fuori un flusso costante di tutorial video incredibilmente educativi. Il suo sito ha attualmente 84 download gratuiti di screencast che coprono varie tecniche e suggerimenti HTML, CSS e JavaScript. Di seguito vedremo sei che dovrebbero essere utili ai principianti.
Conversione di un modello di Photoshop (parte 1 di 3)
? In questo primo podcast video, avvio il processo di conversione di un mockup di Adobe Photoshop di un sito Web in un vero sito Web basato su CSS. Questo è piuttosto difficile qui gente, sono sicuro che questi saranno più focalizzati con il tempo.
Formattazione CSS
Essere organizzati e utilizzare una buona formattazione nei file CSS può farti risparmiare tempo e frustrazioni durante il processo di sviluppo e in particolare durante la risoluzione dei problemi. Il formato a più righe facilita la navigazione degli attributi, ma rende il file verticalmente molto lungo. Il formato a riga singola mantiene il file verticalmente corto, il che è utile per sfogliare i selettori, ma è più difficile sfogliare gli attributi. Puoi anche scegliere come raggruppare le tue istruzioni CSS.
Conversione di un modello di Photoshop: seconda parte, episodio uno
"C'è stato molto feedback sulla prima serie di conversione di un mockup di Photoshop in HTML / CSS. Quindi facciamolo di nuovo! Ogni sito web è diverso richiederà diverse tecniche di conversione quindi ci sarà molto da imparare questa volta che sarà diverso dall'ultima volta.
Progettare per WordPress: prima parte
? Nella prima parte, scaricheremo e installeremo WordPress. Quindi installeremo gli Starker? tema di Elliot Jay Stocks per iniziare con una lavagna completamente nuova per il nostro nuovo design. Non ha senso iniziare con il tema predefinito, è più un problema che ne vale la pena! Nella seconda parte, esamineremo la teoria alla base della progettazione di WordPress e di come funziona? e in realtà inizia la progettazione. Nella terza parte, finiremo il design e inizieremo con alcune funzionalità più avanzate.
HTML e CSS: i principi fondamentali
? Questo video è il MOLTO principio di ciò che HTML e CSS è, per il principiante assoluto. I file HTML e CSS sono, letteralmente, solo file di testo. Non è necessario alcun software speciale per crearli, sebbene un utile editor di codice sia utile. È possibile creare questi file su qualsiasi computer e utilizzare il browser Web per visualizzarli in anteprima durante lo sviluppo. Puoi pensare all'HTML come al contenuto del tuo sito web: un po 'di testo e riferimenti a immagini racchiuse in tag. CSS è il design del tuo sito web. Mira ai tag che hai scritto nel tuo codice HTML e applica lo stile. Mantenere queste due cose separate è la chiave per un web design di qualità.
Costruire un sito Web: conversione HTML / CSS
? Nella parte 2 di questa serie, iniziamo la conversione HTML / CSS del mockup di Photoshop che abbiamo creato nella prima parte. Iniziamo con un framework di progetto molto scheletrico. Quindi diamo un'occhiata all'organizzazione del file layer di Photoshop. Quindi iniziamo dal basso verso l'alto, creando i pezzi di cui abbiamo bisogno dal file Photoshop e scrivendo l'HTML e il CSS di cui abbiamo bisogno per portare a termine il lavoro. Gran parte del lavoro non è in realtà? il file di Photoshop, ma guardandolo da vicino e cercando di imitare ciò che viene fatto lì con il corretto markup e le tecniche CSS.
Victoria Web
Victoria web è una sorta di scuola web online attualmente in beta. Hanno una piccola manciata di video tutorial gratuiti per gli sviluppatori web.
Iniziare con PHP
? Cerchi di iniziare a imparare e creare applicazioni PHP? Questo video dimostra gli strumenti utilizzati dai professionisti del settore per far funzionare le applicazioni rapidamente ed efficacemente.
Introduzione jQuery
? Introduzione al framework jQuery JavaScript. Imparerai come utilizzare i selettori CSS per modificare gli oggetti DOM, spostandoli dentro e fuori dalla vista, dissolvendo e creando animazioni personalizzate.
Tutto il Web Design
? Impara a creare l'intero sito Web della concessionaria dall'inizio alla fine. Coprendo varie tecniche come maschere di livello, maschere di ritaglio, riflessioni, ombre e altro ancora.
ShowMeDo
ShowMeDo è una fonte di video didattici su come lavorare con tecnologia e software open source.
Le basi di Javascript
? In questo video mostro le basi di Javascript. Il tag inizia tra il tag. Potrebbe anche essere tra il tag. Questo è il motivo per cui chiamiamo la funzione message () dall'attributo onload nel tag (Ovvero, quando la pagina viene caricata). L'output di testo semplice nella pagina html e nelle caselle di avviso, la definizione di una funzione e una clausola if / else ci danno un'idea immediata e generale di cosa sia Javascript.
Python da zero
? Questa serie di video è un approccio molto basilare alla programmazione Python per principianti. Nella speranza che il pubblico rimanga sintonizzato fino alle esercitazioni di pygame, che mostreranno come realizzare semplici giochi 2D senza conoscenze precedenti della computer grafica.
Altre fonti
I video qui sotto provengono da fonti sparse sul web. È sempre utile imparare dal maggior numero possibile di fonti separate per assicurarsi di ricevere un'istruzione completa.
Creazione di un modello WordPress - Parte 1 di 3
? Un approfondito in tre parti a piedi per creare il tuo primo tema WordPress.?
Modifica tema WordPress - Esercitazione video
? Questo è il 3 ° video di video tutorial WordPress avanzati. Questo tutorial video mostra come lavorare con alcuni codici tema di WordPress, cioè come aggiungere il codice di autorisponditore alla barra laterale del blog, come mettere il banner nel singolo post e cose simili.
Come creare un plugin per wordpress
? Un breve video tutorial su come realizzare un plugin per wordpress.?
Creazione di un sito Web: dall'inizio alla fine
Una serie in tre parti che ti porta dalla progettazione di un sito Web in Photoshop fino alla codifica in HTML e CSS.
jQuery Online Movie Tutorial di John Resig
"John Resig, creatore della libreria javascript di jQuery, ha pubblicato un video online su come creare un menu di stili di fisarmonica usando jQuery. Cose piuttosto semplici? ma una buona introduzione a jQuery se sei nuovo a questo.?
Conclusione
Con tutte le risorse gratuite di cui sopra, spero che tu stia finendo le scuse per non essere in grado di codificare i siti a mano. È ora di saltare in bagno. Solo seguire insieme ai video sopra ti insegnerà un sacco di cose e ti aiuterà a diventare uno sviluppatore web completo.
Conosci altri video tutorial gratuiti? Lascia un link nei commenti qui sotto.