Video-Screencasts 2025, April

Das Design für Kommentare könnte sehr einfach aussehen. Und es ist! Aber ich denke einfach ist in diesem Fall effektiv. Kommentare sind ein so wichtiger Bestandteil von CSS-Tricks "

Wir beginnen hier mit Photoshop und entwerfen den Kommentarbereich. Wir beginnen oben, dh die einzelnen Kommentare selbst (im Gegensatz zu den "

Wir beginnen mit einem Blick auf einige der Grunzarbeiten, die ich hinter den Kulissen gemacht habe, um einige Dinge zu konkretisieren, die getan werden mussten. Wie im Rest von "

Wir sind kurz davor, die Homepage des Snippets-Bereichs der Website zu erstellen. Sofort fangen wir an, Dinge zu optimieren und mehr Dinge in "

Mit dem Design für den Snippets-Bereich "fertig" können wir nun in eine gewisse Interaktivität übergehen (sprich: JavaScript). Wir fügen einen super lahmen Rollover für die Links auf "

Wir haben jetzt ein Photoshop-Design für die Homepage des Snippets-Bereichs. Es ist viel durchsuchbarer als zuvor, hält aber den Regenbogen "

Zeit, in den Snippets-Bereich einzutauchen! Das heißt, der eigentliche Inhaltsbereich davon. Wir haben den Header bereits installiert. Der Snippets-Bereich ist sehr beliebt. "

In diesem Screencast schließen wir den Almanach-Abschnitt ab. Es gibt eine ziemlich klare Hierarchie im Almanach. Es geht: Start> Almanach Start> Eigenschaft oder Auswahl> "

Wir springen hier nur ein kleines bisschen vorwärts. Dies ist eine ziemlich umfassende Screencast-Serie, aber es sind nur ungefähr 40 Stunden und natürlich dieses eigentliche Projekt. "

Wir haben bereits lokal in einer lokalen Domain (v10.whatup) gearbeitet. Jetzt ist es Zeit, sich mit WordPress zu beschäftigen. Wir werden vor Ort weiterarbeiten "

Wir haben den gesamten Inhalt, den wir für diese Seitenausgabe benötigen, und wir haben den Header installiert. Jetzt können wir CSSin 'den Inhalt in das Design starten, in das wir gehen "

Wenn wir mit der Arbeit in WordPress beginnen, ist es am besten, wenn wir uns eine exakte Kopie der Live-Datenbank schnappen, mit der wir lokal arbeiten können. Einige Websites haben Dinge wie "

Nachdem wir uns bemüht haben, den richtigen Inhalt auf der Homepage des Almanachs zu finden, können wir uns mit CSS mit dem eigentlichen Styling befassen. Wir beschlossen zu gehen "

In diesem Screencast beschäftigen wir uns hauptsächlich mit dem orangefarbenen "Photostar", der die Fußzeile dominiert. Wir machen den Stern in einer separaten Datei in Photoshop, damit wir "

Der Kopfball für den Alamanc ist eingegangen, diesmal von Giovanni Difeterici. Wir verwenden viele Techniken, die wir bereits etabliert haben, um loszulegen. "

Die benutzerdefinierte Header-Illustration für den Video-Bereich ist eingegangen, diesmal von Alyssa Nassner. Wir verbringen ein wenig Zeit damit, die Photoshop-Datei zu organisieren und "

In diesem letzten Screencast zum Aufbau der Fußzeile arbeiten wir an der unteren Fußzeile, in der sich die Bereiche CodePen und ShopTalk befinden. Wir müssen den HTML-Code ändern a "

In diesem Screencast konzentrieren wir uns auf die Linien unter den Links im oberen Teil der Fußzeile. Wir stolpern herum und finden heraus, welche Dinge "

Der Schnipselkopf ist hereingekommen, diesmal von Reagan Ray. Wir verbringen diesmal ein wenig Zeit in Photoshop und mischen die Dinge ein wenig herum, um sicherzustellen, dass wir "

Mit der HTML-Struktur für die Fußzeile haben wir alles, was wir brauchen, um mit dem Styling zu beginnen und diese Fußzeile so aussehen zu lassen, wie wir sie in Photoshop entworfen haben. "

Dies ist die letzte Photoshop-Arbeit, die wir speziell für die Fußzeile ausführen, bevor wir mit dem eigentlichen Erstellen beginnen. In diesem Screencast haben wir "

Wir arbeiten daran, ein Design für die Fußzeile in Photoshop zu erstellen. Schnelle Erinnerung: Ich arbeite in Photoshop, weil ich mich dort kreativer fühle, bevor ich überspringe. "

In diesem Screencast kommen wir zu etwas mehr Photoshoppin-Geschäft und legen die unterste Fußzeile mit Links zu meinen beiden größten anderen Projekten, CodePen, an.

Wir begeben uns auf die große Reise, die die Fußzeile ist! CSS-Tricks hatten schon immer eine große, schicke Fußzeile und dieses Design wird keine Ausnahme sein. Es ist nicht rein "

Mit unserem Design für die Fußzeile, das in Photoshop einsatzbereit ist, können wir es in unser statisches HTML- und CSS-Modell integrieren. Der erste Schritt ist zu geben "

Wir haben eine weitere BSA-Zone, die in die Site integriert werden soll. Dieser sollte ein bisschen einfacher sein, da wir das JavaScript bereits installiert haben und es nur "

Wir haben ein Modell davon, wie unsere BuySellAds-Zonen aussehen sollen. Lassen Sie uns also damit beginnen, sie wirklich zu erstellen. Die BuySellAds-Website bietet den Code, den wir benötigen. "

Das einzige, was jetzt in unserer Kopfzeile der Zollforen fehlt, ist der Teil, in dem tatsächlich "Foren" steht! Nick illustrierte eine Hand mit einem Schild, das gemeint war "

Nachdem wir genau wissen, mit welchen Zonen wir arbeiten, kehren wir zu Photoshop zurück und verspotten, wie diese Anzeigenzonen aussehen sollen. Wir haben einen Präzedenzfall für "

Wie Sie wissen, sind einige der Anzeigen auf CSS-Tricks "selbst verwaltet", wie der Hauptsponsor des Baumhauses. Ich habe das übernommen, weil es nur eine einzige ist "