Video-Screencasts 2025, April

Wir haben diese acht Navigationsregisterkarten der obersten Ebene, aber Home ist die einzige, die "funktioniert". Nur damit wir einige Seiten zum Arbeiten haben, stubben wir einige Seiten für "

Soweit ich mich erinnern kann, habe ich Google Code Prettify verwendet, um die Syntaxhervorhebung auf den Codeblock in CSS-Tricks anzuwenden. Sie wissen, wo in einer Zeile wie "

Wir haben gerade Prism.js installiert und es funktioniert. In diesem Screencast finden wir ein Thema namens "Tomorrow Theme" und integrieren seine Farben in die Syntax. "

Wir haben ein wenig an Headern gearbeitet, aber wir werden uns mehr mit diesen in diesem Screencast befassen. Header sind ein verdammt wichtiger Aspekt jeder Site. Gut gemacht,"

Jetzt, da wir einen Blogpost-Bereich haben, mit dem wir arbeiten können, können wir uns wirklich mit der Typografie von Blogposts befassen. Wohl die wichtigste Typografie auf der Website, da es "

Ich finde es sehr schön, eine einzelne Datei (.scss) zu haben, die für die überwiegende Mehrheit der Typografie auf der Website bestimmt ist. Normalisieren hat einiges an Typografie "

Typecast (in der Beta zum Zeitpunkt dieser Dreharbeiten) ist eine wirklich nette Web-App zum Spielen mit Web-Typografie. Es gibt Ihnen eine großartige Oberfläche zum Herumspielen "

Wir setzen das Konzept von "Don't Overthink It Grids" fort und bringen Rinnen in das Raster, indem wir nur eine einfache Polsterung verwenden. Wir behalten die Polsternummer "

Bevor wir Typografie machen, dachte ich, wir würden das nervige Problem beheben, bei dem die Bilder außerhalb des Artikelbereichs und des Rasters platzen. Verwenden von "

Jetzt, da wir eine benutzerdefinierte lokale Domäne ausführen, können wir PHP verwenden. Das "P" in MAMP steht für "PHP" =). Die Verwendung von PHP bedeutet, dass wir Includes verwenden können. Zum Beispiel: Unser "

Wir könnten unsere eigenen Sass @mixins schreiben, um bei CSS3-Dingen (wie Farbverläufen) zu helfen, aber es gibt bereits ein Sass-Framework namens Compass, das "

Das Site-Design gestaltet sich sehr gitterartig. Unsere Module werden sehr sauber in einem Raster angeordnet. Aber sind Gitter nicht komplex und seltsam? Und vielleicht wir "

In diesem superschnellen Screencast verwenden wir MAMP, um eine URL einzurichten, die wir für die lokale Entwicklung verwenden können. Dies ist aus mehreren Gründen nützlich: Wir können auf "

Wir führen das Konzept von @ media-Abfragen in CSS ein. Wenn wir Sass in diesem Projekt verwenden, können wir viel trocken bleiben (wiederholen Sie sich nicht). Wir machten"

Wir beginnen damit, den Logotyp ein wenig zu optimieren, fügen dann aber Symbole zum Hauptnavigationssystem hinzu. Als wir die Navigation in Photoshop entworfen haben (Video "

Wir haben in Typekit für Version 10 ein neues Kit eingerichtet. Für das Branding verwenden wir vorerst Proxima Nova Soft und einige andere Schriftarten, die den HF & J-Schriftarten in unserem "

Bisher sieht die eigentliche Website überhaupt nicht so aus wie unser Photoshop-Design. In diesem Screencast beschäftigen wir uns genau damit und beginnen oben mit "

Wir verwenden einige Positionierungstricks, um den linken Rand des Logos und den Hauptinhaltsbereich auszurichten, während der Header weiterhin den linken Rand des "

Das Entfernen des Benutzeragenten-CSS (Standard) aus den meisten Elementen ist normalerweise eine gute Idee. Dies wurde lange Zeit durch "universelle" Resets oder Dinge wie den Eric "

Während wir uns unser Photoshop-Modell ansehen, schreiben wir HTML, um zu beschreiben, was wir sehen. Wir verwenden natürlich HTML5, wann immer es macht "

Wir fangen an, den Text in die Hauptnavigation einzufügen, um zu sehen, wie er passt, an Größen, Farben usw. zu arbeiten. Ein Teil des Textes passt ziemlich genau. "

Wir sind in Photoshop für dieses Design sicherlich nicht für immer "fertig", aber wir haben genug zu tun, um mit der Erstellung dieses Designs im Browser zu beginnen. Nach dem"

Wir beginnen mit der Gestaltung der (Haupt-) Navigation der Site auf oberster Ebene. Wir beginnen mit dem Bildschirm in Desktopgröße (mit einer zugegebenermaßen willkürlichen Breite), aber wir sind "

Wir fügen einige zusätzliche Ebenen unter dem Hauptkopf / Branding-Feld hinzu, um dem "Stapel Papier" -Look zu verleihen. Keine große Metapher oder irgendetwas, es fügt nur etwas Visuelles hinzu "

Die gesamte Site wird auf "Modulen" basieren. Jedes kleine Ding wird buchstäblich in einer Box sein (letztendlich sowohl visuell als auch im Code). Wir"

Dies ist eine Audioaufnahme eines Skype-Anrufs zwischen Erin Kissane und mir. Erin hat das Buch über Content-Strategie geschrieben, also hatte ich das Glück, ihre Hilfe zu bekommen und "

Das Entwerfen im Browser ist cool und alles, aber wenn ich in Photoshop beginne, bin ich am kreativsten, wenn ich es am meisten brauche: wenn ich auf die leere Leinwand schaue. "

Herzlich willkommen! Dies wird eine ziemliche Reise sein, und wie alle Reisen beginnt auch diese mit einem einzigen Schritt. Unser erster Schritt ist die Bestandsaufnahme von "

Diese Neugestaltung ist keine Neugestaltung, nur um sie neu zu gestalten. Ich möchte die Site auf jede erdenkliche Weise verbessern, mit der Sie eine Site verbessern können. Einer der"

Wir haben bereits über die Optimierung von SVG von Hand gesprochen. Manuelle Auswahl von Details und welche Arten von Dingen kombiniert oder entfernt werden können. In diesem"