In diesem Screencast werden wir am Bereich "Demos" von CSS-Tricks arbeiten. Dies ist ein recht beliebter Bereich der Website, obwohl ich ihm nicht so viel Zeit widme, wie ich sollte. Der Sinn und Zweck ist ein Ort auf der Website mit einer Menge herunterladbarer und anzeigbarer Demos an einem Ort – so ist es sehr einfach, zu scrollen und zu durchsuchen und Teile zu finden, die für Sie und Ihre Projekte von Interesse sein könnten.
Strukturell ist er dem Bereich Videos sehr ähnlich. Jede Demo hat einen Titel und eine kurze Beschreibung sowie einige Schaltflächen, genau wie jedes Video. Daher werden wir das Layout genauso modellieren, wie wir es mit dem Bereich Videos getan haben. Anders als im Bereich Videos können wir jedoch nicht das handgefertigte HTML entfernen und durch eine WordPress-Schleife ersetzen. Das liegt daran, dass jede Demo nicht innerhalb von WordPress liegt, sie sind unabhängig. Das ist aber in Ordnung, wir haben keine Angst vor ein wenig Markup. Wir werden es einfach ein wenig umschreiben, um es so perfekt wie möglich zu machen.
Wir haben nun alle benötigten Teile an Ort und Stelle. Wir kontrollieren das Markup. Wir kontrollieren das CSS nur für diesen speziellen Bereich. Nur ein paar Anpassungen daran und der Hauptinhaltsbereich für diesen Bereich ist fertig.
Am Ende betrachten wir einzelne Demo-Seiten und sehen, wie sich das Branding von CSS-Tricks auch auf diese Seiten auswirkt.