Thumbnail for #110: Quick Overview of CSS Position Values

#110 Kurzer Überblick über CSS-Positionswerte

Laufzeit: 13:34

Dies ist ein kurzer Überblick für Anfänger über die verschiedenen CSS-Positionswerte. Kurz gesagt: relative erlaubt es Ihnen, „anzustupsen“ und lässt die ursprüngliche Position des Elements im Seitenfluss. Absolute und fixed erlauben eine exakte Platzierung von Elementen und …

Screencast ansehen
Thumbnail for #109: Getting off FTP and onto Git Deployment with Beanstalk

#109 Weg von FTP und hin zu Git Deployment mit Beanstalk

Laufzeit: 25:57

In diesem Screencast migriere ich meine eigene persönliche Website von meinen alten Live-FTP-Bearbeitungsmethoden zu einem ordentlichen, versionierten System inklusive Deployment. Ich habe nicht viel Erfahrung damit, also entschuldigen Sie bitte, wenn es etwas holprig ist.

Wir ...

Screencast ansehen
Thumbnail for #108: Using Chartwell

#108 Chartwell verwenden

Laufzeit: 15:37

Chartwell ist eine Schriftart, die speziell für die Erstellung einfacher und schöner Tortendiagramme, Balkendiagramme und Liniendiagramme entwickelt wurde. Es ist so einfach wie das Aufschreiben einfacher Gleichungen wie 40+20+25+15. In Desktop-Software wie Adobe Illustrator steuern Sie das Diagramm, indem Sie …

Screencast ansehen
Thumbnail for #105: Using SpriteCow

#105 SpriteCow verwenden

Laufzeit: 21:46

In dem ich ein reales Beispiel nehme, wo ich wusste, dass die Verwendung von Sprites eine gute Idee wäre, den Sprite von Hand in Photoshop erstelle (meine bevorzugte Methode) und dann SpriteCow verwende, um die benötigten exakten Positionsangaben zu erhalten …

Screencast ansehen
Thumbnail for #104: Quick Tip: Use Dropbox to Make a Public URL for Anything

#104 Schneller Tipp

Laufzeit: 1:57

Speichern Sie einfach die Website aus dem Browser (in Firefox erhalten Sie eine .html-Datei und alle Ressourcen), legen Sie sie in Ihren Public-Ordner und verwenden Sie das Kontextmenü per Rechtsklick, um die öffentliche URL zu erhalten. …

Screencast ansehen
Thumbnail for #103: Integrating FitVids.js into WordPress

#103 FitVids.js in WordPress integrieren

Laufzeit: 20:58

Das Standard-WordPress-Theme zum Zeitpunkt dieses Screencasts ist TwentyEleven, ein wunderbar einfaches und responsives Design. Das heißt, bis wir ein großartiges YouTube-Video als neuen Blogbeitrag posten und die Responsivität zusammenbricht. Das Video …

Screencast ansehen
Thumbnail for #102: Braindump on Responsive Web Design

#102 Braindump zu Responsive Web Design

Laufzeit: 25:50

In dem ich die absoluten Grundlagen dessen zeige und erkläre, was „responsive Web Design“ bedeutet. Dann gehe ich überall hin und zeige Beispiele, verwandte Ressourcen, relevante Personen, Tipps und Tricks und mehr. …

Screencast ansehen
Thumbnail for #101: Let’s Suck at GitHub Together

#101 Lasst uns gemeinsam bei GitHub versagen

Laufzeit: 18:25

Sie sind sich wahrscheinlich ziemlich bewusst, warum die Verwendung von Versionskontrolle eine gute Sache ist. Falls nicht, gehe ich in diesem Video kurz darauf ein. Dann kommen wir zu der grundlegendsten Sache, die wir tun können: ein ...

Screencast ansehen
Thumbnail for #100: Let’s Write Semantic Markup

#100 Lasst uns semantischen Markup schreiben

Laufzeit: 01:02:07

Wir verbringen eine ganze Stunde damit, uns ein Photoshop-Design anzusehen und HTML5-Markup zu schreiben, das beschreibt, was wir sehen. Wir versuchen, so semantisch wie möglich zu sein und diskutieren die Herausforderungen, die dabei auftreten. Wir tun nicht …

Screencast ansehen
Thumbnail for #98: Playing with Body Borders

#98 Mit Body-Rändern spielen

Laufzeit: 23:13

Einen Rand um das Innere des Browserfensters zu legen ist eine so einfache kleine Idee und kann ein schöner Designeffekt sein. Aber wie machen wir das so, dass die Ränder beim Scrollen der Seite nicht verschwinden? …

Screencast ansehen
Thumbnail for #97: Intro to CSS Animations

#97 Einführung in CSS-Animationen

Laufzeit: 30:50

Animationen können, wie Übergänge, Seitenelemente über die Zeit verändern. Animationen sind in vielerlei Hinsicht mächtiger und komplexer. Sie müssen eine Animation mit einer speziellen Syntax deklarieren, bevor Sie sie verwenden können, was Ihnen erlaubt, Werte anzugeben …

Screencast ansehen
Thumbnail for #96: localStorage for Forms

#96 localStorage für Formulare

Laufzeit: 26:31

HTML5 hat eine unglaublich einfache Methode zum Speichern persistenter Daten namens localStorage. Nativ rufen Sie einfach eine Methode mit Schlüssel/Wert-Paar auf und das wird (so ziemlich) für immer gespeichert. Wenn Sie den Schlüssel kennen, können Sie ihn jederzeit abrufen. Dies …

Screencast ansehen
Thumbnail for #94: Intro to Pseudo Elements

#94 Einführung in Pseudo-Elemente

Laufzeit: 18:37

Pseudo-Elemente sind sichtbare Elemente auf einer Webseite, die nicht „im DOM“ sind oder aus HTML erstellt wurden, sondern stattdessen direkt aus CSS eingefügt werden. Dies ermöglicht Ihnen, viele nette Design-Dinge zu tun, ohne den Markup zu verunreinigen. Pseudo …

Screencast ansehen
Thumbnail for #93: CSS3 Slideup Boxes

#93 CSS3 Slideup-Boxen

Laufzeit: 18:27

Folgen Sie uns, während wir ein paar sehr einfache CSS3-Übergänge verwenden, um einen „Slideup“-Box-Effekt zu erzeugen. Fahren Sie mit der Maus über die Box, und der Titel der Box gleitet aus dem Weg und ein beschreibenderer, stilisierter …

Screencast ansehen
Thumbnail for #92: Code Walkthrough of Drawing Table

#92 Code-Walkthrough der Zeichen-Tabelle

Laufzeit: 34:19

Die Zeichen-Tabelle ist im Wesentlichen eine Mini-Single-Page-jQuery-Anwendung. Sie hat eine Hauptfunktion: das Erstellen eines farbigen Designs durch Ändern der Farben von Zellen in einer HTML-Tabelle. Sie hat jedoch viele Funktionen, um dies so einfach wie möglich zu machen …

Screencast ansehen

Kostenlose Videokurse

Videokurs (2015)

Alles, was du über SVG wissen musst

Die Verwendung von SVG kann sehr einfach sein, aber wenn du anfängst, dich damit zu beschäftigen, gibt es *viel* über SVG zu wissen. In dieser Serie lernst du, warum SVG ein so wichtiger Bestandteil der Website-Erstellung ist. Von der Frage, warum SVG nützlich ist und wie du es bekommst, bis hin zur Implementierung als System und schicken Dingen wie der Animation.

Zum Kurs →