30 kostenlose Video-Tutorials zum Erlernen von Webdesign
Der Einstieg in das Webdesign kann sehr schwierig sein. Für Leser gibt es unzählige tolle kostenlose Online-Tutorials. Einige Leute finden jedoch, dass visuelle Anweisungen für ihren Lernstil effektiver sind.
Lehrvideos sind ein unglaublich umfangreiches Lernwerkzeug und könnten genau das sein, was Sie brauchen, um die Webentwicklung endlich richtig zu lernen. Wir haben eine Liste von über 30 hervorragenden Screencasts für Anfänger in einer Reihe von Webtechnologien und -disziplinen zusammengestellt.
Entdecken Sie Designressourcen
NetTuts
NetTuts ist einer der besten Anbieter für kostenlose Inhalte zum Erlernen von Webdesign. Sie haben eine Fülle von Artikeln und Video-Tutorials für Lernende auf allen Ebenen. Hier sind einige für Anfänger in HTML5, CSS3 und JavaScript.
Der ultimative Leitfaden zum Erstellen und Konvertieren eines Designs in HTML und CSS
„Dieser Screencast wird als letzter Eintrag in einer mehrteiligen Serie auf den TUTS-Websites dienen, die zeigt, wie eine schöne Homepage für ein fiktives Unternehmen erstellt wird. Wir haben gelernt, wie man das Drahtmodell auf Vectortuts + erstellt. Wir haben Psdtuts + mit Farben, Texturen und Effekten versehen. Jetzt nehmen wir unsere fertige PSD und konvertieren sie in eine gut codierte HTML- und CSS-Website. “
So lassen Sie alle Browser HTML5-Markups korrekt rendern: Screencast
„HTML 5 bietet einige großartige neue Funktionen für Webdesigner, die lesbare, semantisch aussagekräftige Layouts codieren möchten. Die Unterstützung für HTML 5 entwickelt sich jedoch weiter, und Internet Explorer ist der letzte, der Unterstützung hinzufügt. In diesem Tutorial erstellen wir ein gemeinsames Layout mit einigen der neuen semantischen Elemente von HTML 5 und verwenden dann JavaScript und CSS, um unser Design abwärtskompatibel mit Internet Explorer zu machen. Ja, sogar IE 6. ”
So erstellen Sie ein Navigationsmenü im Lava-Lampen-Stil
„Einer unserer Leser bat um ein Tutorial zum Erstellen eines Menüs im Lavalampenstil. Glücklicherweise ist dies eine recht einfache Aufgabe, insbesondere bei Verwendung einer JavaScript-Bibliothek. Wir werden heute einen von Grund auf neu bauen. “
JavaScript von Null: Video Series
"Diese Screencast-Serie konzentriert sich ausschließlich auf JavaScript und führt Sie von Ihrem ersten" Hallo, Welt "-Alarm zu fortgeschritteneren Themen."
So konvertieren Sie eine PSD in XHTML
„Ich bin weiterhin erstaunt darüber, wie gut Collis 'Tutorial„ Erstellen einer schlanken Portfolio-Site von Grund auf neu “weiterhin funktioniert. Es ist Monate her, aber es gibt jede Woche immer noch starke Zahlen. Angesichts dieser Tatsache habe ich beschlossen, einen Screencast zu erstellen, der Ihnen genau zeigt, wie Sie eine PSD in perfektes XHTML / CSS konvertieren. “
Slice and Dice diese PSD
„Im heutigen Video-Tutorial werden wir eine PSD in Scheiben schneiden, für das Web in Würfel schneiden und auf einer warmen Kochplatte servieren. Unser Design vermittelt ein ordentliches "Web 2.0" -Gefühl und wurde von Joefrey von ThemeForest.net zur Verfügung gestellt. Besuchen Sie unbedingt sein Profil, wenn Sie die Chance dazu haben. “
Doctype TV
Die Jungs von Doctype haben regelmäßig Screencasts zu Themen aus dem gesamten Webdesign-Spektrum veröffentlicht. Im Folgenden finden Sie Videos, die Ihnen den Einstieg in Ajax, gitterbasiertes Design, CSS3-Spalten und die Erstellung Ihres ersten jQuery-Plugins erleichtern.
Grid Based Design und AJAX 101
"Nick gibt einen Überblick über das gitterbasierte Design und Jim erklärt die Grundlagen von AJAX."
CSS3-Spalten und jQuery-Plugins
"Nick dekonstruiert mehrspaltige CSS-Layouts und Jim zeigt Ihnen Schritt für Schritt, wie Sie Ihr eigenes jQuery-Plugin erstellen."
TutVid
TutVid ist eine Webdesign-Tutorial-Site, die kostenlose Lehrvideos bietet. Sie können auch ein bestimmtes Video kaufen, um eine herunterladbare Version mit höherer Auflösung zusammen mit den zugehörigen Projektdateien zu erhalten. Im Folgenden sehen Sie einige der verfügbaren Dreamweaver-Tutorials.
Dreamweaver CS4: Styling von Tags mit CSS
„Erfahren Sie alles über das Stylen von Tags und das Schreiben von CSS-Code in Dreamweaver. Am Ende dieses Tutorials haben Sie ein gutes Verständnis dafür, wie Sie CSS schreiben, wie CSS funktioniert und wie Sie Ihren CSS-Code in Dreamweaver schreiben können. “
14 Schritte: Verwendung von Divs
„Wir werden uns eine ganze Reihe von Dingen ansehen, die Sie unbedingt wissen möchten, wenn Sie mit der Verwendung von Divs beginnen. Erfahren Sie alles über das Platzieren und Verwenden von Divs sowie das Stylen mit Divs in Dreamweaver! “
Erstellen Sie ein einfaches XML-Dokument
„In diesem Video werden wir schnell über XML laufen, was es ist und wofür es verwendet wird. Wir werden uns dann hinsetzen und unser erstes XML-Dokument nur eine einfache Liste von sechs Personen schreiben. Wir werden Dreamweaver verwenden, aber wirklich jeder Texteditor ist in Ordnung. Wir werden uns mit dem Erstellen der eigentlichen Sprache, dem Hinzufügen von Attributen sowie dem Erstellen eigener Tags und einigen Grundlagen befassen, damit Sie Ihr eigenes XML-Dokument schreiben können. “
Erstellen Sie eine vollständige CSS-Website
„In diesem Video beginnen wir mit einem Ordner mit Bildern und erstellen in etwa 30 Minuten ein sehr einfaches 2-Spalten-Layout mit CSS, um unsere Seite zu gestalten! Wir werden alles über die Verwendung von Divs, das Erstellen von CSS-Regeln, das Targeting von Divs, das Erstellen eines Hintergrunds und vieles mehr lernen! Lernen Sie noch heute, wie Sie die Leistungsfähigkeit von Cascading Style Sheets nutzen können, um Ihre Webseiten zu erstellen, zu gestalten und zu gestalten! “
Themenwald
Themeforest ist ein Envato-Marktplatz, der Website-Vorlagen verschiedener Typen (HTML, WordPress, Joomla usw.) verkauft. Die Seite hat auch einen Blog, der von Zeit zu Zeit einige wirklich hilfreiche Inhalte veröffentlicht. Schauen Sie sich die Screencasts auf PHP und jQuery unten an.
Eintauchen in die PHP-Videoserie (11 Teile)
„Heute beginnt eine brandneue Serie, die Ihnen GENAU zeigt, wie Sie mit PHP beginnen können. Genau wie bei der Reihe „jQuery for Absolute Beginners“ werden wir bei Null anfangen und uns langsam zu fortgeschritteneren Themen hocharbeiten. ”
jQuery für absolute Anfänger
„Ab heute starte ich eine tägliche Videoserie, in der Sie genau lernen, wie Sie die jQuery-Bibliothek in Ihren eigenen Projekten verwenden. Zunächst laden wir das Framework herunter, erstellen unsere erste Funktion, untersuchen die Syntax und vieles mehr. Jeden Tag werde ich ein fünf- bis zehnminütiges „Trainingsprogramm“ veröffentlichen, das das, was Sie bereits gelernt haben, erweitert. Es gibt also keinen Grund mehr, dagegen anzukämpfen! Lerne diese verdammte Sache und verdiene mehr Geld auf ThemeForest.net mit deinen neu entdeckten Fähigkeiten. “
CSS-Tricks
Chris Coyier von CSS Tricks bringt einen stetigen Strom unglaublich lehrreicher Video-Tutorials heraus. Auf seiner Website stehen derzeit 84 kostenlose Screencasts zum Herunterladen zur Verfügung, die verschiedene HTML-, CSS- und JavaScript-Techniken und -Tipps abdecken. Im Folgenden sehen wir uns sechs an, die für Anfänger hilfreich sein sollten.
Konvertieren eines Photoshop-Modells (Teil 1 von 3)
„In diesem allerersten Video-Podcast starte ich den Konvertierungsprozess eines Adobe Photoshop-Modells einer Website in eine echte Live-CSS-basierte Website. Das ist hier ziemlich rau, Leute, ich bin sicher, dass diese mit der Zeit fokussierter werden. “
CSS-Formatierung
„Wenn Sie organisiert sind und eine gute Formatierung in Ihren CSS-Dateien verwenden, können Sie während Ihres Entwicklungsprozesses und insbesondere bei der Fehlerbehebung viel Zeit und Frust sparen. Das mehrzeilige Format erleichtert das Durchsuchen von Attributen, macht Ihre Datei jedoch vertikal sehr lang. Das einzeilige Format hält Ihre Datei vertikal kurz, was sich gut zum Durchsuchen von Selektoren eignet, aber das Durchsuchen von Attributen ist schwieriger. Sie können auch auswählen, wie Sie Ihre CSS-Anweisungen gruppieren möchten. “
Konvertieren eines Photoshop-Modells: Teil Zwei, Episode Eins
„Bei der ersten Serie zum Konvertieren eines Photoshop-Modells in HTML / CSS gab es VIELE großartige Rückmeldungen. Also lass es uns noch einmal machen! Jede Website ist anders und erfordert unterschiedliche Konvertierungstechniken. Diesmal gibt es also viel zu lernen, das sich vom letzten Mal unterscheidet. “
Entwerfen für WordPress: Teil Eins
„Im ersten Teil werden wir WordPress herunterladen und installieren. Dann werden wir das Thema „Starkers“ von Elliot Jay Stocks installieren, um mit einer völlig neuen Tafel für unser neues Design zu beginnen. Es macht keinen Sinn, mit dem Standardthema zu beginnen, es ist mehr Ärger als es wert ist! In Teil zwei werden wir die Theorie hinter dem Entwerfen für WordPress und wie es ist, „modular zu arbeiten“ durchgehen und tatsächlich mit dem Entwerfen beginnen. In Teil drei werden wir das Design fertigstellen und mit einigen erweiterten Funktionen beginnen. “
HTML & CSS - Die SEHR Grundlagen
„Dieses Video ist für den absoluten Anfänger die SEHR Grundlagen von HTML und CSS. HTML- und CSS-Dateien sind buchstäblich nur Textdateien. Sie benötigen keine spezielle Software, um sie zu erstellen, obwohl ein netter Code-Editor hilfreich ist. Sie können diese Dateien auf jedem Computer erstellen und mit Ihrem Webbrowser eine Vorschau während der Entwicklung anzeigen. Sie können sich HTML als Inhalt Ihrer Website vorstellen: eine Reihe von Texten und Verweisen auf Bilder, die in Tags eingeschlossen sind. CSS ist das Design Ihrer Website. Es zielt auf die Tags ab, die Sie in Ihrem HTML geschrieben haben, und wendet den Stil an. Diese beiden Dinge getrennt zu halten, ist der Schlüssel zu qualitativ hochwertigem Webdesign. “
Erstellen einer Website: HTML / CSS-Konvertierung
„In Teil 2 dieser Serie beginnen wir mit der HTML / CSS-Konvertierung des in Teil 1 erstellten Photoshop-Modells. Wir beginnen mit einem sehr skelettartigen Projektrahmen. Dann werfen wir einen Blick auf die Organisation der Photoshop-Dateiebene. Dann beginnen wir von unten nach oben, erstellen die benötigten Teile aus der Photoshop-Datei und schreiben den HTML- und CSS-Code, den wir für die Erledigung der Aufgabe benötigen. Ein Großteil der Arbeit besteht nicht darin, die Photoshop-Datei zu „schneiden“, sondern sie genau zu betrachten und zu imitieren, was dort mit korrekten Markup- und CSS-Techniken gemacht wird. “
Victoria Web
Victoria Web ist eine Art Online-Webschule, die sich derzeit in der Beta befindet. Sie haben eine kleine Handvoll kostenloser Video-Tutorials für Webentwickler.
Erste Schritte mit PHP
„Möchten Sie mit dem Lernen und Erstellen von PHP-Anwendungen beginnen? Dieses Video zeigt Tools, die von Branchenfachleuten verwendet werden, um ihre Anwendungen schnell und effektiv zum Laufen zu bringen. “
jQuery Einführung
„Einführung in das jQuery JavaScript-Framework. Sie lernen, wie Sie CSS-Selektoren verwenden, um DOM-Objekte zu ändern, sie ein- und auszublenden, auszublenden und benutzerdefinierte Animationen zu erstellen. “
Gesamtes Webdesign
„Lernen Sie, diese gesamte Händler-Website von Anfang bis Ende zu erstellen. Es werden verschiedene Techniken wie Ebenenmasken, Schnittmasken, Reflexionen, Schatten und mehr behandelt. “
ShowMeDo
ShowMeDo ist eine Quelle für Lehrvideos zum Arbeiten mit Open-Source-Technologie und -Software.
Die Grundlagen von Javascript
„In diesem Video zeige ich die Grundlagen von Javascript. Das Tag beginnt zwischen dem Tag. Es könnte sich auch zwischen dem Tag befinden. Aus diesem Grund rufen wir die Funktion message () innerhalb des Attributs onload im Tag auf (dh wenn die Seite geladen wird). Die Ausgabe von einfachem Text auf der HTML-Seite und in den Warnfeldern, die Definition einer Funktion und einer if / else-Klausel gibt uns ein unmittelbares und allgemeines Gefühl dafür, was Javascript ist. “
Python von Null
„Diese Videoserie ist ein sehr grundlegender Ansatz für die Python-Programmierung für Anfänger. In der Hoffnung, dass das Publikum bis zu den Pygame-Tutorials auf dem Laufenden bleibt, die zeigen, wie man einfache 2D-Spiele ohne Vorkenntnisse in Computergrafik erstellt. “
Andere Quellen
Die folgenden Videos stammen aus verstreuten Quellen im Internet. Es ist immer gut, aus so vielen verschiedenen Quellen wie möglich zu lernen, um sicherzustellen, dass Sie eine gründliche Ausbildung erhalten.
Erstellen einer WordPress-Vorlage - Teil 1 von 3
"Ein ausführlicher dreiteiliger Durchgang zum Erstellen Ihres ersten WordPress-Themas."
Ändern Sie WordPress Theme - Video Tutorial
„Dies ist das dritte Video der Advanced WordPress Video Tutorials. Dieses Video-Tutorial zeigt, wie man mit einigen WordPress-Themencodes arbeitet, wie man Autoresponder-Code zur Blog-Seitenleiste hinzufügt, wie man Banner in einen einzelnen Beitrag einfügt und ähnliches. “
Wie erstelle ich ein WordPress-Plugin?
"Ein kurzes Video-Tutorial zum Erstellen eines WordPress-Plugins."
Erstellen einer Website: Von Anfang bis Ende
Eine dreiteilige Serie, die Sie vom Entwerfen einer Website in Photoshop bis zur Codierung in HTML und CSS führt.
jQuery Online Movie Tutorial von John Resig
„John Resig, Schöpfer der JQuery-Javascript-Bibliothek, hat ein Online-Video veröffentlicht, in dem erläutert wird, wie mit jQuery ein Menü im Akkordeonstil erstellt wird. Ziemlich einfaches Zeug… aber eine gute Einführung in jQuery, wenn Sie neu in diesem Bereich sind. “
Fazit
Mit all den oben genannten kostenlosen Ressourcen hoffe ich, dass Ihnen die Ausreden ausgehen, Websites nicht manuell codieren zu können. Es ist Zeit, einzuspringen und die Füße nass zu machen. Wenn Sie nur den obigen Videos folgen, lernen Sie viel und werden auf dem besten Weg sein, ein vollwertiger Webentwickler zu werden.
Kennen Sie weitere kostenlose Video-Tutorials? Hinterlassen Sie einen Link in den Kommentaren unten.
