In questo screencast lavoreremo sull'area "Demos" di CSS-Tricks. È un'area piuttosto popolare del sito, nonostante il fatto che non ci dedichi tutto il tempo che dovrei. Il punto è un posto sul sito con un carico di demo scaricabili e visualizzabili in un unico posto, quindi è molto facile scorrere e navigare e trovare parti che potrebbero interessare te e i tuoi progetti.
Nella struttura è molto simile all'area dei video. Ogni demo ha un titolo e una breve descrizione e alcuni pulsanti, proprio come ogni video. Quindi modelleremo il layout proprio come abbiamo fatto per l'area dei video. Tuttavia, a differenza dell'area dei video, non siamo in grado di rimuovere l'HTML creato a mano e sostituirlo con un loop di WordPress. Questo perché ogni demo non risiede all'interno di WordPress, sono indipendenti. Va bene però, non abbiamo paura di un piccolo markup. Lo riscriveremo solo un po 'per renderlo il più perfetto possibile.
Ora abbiamo tutti i pezzi di cui abbiamo bisogno. Controlliamo il markup. Controlliamo il CSS solo per questa particolare area. Solo alcuni ritocchi e l'area del contenuto principale per quest'area è stata completata.
Alla fine esaminiamo le singole pagine demo e vediamo come il marchio di CSS-Tricks si applica anche a quelle pagine.