Es gibt nichts, wovor man sich in dieser neuen, großartigen Welt des Preprocessings fürchten muss. Native Apps machen es so einfach, dass es ein wichtiger Bestandteil jedes modernen Workflows sein sollte. In diesem Video haben wir ein einfaches Projekt in …

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 …

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 ...

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 …

LiveReload ist eine Mac-only Menüleisten-App, die für Webentwickler sehr hilfreich ist. Sagen Sie ihr einfach, sie soll einen bestimmten Ordner überwachen, und wenn eine Datei gespeichert wird, wird der Browser automatisch aktualisiert und zeigt die Änderung an. Kein Bedarf also für …

Es gibt viele Tools, die Screenshots von Websites in verschiedenen Browsern anzeigen, um beim Testen zu helfen. Aber ein Screenshot ist auf vielerlei Weise unzureichend: kein Klicken, kein Hovern, kein Tippen, kein Größenverändern, kein Testen von JavaScript oder anderen interaktiven …

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 …

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. …

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 …

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. …

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 ...

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 …

HTML5 hat eine Reihe von formularspezifischen Funktionen, die alle Formulare im Web verbessern. Die Browserunterstützung für die Funktionen ist sehr unterschiedlich, aber viele der Funktionen können als progressive Verbesserung betrachtet werden, so dass, wenn es …

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? …

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 …

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 …

Es stellt sich heraus, dass es einen einfachen Weg gibt, Verläufe auf Rändern zu erzielen. Das hat mich aber länger gekostet, als es sollte. Dieser Screencast deckt alle Wege ab, die ich ausprobiert und angesehen habe.

Demo anzeigen…

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 …

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 …

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 …