Nous saluons le retour.
Alors maintenant que nous avons la structure de dossier mis en place et nous avons nos fichiers créés Nous allons passer un peu de temps dans cette vidéo de créer la structure de l'équipe réelle.
Donc, les éléments dont nous avons besoin pour notre liste de tâches.
Commençons par examiner la version finale à laquelle nous travaillons tout au long de cette unité.
Voici donc la liste finale à faire.
Et les grands éléments que nous avons ici nous avons un titre ici.
Vous avez un bouton ici une sorte d'élément.
Nous avons une saisie de texte ici le type d'entrée est égal au texte et puis c'est un puits et chacun d'eux est un allié dans ce UL.
Et puis chaque bouton ici est une portée que nous montrons et cacher et de changer le avec sur.
Et nous avons également besoin d'une sorte d'élément pour contenir tout et nous allons simplement utiliser un dispositif pour le faire.
Donc, nous avons besoin d'un div à l'intérieur de ce div, nous allons faire un H-1 une entrée de texte d'un UL avec un groupe d'alliés et puis un certain span est là aussi.
Donc, nous allons commencer par écrire juste un peu vieilli lui pas de vrai C Ss et juste pour vous faire savoir la façon dont nous allons aller à ce sujet est en créant un laide à faire la liste qui fonctionne, puis revenir en arrière et en ajoutant Dans le C S.
Donc, je veux aller à la viande de ce qui est l'interrogation J et la logique de faire de nouveaux à faire et les supprimer et puis nous allons revenir en arrière et ajouter quelques-unes des jolies choses à la fin.
D'ACCORD.
Commençons donc par le HD.
Je vais faire un div et nous allons lui donner un conteneur d'identification et nous allons mettre tout à l'intérieur de ce div et puis au lieu de ce div aura un H1 et il va juste dire de faire la liste et puis nous allons Ont une saisie de texte.
Ainsi, le type d'entrée est égal au texte.
Et voyons comment cela se déroule.
Je vais me débarrasser de l'arrière-plan violet pour l'instant et allons-y.
Et je vais aussi me débarrasser de cette alerte.
Alors, faisons-le maintenant.
Voilà.
D'ACCORD.
Donc, nous avons notre contribution, nous avons notre texte pour le H-1.
Je suppose que nous devrions faire à doht faire la liste.
Et puis la prochaine chose que nous allons faire est d'ajouter l'UL.
Alors faisons ces changements à Dasch faire la liste.
Et après, nous allons ajouter dans notre UL et chacun à faire est de s'allonger à l'intérieur de là.
Et commençons par ajouter en trois ou quatre Tutu de départ.
Donc, je vais aller à la classe Potions nouvelles robes et nous allons également ajouter visiter Hagrid.
D'accord.
Nous avons donc trois choses à faire dans notre liste.
Liste très obscurs jusqu'à présent, mais nous avons notre H-1 notre entrée de texte et nos trois alliés à l'intérieur de celui-ci.
Eh bien, maintenant allons de l'avant et ajouter dans un bouton de suppression et nous n'allons pas avoir ce poubelle supprimer bouton avec tout le style de commencer qui viendra après.
Nous allons simplement avoir un bouton plus simple et il ne sera même pas un bouton.
Ça va juste ressembler à ça.
Donc, la lettre X que nous pouvons cliquer sur et si nous cliquons sur ce X, il va supprimer cela à faire.
Et c'est juste comment nous allons commencer au lieu de simplement avoir la lettre faire partie du mensonge, bien que je vais utiliser une portée si portée avec une lettre X.
Alors copions ça.
Nous avons trois spand.
Chacun a une lettre X y rafraîchir.
Rien n'est différent.
Mais maintenant, nous pouvons sélectionner cette portée séparément et nous allons ajouter un écouteur rapide.
Donc, lorsque nous cliquons sur cet intervalle, nous voulons supprimer ce pour faire ou tout ce mensonge.
D'ACCORD.
C'est donc tout le balisage de base dont nous avons besoin.
Faisons un tout petit peu de style.
La première chose que nous allons faire est de centrer cette div Donc le div est le conteneur d'identification.
Let's go ici et sélectionnez que dans notre fichier CSSA sélectionner le conteneur rangé et nous allons lui donner un beau fond gris juste pour commencer et voir ce que nous obtenons.
Vous pouvez voir le div va tout le chemin à travers.
Allons-y et ajoutez dans un avec afin qu'il ne va pas tout le chemin à travers.
Et puis nous essaierons de le centrer au milieu de l'écran pour que la largeur soit de trois cent soixante-six.
Et si nous enregistrons que c'est juste la même largeur que j'ai avec la version finale.
Donc 360 pixels et puis la prochaine chose que nous voulons faire, bien sûr, c'est le centre.
Et le moyen le plus simple est d'utiliser cette astuce de marge.
Donc nous mettons la marge sur le haut et le bas pour être nulle et la gauche et la droite pour être Ahto.
Et si nous rafraîchissons maintenant, nous avons un centre agréable à faire la liste.
Donc, c'est tout le temps et évaluer que nous pouvons faire pour commencer ici.
Nous ajouterons certaines choses au besoin.
Et puis une fois que nous obtenons la fonctionnalité de base vers le bas, nous allons nous concentrer sur ce qui rend joli et obtenir le droit que vous connaissez les animations et les effets de la décoloration et les diapositives et faire des choses juste regarder et se sentir beaucoup plus agréable.