Dans ce screencast, nous allons travailler sur la zone «Démos» de CSS-Tricks. C'est une zone assez populaire du site, malgré le fait que je n'y consacre pas autant de temps que je le devrais. Le but de celui-ci est un endroit sur le site avec une multitude de démos téléchargeables et visibles au même endroit - il est donc très facile de faire défiler et de parcourir et de trouver des éléments qui pourraient vous intéresser, ainsi que vos projets.
Dans sa structure, c'est très similaire à la zone des vidéos. Chaque démo a un titre et une brève description et quelques boutons, tout comme chaque vidéo. Nous allons donc modéliser la mise en page comme nous l'avons fait pour la zone des vidéos. Cependant, contrairement à la zone des vidéos, nous ne sommes pas en mesure de supprimer le HTML fabriqué à la main et de le remplacer par une boucle WordPress. C'est parce que chaque démo ne vit pas à l'intérieur de WordPress, elles sont indépendantes. Ce n'est pas grave, nous n'avons pas peur d'un petit balisage. Nous allons simplement le réécrire un peu pour le rendre aussi parfait que possible.
Nous avons maintenant tous les éléments en place dont nous avons besoin. Nous contrôlons le balisage. Nous contrôlons le CSS uniquement pour ce domaine particulier. Juste quelques bricolages avec cela et la zone de contenu principale de cette zone est terminée.
À la fin, nous examinons les pages de démonstration individuelles et voyons comment la marque de CSS-Tricks s'applique également à ces pages.