Salut, tout le monde.
Dans la revue de code d'aujourd'hui, nous allons parler de faire un calendrier.
Parce que ce que j'aime vraiment dans les calendriers, c'est qu'il y a toutes ces
petites choses que vous devez penser pour vraiment rendre votre page professionnelle.
Donc, ce que j'ai ici sur l'écran est un calendrier très, très clair,
où vous pouvez voir, j'ai tous les jours du mois.
J' ai aussi, certains jours, de petits rendez-vous.
Donc je vais déjeuner avec maman, ou rencontrer le doyen, ou être l'aide de la bibliothèque.
Et, le 31, c'est Halloween, alors bouo !
Que pouvons-nous faire pour prendre ces informations,
ce contenu de notre HTML5, et les transformer en quelque chose de vraiment agréable ?
Jetons un coup d'oeil à ce que j'en ai fait.
Ici, j'ai utilisé CSS pour créer un calendrier
qui a beaucoup de choses différentes sur elle.
D' abord, je suis allé de l'avant et je l'ai bien coiffé.
J' ai inclus des choses comme le rayon de la frontière, mis en évidence ces jours-ci ici.
Je me rends compte que c'est vraiment difficile à voir à l'écran en ce moment, mais j'ai en fait
une image de fond pour le rendre un peu différent.
L' autre chose que j'ai ajoutée est que les jours qui ont ces petits astérisques,
si je clique dessus, le rendez-vous réel apparaît.
Donc, comme vous pouvez le voir, je vais traiter beaucoup d'éléments CSS différents.
Et je vais lentement passer en revue le code
juste pour te donner une idée de ce qui se passe.
Maintenant, il serait impossible pour vous de suivre avec moi avec ce code et de
savoir exactement ce que je fais.
Au lieu de cela, je vous le donne comme une ressource pour choisir et
comprendre les différentes parties que vous avez besoin et
que vous voulez les incorporer dans votre page.
Jetons donc un coup d'oeil au CSS.
Vous pouvez voir que c'est une page très, très occupée.
Asseyez-vous et
vous pouvez m'entendre parler des différentes choses au lieu d'essayer de lire le code.
Je suis entré et je voulais faire mon calendrier avec un très beau rayon de bordure pour que
j'aie quelque chose autour du haut.
Le fait est que la table elle-même n'est vraiment que cette partie.
Ce n'est pas la légende.
Ce que j'ai fait, c'est que je suis entré et
j'ai dit, ne vous inquiétez pas pour les deux premiers coins, ici et ici.
Ne courbe que les deux coins du bas, d'accord.
Comment puis-je avoir cette idée cool d'alterner entre une sorte de gris clair et
cette couleur et aller et venir ?
Eh bien avec cela, vous pouvez aller de l'avant et utiliser certains des différents pseudo-éléments.
Donc, dans ce cas, je suis entré.
Et ce n'est pas moi.
C' est le navigateur qui dit, hé, je vais regarder toutes les différentes rangées de table.
Et chaque fois que je vois un enfant bizarre, je vais en faire une couleur,
chaque fois que je vois un enfant qui est pair, je vais en faire une autre couleur.
C' est tellement plus agréable que vous devez aller dans votre table et
mettre la classe égale pair, classe égale impair, classe égale pair,
surtout si plus tard vous décidez d'ajouter plus d'informations et cela jette vos lignes.
C' est quelque chose de vraiment puissant dont vous devriez essayer de profiter.
Qu' en est-il quand vous essayez de rendre votre page vraiment professionnelle,
les éléments qui se chevauchent ?
Donc, ici, je regarde en fait une table, et une ligne de table, et
un élément de table.
J' ai dû passer en revue et penser à chacun d'entre eux et penser à des choses comme,
hm, eh bien dans ma toute dernière rangée de table, le tout dernier élément de table,
qui a une courbe différente de celle du premier enfant.
Alors allez-y, téléchargez ce code et jetez un oeil à cela et jouez avec.
Que se passe-t-il si vous le commentez ?
Qu' est-ce qui va se passer ?
Très bien, j'ai un code assez simple pour la légende, je suis allé de l'avant et j'ai
juste ajouté un rayon de bordure et des couleurs.
Ce que je veux vraiment te montrer, c'est toute cette idée de quand tu veux cacher des choses.
Revenons au HTML.
J' ai mis tous mes éléments à l'intérieur d'une balise span.
Donc ici, j'ai l'aide de la bibliothèque de travée.
J' espère que tu réfléchis maintenant et que tu pars,
pourquoi ne viendraient-ils pas quand je regarde le calendrier pour la première fois ?
Pourquoi il n'est pas là ?
Eh bien, la raison en serait parce que par défaut, je vais aller
de l'avant et cacher tous les différents rendez-vous.
Je vais aller de l'avant et dire, visibilité cachée.
Maintenant, c'est différent de n'afficher aucun.
Si je n'avais pas d'affichage, tout ce carré serait parti, il ne serait pas là.
La visibilité cachée dit que je veux quitter tout cet espace, mais
je ne veux pas montrer ce qu'il y a dedans.
C' est une très petite chose nuancée, et c'est exactement pourquoi j'ai fait cet exemple, pour que
vous puissiez voir la différence.
Bon, maintenant c'est caché.
Mais dès que je le rend actif, et actif signifie dès que vous cliquez
dessus, je change la visibilité de caché à visible.
Alors, nous allons cliquer dessus.
Et tu peux voir ce déjeuner avec maman venir.
Aide à la bibliothèque, et aussi ici, à Halloween,
j'ai un petit message là-bas.
Donc, il y avait beaucoup de choses en train de se passer avec ce CSS.
Et je ne veux pas aller dans toutes les lignes, et
tu ne veux pas que je fasse ça non plus.
Ce serait très ennuyeux.
Donc j'espère cependant, que je vous ai montré certaines des façons dont ces
pseudo-classes, pseudo-éléments, les différents états, sont tous ensemble
pour créer une page qui peut paraître tellement mieux que juste du HTML simple par lui-même.
J' espère donc que vous allez utiliser ce code et créer quelque chose de génial pour vous-même.
Bonne chance.