Se lancer dans la conception web peut être assez difficile. Pour les lecteurs, il existe des tonnes d'excellents tutoriels gratuits en ligne. Cependant, certaines personnes trouvent que l'instruction visuelle est plus efficace pour leur style d'apprentissage.
Les vidéos pédagogiques sont un outil d’apprentissage incroyablement riche et pourraient bien être ce dont vous avez besoin pour enfin apprendre le développement Web correctement. Nous avons compilé une liste de plus de 30 excellents screencasts pour les débutants dans diverses technologies et disciplines Web.
NetTuts
NetTuts est l’un des meilleurs fournisseurs de contenu gratuit lié à l’apprentissage de la conception Web. Ils regorgent d'articles et de didacticiels vidéo destinés aux apprenants de tous les niveaux. En voici quelques exemples pour les débutants en HTML5, CSS3 et JavaScript.
Le guide ultime pour créer une conception et la convertir en HTML et CSS
«Ce screencast servira d’entrée finale dans une série en plusieurs parties sur les sites TUTS, qui montre comment créer une belle page d’accueil pour une entreprise fictive. Nous avons appris à créer le fil de fer sur Vectortuts +; nous avons ajouté de la couleur, des textures et des effets sur Psdtuts +; Maintenant, nous allons prendre notre PSD terminé et le convertir en un site Web HTML et CSS bien codé.
Comment faire en sorte que tous les navigateurs rendent correctement le balisage HTML5: Screencast
HTML 5 fournit de nouvelles fonctionnalités intéressantes aux concepteurs Web qui souhaitent coder des mises en page lisibles et ayant un sens sémantique. Cependant, la prise en charge de HTML 5 continue d'évoluer et Internet Explorer est la dernière à l'ajouter. Dans ce didacticiel, nous allons créer une mise en page commune en utilisant certains des nouveaux éléments sémantiques de HTML 5, puis utiliser JavaScript et CSS pour rendre notre conception rétrocompatible avec Internet Explorer. Oui, même IE 6.?
Comment construire un menu de navigation de style lampe à lave
Un de nos lecteurs a demandé un tutoriel sur la façon de créer un menu de style lampe à lave. Heureusement, c'est une tâche assez simple, surtout lorsque vous utilisez une bibliothèque JavaScript. Nous allons en construire un à partir de zéro aujourd'hui.
JavaScript de Null: Série vidéo
Cette série de screencast se concentre exclusivement sur JavaScript et vous emmènera de votre première? Bonjour, Monde? alerter sur des sujets plus avancés.
Comment convertir un fichier PSD en XHTML
"Je suis toujours étonné par la qualité de Collis". Construire un site de portefeuille élégant à partir de zéro. tutoriel continue à effectuer. Cela fait des mois, et pourtant, il affiche toujours de bons chiffres chaque semaine. Compte tenu de ce fait, j'ai décidé de créer un screencast qui vous montre exactement comment convertir un fichier PSD en XHTML / CSS parfait.?
Trancher et dés que PSD
Dans le didacticiel vidéo d'aujourd'hui, nous allons découper un fichier PSD, le découper en dés pour le Web et le servir sur une assiette bien chaude. Notre conception affiche un net? Web 2.0 "et est une gracieuseté de Joefrey de ThemeForest.net. Assurez-vous de visiter son profil si vous en avez la chance.?
Doctype TV
Les collaborateurs de Doctype diffusent de fréquents screencasts sur des sujets variés liés à la conception de sites Web. Vous trouverez ci-dessous des vidéos pour vous familiariser avec Ajax, la conception basée sur une grille, les colonnes CSS3 et la construction de votre premier plugin jQuery.
Conception basée sur la grille et AJAX 101
«Nick donne un aperçu de la conception basée sur une grille et Jim explique en détail les principes de base d’AJAX.
Colonnes CSS3 et plugins jQuery
«Nick déconstruit les dispositions CSS multi-colonnes et Jim vous explique, étape par étape, comment créer votre propre plugin jQuery.
TutVid
TutVid est un site tutoriel de conception de sites Web qui propose des vidéos d’instruction gratuites. Vous pouvez également acheter une vidéo donnée pour recevoir une version téléchargeable de résolution supérieure ainsi que tous les fichiers de projet associés. Ci-dessous, nous allons examiner quelques-uns des didacticiels disponibles dans Dreamweaver.
Dreamweaver CS4: balises de style avec CSS
En savoir plus sur le style des balises et sur la rédaction de code CSS dans Dreamweaver. À la fin de ce didacticiel, vous comprendrez comment écrire du code CSS, comment il fonctionne et comment écrire votre code CSS dans Dreamweaver.?
14 étapes: Comment utiliser les divs
«Nous allons examiner un grand nombre de choses que vous voulez être sûr de savoir avant de commencer à utiliser Divs. Apprenez tout sur le placement et l'utilisation de Divs, ainsi que sur leur style avec CSS dans Dreamweaver !?
Créer un document XML de base
Dans cette vidéo, nous allons rapidement passer en revue XML, ce qu’il est et à quoi il sert. Nous allons ensuite nous asseoir et écrire notre tout premier document XML, une simple liste de six personnes. Nous allons utiliser Dreamweaver, mais tout éditeur de texte convient parfaitement. Nous couvrirons la création d’écriture du langage réel, l’ajout d’attributs, ainsi que la manière dont nous créons nos propres balises et quelques bases pour vous aider à rédiger votre propre document XML.
Créer un site Web CSS complet
Dans cette vidéo, nous allons commencer par un dossier d’images et, dans environ 30 minutes, créer une mise en page très simple à 2 colonnes en utilisant CSS pour styliser notre page! Nous allons tout apprendre sur l'utilisation des divs, la création de règles CSS, le ciblage de ces divs, la création d'un arrière-plan et bien plus encore! Commencez à apprendre à exploiter la puissance brute des feuilles de style en cascade pour créer, mettre en forme et styliser vos pages Web dès aujourd'hui !?
Forêt thématique
Themeforest est un marché Envato qui vend des modèles de sites Web de différents types (HTML, WordPress, Joomla, etc.). Le site propose également un blog qui publie de temps en temps un contenu très utile. Découvrez les screencasts sur PHP et jQuery ci-dessous.
Plonger dans la série de vidéos PHP (11 parties)
? Aujourd'hui marque le début d'une toute nouvelle série qui vous montrera EXACTEMENT comment démarrer avec PHP. Tout comme avec le? JQuery for Absolute Beginners? série, nous allons commencer à partir de zéro et progressons lentement vers des sujets plus avancés. ?
jQuery for Absolute Beginners
A partir d’aujourd’hui, je lance une série de vidéos quotidiennes qui vous apprendra précisément à utiliser la bibliothèque jQuery dans vos propres projets. Nous allons commencer par télécharger le cadre, créer notre première fonction, examiner la syntaxe, etc.Chaque jour, je publierai un programme d'entraînement de cinq à dix minutes. cela développe ce que vous avez déjà appris. Donc, il n'y a plus de raison de le combattre! Apprenez ce truc et commencez à gagner plus d'argent sur ThemeForest.net grâce à vos nouvelles compétences.
Astuces CSS
Chris Coyier à CSS Tricks diffuse un flux constant de tutoriels vidéo incroyablement éducatifs. Son site propose actuellement 84 captures gratuites téléchargeables qui couvrent diverses techniques et astuces HTML, CSS et JavaScript. Ci-dessous, nous en examinerons six qui devraient être utiles aux débutants.
Conversion d'une maquette Photoshop (partie 1 de 3)
«Dans ce tout premier podcast vidéo, je lance le processus de conversion d'une maquette de site Web Adobe Photoshop en un site Web réel basé sur CSS. C'est assez difficile ici les gens, je suis sûr que ceux-ci seront plus concentrés avec le temps.
Mise en forme CSS
• Etre organisé et utiliser un bon formatage dans vos fichiers CSS peut vous faire économiser beaucoup de temps et de frustration au cours de votre processus de développement et en particulier lors du dépannage. Le format multiligne facilite la navigation dans les attributs mais rend votre fichier très long verticalement. Le format à une seule ligne maintient votre fichier verticalement court, ce qui est agréable pour les sélecteurs de navigation, mais il est plus difficile de parcourir les attributs. Vous pouvez également choisir le mode de regroupement de vos instructions CSS.
Conversion d'une maquette Photoshop: deuxième partie, premier épisode
«Il y a eu BEAUCOUP de bons commentaires sur la première série de conversion d'une maquette Photoshop en HTML / CSS. Alors faisons-le encore! Chaque site Web est différent, il faudra utiliser des techniques de conversion différentes, il y aura donc beaucoup à apprendre cette fois-ci et ce sera différent de la dernière fois.
Concevoir pour WordPress: première partie
Dans la première partie, nous allons télécharger et installer WordPress. Ensuite, nous installerons les? Starkers? thème par Elliot Jay Stocks pour commencer avec une ardoise complètement fraîche pour notre nouveau design. Ça ne sert à rien de commencer avec le thème par défaut, c'est plus gênant que ça en vaut la peine! Dans la deuxième partie, nous allons passer en revue la théorie sous-jacente à la conception pour WordPress et en quoi cela ressemble beaucoup à un «travail modulaire». et réellement commencer à concevoir. Dans la troisième partie, nous terminerons la conception et commencerons par des fonctionnalités plus avancées.
HTML & CSS - Les bases TRES
Cette vidéo est la TRÈS base de ce que HTML et CSS sont, pour le débutant absolu. Les fichiers HTML et CSS ne sont, littéralement, que des fichiers texte. Vous n'avez besoin d'aucun logiciel spécial pour les créer, bien qu'un bon éditeur de code soit utile. Vous pouvez créer ces fichiers sur n’importe quel ordinateur et utiliser votre navigateur Web pour les prévisualiser pendant le développement. Vous pouvez considérer le HTML comme le contenu de votre site Web: un tas de texte et des références à des images encadrées par des balises. CSS est la conception de votre site web. Il cible les balises que vous avez écrites dans votre code HTML et applique le style. Garder ces deux choses séparées est la clé de la qualité de la conception Web.
Construire un site web: Conversion HTML / CSS
Dans la partie 2 de cette série, nous commençons la conversion HTML / CSS de la maquette Photoshop créée dans la première partie. Nous commençons avec un cadre de projet très squelettique. Ensuite, examinons l’organisation des couches de fichiers Photoshop. Ensuite, nous commençons par le bas, en créant les éléments dont nous avons besoin à partir du fichier Photoshop et en écrivant le code HTML et CSS dont nous avons besoin pour faire le travail. Une grande partie du travail n'est pas réellement? Trancher? le fichier Photoshop, mais en le regardant de près et en essayant d’imiter ce qui est fait ici avec le balisage correct et les techniques CSS.?
Victoria Web
Victoria Web est une sorte d’école Web en ligne actuellement en version bêta. Ils ont une petite poignée de didacticiels vidéo gratuits pour les développeurs Web.
Débuter avec PHP
Vous cherchez à apprendre et à créer des applications PHP? Cette vidéo présente les outils utilisés par les professionnels du secteur pour que leurs applications soient opérationnelles rapidement et efficacement.
jQuery Introduction
Introduction au framework JavaScript jQuery. Vous apprendrez à utiliser les sélecteurs CSS afin de modifier des objets DOM, de les faire glisser en dehors de la vue, de les atténuer et de créer des animations personnalisées.
Conception Web complète
Apprenez à créer ce site Web entier de concession du début à la fin. Couvrant diverses techniques telles que les masques de calque, les masques d’écrêtage, les réflexions, les ombres, etc.
ShowMeDo
ShowMeDo est une source de vidéos pédagogiques sur l'utilisation de la technologie et des logiciels open source.
Les bases du Javascript
Dans cette vidéo, je montre les bases du Javascript. La balise commence entre la balise. Cela pourrait aussi être entre les balises. C'est pourquoi nous appelons la fonction message () depuis l'attribut onload de la balise (c'est-à-dire lors du chargement de la page). Afficher un texte simple sur la page html et les boîtes d’alerte, définir une fonction et une clause if / else, nous donne une idée immédiate et générale de ce que Javascript est.
Python à partir de zéro
Cette série de vidéos est une approche très basique de la programmation python pour les débutants. Dans l’espoir que le public reste informé jusqu’aux didacticiels pygame, qui montreront comment créer des jeux en 2D simples sans connaissances préalables de l’infographie.?
Autres sources
Les vidéos ci-dessous proviennent de sources dispersées sur le Web. Il est toujours bon d'apprendre du plus grand nombre de sources différentes possible pour vous assurer de bénéficier d'une formation approfondie.
Créer un modèle WordPress - Partie 1 de 3
"Une présentation détaillée en trois parties pour la création de votre premier thème WordPress."
Modifier le thème WordPress - Didacticiel vidéo
Ceci est la 3ème vidéo de didacticiels vidéo avancés pour WordPress. Ce didacticiel vidéo montre comment utiliser certains codes de thème WordPress, comment ajouter du code de répondeur automatique à la barre latérale du blog, comment mettre une bannière dans un seul message et des éléments similaires.?
Comment faire un plugin wordpress
Un court tutoriel vidéo sur la création d’un plugin wordpress.
Création d'un site Web: du début à la fin
Une série en trois parties qui vous emmène de la conception d’un site Web dans Photoshop jusqu’au codage HTML et CSS.
Tutoriel de film en ligne jQuery par John Resig
John Resig, créateur de la bibliothèque javascript jQuery, a publié une vidéo en ligne sur la création d’un menu de style accordéon à l’aide de jQuery. Jolies choses basiques? mais une bonne introduction à jQuery si vous débutez dans ce domaine.?
Conclusion
Avec toutes les ressources gratuites ci-dessus, j'espère que vous aurez peu d'excuses pour ne pas être en mesure de coder des sites à la main. Il est temps de sauter dans l'eau et de vous mouiller les pieds. Le simple fait de suivre les vidéos ci-dessus vous en apprendra beaucoup et vous aidera à devenir un développeur Web à part entière.
Vous connaissez d'autres didacticiels vidéo gratuits? Laissez un lien dans les commentaires ci-dessous.