In diesem Screencast werden wir am Bereich "Demos" von CSS-Tricks arbeiten. Es ist ein ziemlich beliebter Bereich der Website, obwohl ich nicht so viel Zeit in sie investiert habe, wie ich sollte. Der springende Punkt ist ein Ort auf der Website mit einer Vielzahl von herunterladbaren und sichtbaren Demos an einem Ort. Es ist also sehr einfach, zu scrollen und zu suchen und Teile zu finden, die für Sie und Ihre Projekte von Interesse sein könnten.
In der Struktur ist es dem Videobereich sehr ähnlich. Jede Demo hat einen Titel und eine kurze Beschreibung sowie einige Schaltflächen, genau wie jedes Video. Also modellieren wir das Layout genauso wie den Videobereich. Im Gegensatz zum Videobereich können wir den handgefertigten HTML-Code jedoch nicht entfernen und durch eine WordPress-Schleife ersetzen. Das liegt daran, dass jede Demo nicht in WordPress lebt, sondern unabhängig ist. Das ist aber in Ordnung, wir haben keine Angst vor einem kleinen Aufschlag. Wir werden es nur ein wenig umschreiben, um es so perfekt wie möglich zu machen.
Wir haben jetzt alle Teile an Ort und Stelle, die wir brauchen. Wir kontrollieren das Markup. Wir steuern das CSS nur für diesen speziellen Bereich. Nur ein paar Bastelarbeiten daran und der Hauptinhaltsbereich für diesen Bereich sind fertig.
Am Ende schauen wir uns einzelne Demoseiten an und sehen, wie das Branding von CSS-Tricks auch für diese Seiten gilt.