12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten

Wenn Sie im Web arbeiten, können Sie Ihre Fähigkeiten niemals zum Stillstand bringen. Während die grundlegenden Tools und Sprachen, die es seit Jahren gibt, Ihnen gute Dienste leisten, tauchen ständig neuere Technologien, Bibliotheken und Frameworks auf, und obwohl Sie unmöglich alle im Auge behalten können, lohnt es sich, auf dem neuesten Stand zu sein Geschwindigkeit mit den beliebtesten Ergänzungen zum Web-Toolkit.

Um Ihnen dabei zu helfen, Lücken in Ihrem Web-Know-how zu schließen, haben wir einige der besten Tutorials für die beliebtesten neuesten Webdesign-Technologien und -Techniken zusammengestellt, die alles von abdecken CSS-Animation bis hin zu JavaScript-Frameworks und Web-Typografie. Lesen Sie weiter, um Ihrem Web-Know-how einen ernsthaften Schub zu geben.

01. Erstellen Sie eine WebGL 3D-Landingpage

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: Erstellen Sie eine WebGL 3D-Landingpage



Eine 3D-Landingpage ist eine todsichere Möglichkeit, Besucher zu beeindrucken(Bildnachweis: Web Designer)

Eine WebGL 3D-Landingpage ist eine hervorragende Möglichkeit, die Aufmerksamkeit von Personen zu erregen, sobald diese auf Ihre Website gelangen. Mit WebGL können Sie erstaunliche 3D-Inhalte im Browser erstellen, ohne dass Plugins erforderlich sind, und Ihre Website funktioniert auf allen modernen Browsern sowie auf Mobilgeräten und Tablets. Dieses WebGL 3D-Tutorial zeigt, wie eine dramatische Landing Page mit einem 3D-Objekt erstellt wird, das sich als Reaktion auf die Maus bewegt, sowie farbenfrohen Partikeleffekten.

Microsoft Surface Pro Black Friday 2019

02. Beginnen Sie mit WebVR

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: Beginnen Sie mit WebVR

Probieren Sie WebVR für ein wirklich beeindruckendes Erlebnis aus(Bildnachweis: Web Designer)

Für ein umfassenderes 3D-Projekt ist WebVR genau das Richtige. Es ist eine JavaScript-API zum Erstellen von 3D-Virtual-Reality-Erlebnissen im Browser und eine reichhaltige VR in Konsolenqualität, die auf Desktop-Browsern und Mobilgeräten in Echtzeit gerendert wird. Mit ein bisschen JavaScript-Wissen und Dieses WebVR-Tutorial Sie werden bald auf dem Weg sein, Ihre erste WebVR-Erfahrung zu erstellen.

03. Crashkurs reagieren

Heutzutage können Sie sich nicht nur auf Vanille-JavaScript verlassen, wenn Sie großartige Web-Apps erstellen möchten. Wenn Sie die besten Ergebnisse erzielen möchten, müssen Sie React zu Ihrer Liste der Webfähigkeiten hinzufügen. Es ist die beliebteste JavaScript-Bibliothek im Block und wird von großen Websites wie Facebook (wo sie entwickelt wurde), Instagram und Netflix verwendet. Dieses Video-Tutorial von Mosh Hamedani hilft Ihnen beim Einstieg. Für einen detaillierteren Blick folgen Sie dieser Reaktionskurs .

04. So erstellen Sie eine App mit Vue.js.

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: So erstellen Sie eine App mit Vue.js.

Verwendung des Farbersetzungswerkzeugs in Photoshop CC
Machen Sie sich mit den Grundlagen von Vue.js vertraut(Bildnachweis: Netzmagazin)

Ein weiteres nützliches JavaScript-Framework ist Vue.js. Es ist leicht zu erlernen, da es im Vergleich zu Mitbewerbern eine relativ kleine Bibliothek ist, in einfachem HTML, CSS und JavaScript geschrieben ist und die Dokumentation regelmäßig aktualisiert wird. Im dieses Vue.js Tutorial Sie lernen die Grundstruktur einer Vue-App kennen und erfahren, wie Sie mit Vue Ihre eigene Blog-App mit vollem Funktionsumfang erstellen.

05. So fügen Sie Ihrer Website schnell Mikrointeraktionen hinzu

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: So fügen Sie Ihrer Website schnell Mikrointeraktionen hinzu

Fügen Sie Ihrer Site visuelles Interesse mit Mikrointeraktionen hinzu(Bildnachweis: TutsPlus)

Mikrointeraktionen sind eine hervorragende Möglichkeit, Ihrer Website visuelles Interesse zu verleihen und die Zugänglichkeit zu verbessern. Es handelt sich um kleine, subtile Animationen, die Sie Elementen hinzufügen können, um visuelles Feedback zu geben, wenn Sie darauf klicken oder mit der Maus darüber fahren. Das Hinzufügen von Animationen zu Ihrer Website ist möglicherweise sehr aufwändig, insbesondere wenn Sie nichts über Animationen wissen. Hier ist eine einfache Möglichkeit, dies mit Micron.js zu tun.

06. Flexbox Schritt für Schritt

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: Flexbox Schritt für Schritt

Erstellen Sie Weblayouts, die genauso gut aussehen wie die gedruckte Seite(Bildnachweis: Interneting ist schwer)

Für die Erstellung reaktionsfähiger Websites, die in jedem Browser gut aussehen, ist Flexbox das Tool, über das Sie Bescheid wissen müssen. Sie können damit Layouts im Magazinstil ohne die Einschränkungen von Floats oder, falls wir nicht vergessen, Tabellen erstellen und haben die vollständige Kontrolle über Ausrichtung, Richtung, Reihenfolge und Größe Ihrer Seitenelemente. Dies Schritt für Schritt Flexbox-Tutorial führt Sie durch alles, was Sie wissen müssen.

Feinpunktstift für Android Tablet

07. Erstellen Sie animierte CSS-Grafiken

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: Erstellen Sie animierte CSS-Grafiken

Wer hätte gedacht, dass CSS so bezaubernd sein kann?(Bildnachweis: Tiffany Choong)

Das Erstellen von CSS-Bildern im Browser ist nicht so einfach wie beispielsweise das einfache Zeichnen in Photoshop. Grundsätzlich zeichnen Sie Vektorgrafiken mit CSS-Code, und es kann einiges an Kopfkratzen und Experimentieren erfordern, bevor Sie es richtig machen. Der Vorteil der Erstellung von CSS-Formen besteht jedoch darin, dass sie leichtgewichtig und einfach zu animieren sind, sobald Sie herausgefunden haben, was Sie tun. Dieses CSS-Animations-Tutorial wird Ihnen den Einstieg erleichtern.

08. Hinzufügen von Animationen zu SVG mit CSS

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: Hinzufügen von Animationen zu SVG mit CSS

CSS und SVG: ein Match, das im animierten Himmel gemacht wurde(Bildnachweis: Zukunft)

Hier ist eine weitere Möglichkeit, um gut aussehende Webanimationen zu erstellen. Mit CSS können Sie einzelne Pfade in einem SVG-Bild steuern, um verschiedene Effekte zu erzielen. Wenn Sie die Grundlagen kennen, können Sie diese Techniken verwenden, um gewöhnliche Symbole in etwas Beeindruckenderes zu verwandeln. Es ist eine gute Möglichkeit, Mikrointeraktionen auf Ihrer Website zu implementieren, und die Möglichkeiten sind endlos. Befolgen Sie diese Anleitung, um SVG mit CSS eine Animation hinzuzufügen um mehr herauszufinden.

09. HTML Canvas Tutorial

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: HTML Canvas-Tutorial

Das Canvas-Element ist ein leistungsstarkes Tool zum Erstellen von Grafiken im Browser(Bildnachweis: W3Schools)

Eine dritte Möglichkeit, Grafiken im Browser zu generieren, ist die Verwendung des HTML-Canvas-Elements. Mit ihm können Sie Grafiken und Text zeichnen, Farbverläufe erstellen und alles animieren sowie interaktive Elemente hinzufügen. Es ist für alles geeignet, von einfachen Grafiken bis hin zu HTML-Spielen Dieses Tutorial von W3Schools deckt alle diese Anwendungen ab.

10. So beginnen Sie mit variablen Schriftarten im Web

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: So beginnen Sie mit variablen Schriftarten im Web

Mit variablen Schriftarten können Sie Ihre typografischen Instinkte in Aufruhr versetzen(Image credit: Zeichenschatz)

Die größte Entwicklung in der Web-Typografie seit Web-Schriftarten. Variable Schriftarten sind Schriftarten, die sich wie mehrere Schriftarten verhalten können und Ihnen alle benötigten Gewichte und Stile in einer einzigen, relativ kleinen Datei bieten, die Sie über Stylesheets steuern können. Diese Online-Grundierung erklärt Ihnen alles, was Sie wissen müssen, um das Beste aus ihnen herauszuholen. Sie können auch mehr darüber lesen variable Schriftarten hier .

11. Erstellen Sie eine PWA von Grund auf neu

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: Erstellen Sie eine PWA von Grund auf neu

wie man huion h610 pro benutzt
Lernen Sie die Grundlagen des Aufbaus Ihrer eigenen PWA kennen(Bildnachweis: ITNext / Yassine Benabbas)

Wenn Sie leichtgewichtige Websites erstellen möchten, die auf jedem Gerät funktionieren und nicht einmal eine Internetverbindung benötigen, sind Progressive Web Apps der richtige Weg. Diese Kurzanleitung zu PWAs von Yassine Benabbas führt Sie durch die vier Hauptschritte, die Sie kennen müssen - Vorbereiten einer App-Shell, Hinzufügen eines Manifests, Implementieren eines Servicemitarbeiters und Zwischenspeichern -, um eine PWA von Grund auf neu zu erstellen.

12. Erstellen Sie einen Chatbot mit KI-Unterstützung

12 Webdesign-Tutorials, um Ihre Fähigkeiten auf dem neuesten Stand zu halten: Erstellen Sie einen Chatbot mit KI-Unterstützung

Verwenden Sie die maschinellen Lernwerkzeuge von Google, um Ihre Nutzer zufrieden zu stellen(Bildnachweis: Netzmagazin)

Künstliche Intelligenz ist ein umfangreiches und komplexes Thema, aber es ist überraschend einfach, es so umzusetzen, dass Ihr Leben viel einfacher wird. In diesem AI Chatbot Tutorial Sie erfahren, wie Sie mithilfe von KI einen Chatbot in natürlicher Sprache erstellen, mit dem Benutzer mit Ihrer Website interagieren können. Es basiert auf dem Dialogflow-Toolset von Google und verwendet maschinelles Lernen und Sprache-zu-Text. Es kann an Ihre Bedürfnisse angepasst und in Form eines Widgets zu Ihrer Website hinzugefügt werden.

Zum Thema passende Artikel: