En este screencast vamos a trabajar en el área "Demos" de CSS-Tricks. Es un área bastante popular del sitio, a pesar de que no le dedico tanto tiempo como debería. El punto es un lugar en el sitio con una gran cantidad de demostraciones descargables y visibles en un solo lugar, por lo que es muy fácil desplazarse y navegar y encontrar partes que puedan ser de interés para usted y sus proyectos.
En estructura, es muy similar al área de videos. Cada demostración tiene un título y una breve descripción y algunos botones, al igual que cada video. Así que modelaremos el diseño como hicimos con el área de videos. Sin embargo, a diferencia del área de videos, no podemos eliminar el HTML hecho a mano y reemplazarlo con un bucle de WordPress. Eso es porque cada demostración no vive dentro de WordPress, son independientes. Sin embargo, está bien, no tememos un pequeño margen de beneficio. Simplemente lo reescribiremos un poco para que sea lo más perfecto posible.
Ahora tenemos todos los bits en su lugar según sea necesario. Controlamos el marcado. Controlamos el CSS solo para esta área en particular. Solo unos pocos retoques con eso y el área de contenido principal para esta área está hecha.
Al final, miramos las páginas de demostración individuales y vemos cómo la marca de CSS-Tricks se aplica también a esas páginas.