Screencasts vidéo 2025, Février
La conception des commentaires peut sembler très simple. Et c'est! Mais je pense que simple est efficace dans ce cas. Les commentaires sont une partie si importante de CSS-Tricks "
Nous commençons à creuser dans Photoshop ici et à concevoir la zone de commentaires. Nous commençons par le haut, c'est-à-dire les commentaires individuels eux-mêmes (par opposition au "
Nous commençons par examiner certains des travaux grognards que j'ai effectués dans les coulisses pour étoffer certaines choses qui devaient être faites. Comme ajouter le reste de "
Nous sommes sur le point d'avoir terminé la création de la page d'accueil de la zone Snippets du site. Tout de suite, nous commençons à peaufiner les choses et à en ajouter plus
Avec la conception de la zone d'extraits de code "terminée" - nous pouvons maintenant passer à une certaine interactivité (lire: JavaScript). Nous ajoutons un rollover super boiteux pour les liens sur "
Nous avons maintenant une conception Photoshop à partir de laquelle travailler pour la page d'accueil de la zone Snippets. Il est beaucoup plus facile à parcourir qu'auparavant, mais garde l'arc-en-ciel "
Il est temps de plonger dans la zone Snippets! Autrement dit, la zone de contenu réelle de celui-ci. Nous avons déjà l'en-tête en place. La zone des extraits est assez populaire. "
Dans ce screencast, nous terminons la section Almanach. Il y a une hiérarchie assez claire dans l'Almanach. Il va: Accueil> Almanach Accueil> Propriété ou Sélecteur> "
Nous sautons un peu en avant ici. C'est une série de screencast assez complète, mais ce n'est que 40 heures environ et bien sûr ce projet réel "
Nous travaillons déjà localement sur un domaine local (v10.whatup). Il est maintenant temps de passer à WordPress. Nous allons continuer à travailler localement "
Nous avons tout le contenu dont nous avons besoin sur la sortie de cette page et nous avons l'en-tête en place. Maintenant, nous pouvons commencer CSSin 'le contenu dans la conception que nous avons en cours "
Au fur et à mesure que nous commençons à travailler sur WordPress, il sera préférable de récupérer une copie exacte de la base de données en direct avec laquelle travailler localement. Certains sites Web proposent des éléments tels que "
Maintenant que nous nous sommes battus pour obtenir le contenu approprié sur la page d'accueil de l'Almanach, nous pouvons creuser un style réel avec CSS. Nous avons décidé d'y aller "
Dans ce screencast, nous traitons en grande partie de la "Photostar" orange qui domine le pied de page. Nous créons l'étoile dans un fichier séparé dans Photoshop, afin que nous puissions faire "
La tête de l'Alamanc est entrée, cette fois de Giovanni Difeterici. Nous utilisons beaucoup de techniques que nous avons déjà établies pour commencer "
L'illustration d'en-tête personnalisée pour la section des vidéos est venue, cette fois d'Alyssa Nassner. Nous passons un peu de temps à organiser le fichier Photoshop et "
Dans ce dernier screencast de la création du pied de page, nous travaillons sur le pied de page inférieur où se trouvent les zones CodePen et ShopTalk. Nous devons changer le HTML a "
Dans ce screencast, nous nous concentrons sur les lignes sous les liens dans la partie supérieure du pied de page. Nous trébuchons un peu pour savoir quelles choses devraient "
La tête des extraits est arrivée, cette fois par Reagan Ray. Nous passons un peu de temps dans Photoshop cette fois-ci à mélanger un peu les choses pour nous assurer que nous "
Une fois la structure HTML du pied de page en place, nous avons ce dont nous avons besoin pour commencer à styliser et faire en sorte que ce pied de page ressemble à ce que nous avons conçu dans Photoshop. "
C'est le dernier travail de Photoshop que nous ferons spécifiquement sur le pied de page avant de nous lancer dans sa création. Dans ce screencast, nous "
Nous travaillons à la création d'un design pour le pied de page dans Photoshop. Petit rappel: je travaille dans Photoshop car je me sens plus créatif là-bas avant de sauter "
Nous passons à d'autres activités de Photoshoppin 'dans ce screencast, en présentant le pied de page le plus bas avec des liens vers mes deux autres plus grands projets, CodePen "
Nous nous embarquons dans le grand voyage qui est le pied de page! CSS-Tricks a toujours eu un grand pied de page sophistiqué et cette conception ne fera pas exception. Ce n'est pas purement "
Avec notre conception du pied de page prête à l'emploi dans Photoshop, nous pouvons commencer à l'intégrer dans notre maquette HTML et CSS statique. La première étape est de donner "
Nous avons une autre zone BSA à intégrer dans le site. Celui-ci devrait être un peu plus simple car nous avons déjà le JavaScript en place et c'est juste "
Nous avons une maquette de ce à quoi nous voulons que nos zones BuySellAds ressemblent, alors commençons à la construire pour de vrai. Le site Web BuySellAds fournit le code dont nous avons besoin "
La seule chose qui manque maintenant dans l'en-tête de nos forums douaniers est la partie qui dit en fait "Forums"! Nick a illustré une main tenant une pancarte "
Maintenant que nous savons exactement avec quelles zones nous travaillons, nous retournons à Photoshop et nous nous moquons de l'aspect que nous voulons de ces zones publicitaires. Nous avons un précédent pour "
Comme vous le savez, certaines des publicités sur CSS-Tricks sont en quelque sorte «autogérées», comme le sponsor principal de Treehouse. J'ai pris ça parce que c'est juste un single "