Työskentelemme tässä kuvaruudussa CSS-temppujen Demot-alueella. Se on melko suosittu sivuston alue, huolimatta siitä, että en käytä siihen niin paljon aikaa kuin minun pitäisi. Sen tarkoitus on paikka sivustolla, jossa on paljon ladattavia ja katseltavia demoja yhdessä paikassa - joten on erittäin helppo vierittää ja selata ja löytää bittejä, jotka saattavat kiinnostaa sinua ja projektejasi.
Rakenteeltaan se on hyvin samanlainen kuin videoalue. Jokaisella demolla on otsikko ja lyhyt kuvaus sekä muutama painike, kuten jokaisessa videossa. Joten mallinnamme asettelun samalla tavalla kuin teimme videoalueen. Toisin kuin videoalueella, emme kuitenkaan voi poistaa käsityönä luotua HTML-koodia ja korvata sitä WordPress-silmukalla. Tämä johtuu siitä, että kukin demo ei asu WordPressissä, vaan ne ovat itsenäisiä. Se on kuitenkin ok, emme pelkää pieniä merkintöjä. Kirjoitamme sen vain vähän, jotta se olisi niin täydellinen kuin mahdollista.
Meillä on nyt kaikki bitit paikoillaan tarpeen mukaan. Me hallitsemme merkintää. Hallitsemme CSS: ää vain tälle alueelle. Vain muutama hemmottelu sen kanssa ja tämän alueen tärkein sisältöalue on tehty.
Lopuksi tarkastelemme yksittäisiä esittelysivuja ja näemme, kuinka CSS-Tricksin tuotemerkki koskee myös näitä sivuja.