Der Einstieg in das Webdesign kann ziemlich schwierig sein. Für Leser gibt es jede Menge tolle kostenlose Online-Tutorials. Einige Menschen empfinden jedoch den visuellen Unterricht als effektiver für ihren Lernstil.
Lehrvideos sind ein unglaublich reichhaltiges Lernwerkzeug und könnten genau das sein, was Sie benötigen, um die Webentwicklung endlich richtig zu erlernen. Wir haben eine Liste von über 30 hervorragenden Screencasts für Anfänger in einer Reihe von Webtechnologien und -disziplinen zusammengestellt.
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 eines Designs und zum Konvertieren in HTML und CSS
Dieser Screencast dient als abschließender Beitrag in einer mehrteiligen Serie über die TUTS-Standorte hinweg, in der gezeigt wird, wie man eine schöne Startseite für ein fiktives Unternehmen erstellt. Wir haben gelernt, wie wir das Wireframe für Vectortuts + erstellen können. wir haben Farbe, Texturen und Effekte auf Psdtuts + hinzugefügt; Jetzt nehmen wir unsere fertige PSD und wandeln sie in eine schön codierte HTML- und CSS-Website um.
So machen Sie alle Browser zum korrekten Rendern von HTML5-Markierungen: Screencast
HTML 5 bietet einige großartige neue Funktionen für Webdesigner, die lesbare, semantisch sinnvolle Layouts erstellen möchten. Die Unterstützung für HTML 5 entwickelt sich jedoch weiter und Internet Explorer ist die letzte, die Unterstützung hinzufügt. In diesem Lernprogramm erstellen wir ein allgemeines Layout mit einigen neuen semantischen Elementen von HTML 5. Anschließend verwenden Sie JavaScript und CSS, um unser Design rückwärtskompatibel mit Internet Explorer zu machen. Ja, auch IE 6.?
So erstellen Sie ein Lava-Lampenstil-Navigationsmenü
Einer unserer Leser bat um ein Tutorial, wie man ein Lava-Lampenstil-Menü baut. Zum Glück ist dies eine recht einfache Aufgabe, insbesondere wenn Sie eine JavaScript-Bibliothek verwenden. Wir werden heute einen von Grund auf bauen.
JavaScript von Null: Videoserie
Diese Screencast-Serie konzentriert sich ausschließlich auf JavaScript und führt Sie von Ihrem ersten "Hallo, Welt" -Netzwerk aus. auf fortgeschrittenere Themen aufmerksam machen.
So konvertieren Sie eine PSD in XHTML
„Ich bin immer noch erstaunt darüber, wie gut Collis eine schlanke Portfolio-Site von Grund auf neu erstellen kann. Das Tutorial wird weiterhin ausgeführt. Es sind schon Monate vergangen, trotzdem gibt es jede Woche starke Zahlen. In Anbetracht dieser Tatsache habe ich beschlossen, einen Screencast zu erstellen, der genau zeigt, wie man eine PSD in perfektes XHTML / CSS umwandelt.?
Schneiden Sie und schneiden Sie diese PSD
Im heutigen Video-Tutorial schneiden wir eine PSD auf, schneiden sie für das Web ab und servieren sie auf einer warmen heißen Platte. Unser Design hat ein ordentliches "Web 2.0" -Gefühl und wird 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 sendeten regelmäßig Screencasts zu Themen aus dem gesamten Webdesign-Spektrum. Nachfolgend finden Sie Videos zum Einstieg in Ajax, gitterbasiertes Design, CSS3-Spalten und das Erstellen Ihres ersten jQuery-Plugins.
Netzbasiertes Design und AJAX 101
Nick gibt einen Überblick über das gitterbasierte Design, und Jim fasst die Grundlagen von AJAX zusammen.
CSS3-Spalten und jQuery-Plugins
Nick dekonstruiert CSS-Layouts mit mehreren Spalten, und Jim zeigt Ihnen Schritt für Schritt, wie Sie Ihr eigenes jQuery-Plugin erstellen.
TutVid
TutVid ist eine Website zum Erstellen von Webdesigns, die kostenlose Anleitungsvideos anbietet. 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 werden einige der verfügbaren Dreamweaver-Lernprogramme beschrieben.
Dreamweaver CS4: Tags mit CSS gestalten
Erfahren Sie alles über das Erstellen von Tags und das Erstellen von CSS-Code in Dreamweaver. Am Ende dieses Tutorials haben Sie ein gutes Verständnis dafür, wie man CSS schreibt, wie CSS funktioniert und wie Sie Ihren CSS-Code in Dreamweaver schreiben können.
14 Schritte: So verwenden Sie Divs
Wir werden uns eine ganze Reihe von Dingen ansehen, die Sie wissen wollen, wenn Sie Divs einsetzen. Erfahren Sie alles über das Platzieren und Verwenden von Divs sowie das Styling mit CSS in Dreamweaver !?
Erstellen Sie ein XML-Basisdokument
In diesem Video werden wir uns schnell mit XML beschäftigen, was es ist und wofür es verwendet wird. Wir werden uns dann zusammensetzen und unser allererstes XML-Dokument erstellen, eine einfache Liste von sechs Personen. Wir werden Dreamweaver verwenden, aber eigentlich ist jeder Texteditor in Ordnung. Wir werden das Erstellen der eigentlichen Sprache, das Hinzufügen von Attributen sowie das Erstellen eigener Tags und einige Grundlagen für das Schreiben Ihres eigenen XML-Dokuments behandeln.
Erstellen Sie eine vollständige CSS-Website
In diesem Video beginnen wir mit einem Ordner mit Bildern und konstruieren in etwa 30 Minuten ein sehr einfaches 2-Spalten-Layout mit CSS, um unsere Seite zu stylen! Wir lernen alles über die Verwendung von divs, das Erstellen von CSS-Regeln, das Targeting von divs, das Erstellen eines Hintergrunds und vieles mehr! Lernen Sie, wie Sie die rohen Möglichkeiten von Cascading Style Sheets nutzen können, um Ihre Webseiten noch heute zu erstellen, zu gestalten und zu gestalten !?
Themenwald
Themeforest ist ein Marktplatz von Envato, der Website-Vorlagen verschiedener Arten (HTML, WordPress, Joomla usw.) verkauft. Die Website hat auch einen Blog, der von Zeit zu Zeit einige wirklich hilfreiche Inhalte veröffentlicht. Schauen Sie sich die Screencasts zu PHP und jQuery unten an.
Einstieg in die PHP-Videoserie (11 Teile)
Heute markiert der Beginn einer brandneuen Serie, die Ihnen GENAU zeigt, wie Sie mit PHP beginnen. Genau wie bei der? JQuery für absolute Anfänger? In dieser Serie werden wir von vorne anfangen und uns langsam auf fortgeschrittenere Themen vorbereiten. ?
jQuery für absolute Anfänger
Ab heute starte ich eine tägliche Videoserie, in der Sie PRÄZISION lernen, wie Sie die jQuery-Bibliothek in Ihren eigenen Projekten verwenden. Wir werden mit dem Herunterladen des Frameworks beginnen, unsere erste Funktion erstellen, die Syntax untersuchen und vieles mehr.Jeden Tag poste ich ein fünf bis zehn Minuten langes Trainingsprogramm. das erweitert sich auf das, was Sie bereits gelernt haben. Es gibt also keinen Grund mehr, dagegen anzukämpfen! Lerne diese Sache und verdiene mit deinen neuen Fähigkeiten auf ThemeForest.net mehr Geld.?
CSS-Tricks
Chris Coyier bei CSS Tricks bringt einen stetigen Strom von unglaublich lehrreichen Video-Tutorials heraus. Auf seiner Website können derzeit 84 kostenlose Screencasts heruntergeladen werden, die verschiedene HTML-, CSS- und JavaScript-Techniken und Tipps abdecken. Im Folgenden werden wir uns sechs ansehen, 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 CSS-basierte Live-Website. Das ist ziemlich grob hier, Leute, ich bin mir sicher, dass diese mit der Zeit fokussierter werden.?
CSS-Formatierung
Durch die Organisation und Verwendung einer guten Formatierung in Ihren CSS-Dateien können Sie während des Entwicklungsprozesses und vor allem bei der Fehlerbehebung viel Zeit und Frustration sparen. Das mehrzeilige Format erleichtert das Durchsuchen von Attributen, macht die Datei jedoch vertikal sehr lang. Das einzeilige Format hält Ihre Datei vertikal kurz, was für das Durchsuchen von Selektoren hilfreich ist, 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: Zweiter Teil, Episode Eins
Es gab viele positive Rückmeldungen zu der ersten Serie "Konvertieren eines Photoshop-Mockups in HTML / CSS". Also machen wir es nochmal! Jede Website ist anders und erfordert andere Konvertierungstechniken, so dass es diesmal viel zu lernen gibt, das sich vom letzten Mal unterscheidet.?
Für WordPress entwerfen: Teil Eins
Im ersten Teil werden wir WordPress herunterladen und installieren. Dann installieren wir die? Starkers? Thema von Elliot Jay Stocks, um mit einem völlig frischen Schiefer für unser neues Design zu beginnen. Es macht keinen Sinn, mit dem Standarddesign zu beginnen, es ist mehr Ärger als es wert ist! In Teil zwei werden wir die Theorie hinter dem Entwerfen für WordPress durchgehen und wie es ist, modular zu arbeiten. und fangen Sie tatsächlich an zu entwerfen. In Teil drei werden wir das Design fertigstellen und mit einigen erweiterten Funktionen beginnen.
HTML & CSS - Die SEHR Basics
Dieses Video ist die SEHR Basis für das, was HTML und CSS für den absoluten Anfänger ist. HTML- und CSS-Dateien sind buchstäblich nur Textdateien. Sie benötigen keine spezielle Software, um sie zu erstellen, obwohl ein guter Code-Editor hilfreich ist. Sie können diese Dateien auf jedem Computer erstellen und mit Ihrem Webbrowser während der Entwicklung eine Vorschau anzeigen. Sie können sich HTML als Inhalt Ihrer Website vorstellen: eine Menge Text und Verweise auf Bilder, die in Tags eingebettet sind. CSS ist das Design Ihrer Website. Es zielt auf die Tags, die Sie in Ihrem HTML-Code 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 Photoshop-Modells, das wir in Teil 1 erstellt haben. Wir beginnen mit einem sehr skelettartigen Projektrahmen. Dann werfen wir einen Blick auf die Organisation der Photoshop-Dateilayer. Dann beginnen wir von unten nach oben, erstellen die benötigten Teile aus der Photoshop-Datei und schreiben HTML und CSS, um die Arbeit zu erledigen. Ein Großteil der Arbeit ist nicht wirklich "Schneiden". die Photoshop-Datei, aber genau hinschauen und versuchen zu simulieren, was dort mit korrekter Markup- und CSS-Technik gemacht wird.?
Victoria Web
Victoria Web ist eine Art Online-Webschule, die sich derzeit in der Beta-Phase befindet. Sie haben eine kleine Handvoll kostenlose Video-Tutorials für Webentwickler.
Erste Schritte mit PHP
Möchten Sie anfangen, PHP-Anwendungen zu lernen und zu erstellen? Dieses Video zeigt Tools, die von Branchenexperten eingesetzt werden, um ihre Anwendungen schnell und effektiv zum Laufen zu bringen.
jQuery Einführung
Einführung in das jQuery-JavaScript-Framework. Sie lernen, wie man CSS-Selektoren verwendet, um DOM-Objekte zu ändern, sie ein- und auszublenden, einzublenden und benutzerdefinierte Animationen zu erstellen.
Gesamtes Webdesign
Erfahren Sie, wie Sie die gesamte Händlerseite von Anfang bis Ende erstellen. Es werden verschiedene Techniken behandelt, z. B. Ebenenmasken, Schnittmasken, Spiegelungen, Abschattungen usw.
ShowMeDo
ShowMeDo ist eine Quelle für Lehrvideos zum Umgang 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 auch zwischen dem Tag sein. Aus diesem Grund rufen wir die Funktion message () innerhalb des Attributs onload im Tag auf (dh, wenn die Seite geladen wird). Durch die Ausgabe von einfachem Text auf der HTML-Seite und den Warnfeldern, die Definition einer Funktion und einer if / else-Klausel erhalten Sie ein sofortiges und allgemeines Gefühl für das, was Javascript ist.?
Python von Null
Diese Videoserie ist ein grundlegender Ansatz für die Python-Programmierung für Anfänger. In der Hoffnung, dass das Publikum bis zu den Pygame-Tutorials getunnelt bleibt, wird gezeigt, wie man einfache 2D-Spiele ohne Vorkenntnisse in der Computergrafik erstellt.
Andere Quellen
Die folgenden Videos stammen aus verschiedenen Quellen im Web. Es ist immer gut, von so vielen verschiedenen Quellen wie möglich zu lernen, um sicherzustellen, dass Sie eine fundierte Ausbildung erhalten.
Erstellen einer WordPress-Vorlage - Teil 1 von 3
Eine ausführliche dreiteilige Anleitung zum Erstellen Ihres ersten WordPress-Themas.
Ändern Sie das WordPress-Theme - Video-Tutorial
Dies ist das 3. Video der Advanced WordPress Video Tutorials. Dieses Video-Tutorial zeigt, wie man mit einigen WordPress-Theme-Codes arbeitet, wie man Autoresponder-Code in die Blog-Sidebar einfügt, wie man Banner in den einzelnen Beitrag setzt und ähnliche Dinge.?
Wie man ein WordPress Plugin macht
Ein kurzes Video-Tutorial zum Erstellen eines WordPress-Plugins.
Erstellen einer Website: Von Anfang bis Ende
Eine dreiteilige Serie, die Sie vom Erstellen einer Website in Photoshop bis hin zum Codieren 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 zum Erstellen eines Akkordeon-Menüs mit jQuery veröffentlicht. Ziemlich einfaches Zeug? aber eine gute Einführung in jQuery, wenn Sie neu bei diesem Thema sind.
Fazit
Mit all den oben genannten freien Ressourcen hoffe ich, dass Ihnen die Entschuldigungen für das Nicht-Codieren von Websites fehlen. Es ist an der Zeit, die Füße nass zu machen. Wenn Sie nur die oben genannten Videos verfolgen, lernen Sie Ihre Lasten und werden Sie auf dem besten Weg, ein vollwertiger Webentwickler zu werden.
Kennen Sie weitere kostenlose Video-Tutorials? Hinterlassen Sie einen Link in den Kommentaren.