1
00:00:00,360 --> 00:00:01,140
Nous saluons le retour.

2
00:00:01,320 --> 00:00:10,020
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.

3
00:00:10,020 --> 00:00:12,590
Donc, les éléments dont nous avons besoin pour notre liste de tâches.

4
00:00:12,990 --> 00:00:19,270
Commençons par examiner la version finale à laquelle nous travaillons tout au long de cette unité.

5
00:00:19,650 --> 00:00:21,400
Voici donc la liste finale à faire.

6
00:00:21,600 --> 00:00:26,490
Et les grands éléments que nous avons ici nous avons un titre ici.

7
00:00:26,570 --> 00:00:29,200
Vous avez un bouton ici une sorte d'élément.

8
00:00:29,340 --> 00:00:38,580
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.

9
00:00:39,030 --> 00:00:44,960
Et puis chaque bouton ici est une portée que nous montrons et cacher et de changer le avec sur.

10
00:00:44,970 --> 00:00:50,000
Et nous avons également besoin d'une sorte d'élément pour contenir tout et nous allons simplement utiliser un dispositif pour le faire.

11
00:00:50,040 --> 00:01:01,230
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.

12
00:01:01,230 --> 00:01:14,590
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.

13
00:01:14,640 --> 00:01:24,380
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.

14
00:01:24,610 --> 00:01:24,860
D'ACCORD.

15
00:01:24,870 --> 00:01:26,990
Commençons donc par le HD.

16
00:01:27,300 --> 00:01:46,640
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.

17
00:01:46,990 --> 00:01:50,580
Ainsi, le type d'entrée est égal au texte.

18
00:01:50,580 --> 00:01:52,380
Et voyons comment cela se déroule.

19
00:01:52,680 --> 00:02:00,650
Je vais me débarrasser de l'arrière-plan violet pour l'instant et allons-y.

20
00:02:01,200 --> 00:02:04,230
Et je vais aussi me débarrasser de cette alerte.

21
00:02:04,230 --> 00:02:06,270
Alors, faisons-le maintenant.

22
00:02:06,270 --> 00:02:07,240
Voilà.

23
00:02:07,790 --> 00:02:08,140
D'ACCORD.

24
00:02:08,190 --> 00:02:12,420
Donc, nous avons notre contribution, nous avons notre texte pour le H-1.

25
00:02:12,600 --> 00:02:15,450
Je suppose que nous devrions faire à doht faire la liste.

26
00:02:15,690 --> 00:02:18,970
Et puis la prochaine chose que nous allons faire est d'ajouter l'UL.

27
00:02:19,080 --> 00:02:24,240
Alors faisons ces changements à Dasch faire la liste.

28
00:02:24,240 --> 00:02:30,660
Et après, nous allons ajouter dans notre UL et chacun à faire est de s'allonger à l'intérieur de là.

29
00:02:30,660 --> 00:02:35,130
Et commençons par ajouter en trois ou quatre Tutu de départ.

30
00:02:35,430 --> 00:02:48,350
Donc, je vais aller à la classe Potions nouvelles robes et nous allons également ajouter visiter Hagrid.

31
00:02:48,360 --> 00:02:48,630
D'accord.

32
00:02:48,630 --> 00:02:51,740
Nous avons donc trois choses à faire dans notre liste.

33
00:02:51,750 --> 00:02:59,630
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.

34
00:02:59,680 --> 00:03:09,820
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.

35
00:03:09,840 --> 00:03:15,030
Nous allons simplement avoir un bouton plus simple et il ne sera même pas un bouton.

36
00:03:15,180 --> 00:03:16,460
Ça va juste ressembler à ça.

37
00:03:16,590 --> 00:03:23,400
Donc, la lettre X que nous pouvons cliquer sur et si nous cliquons sur ce X, il va supprimer cela à faire.

38
00:03:23,460 --> 00:03:32,840
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.

39
00:03:33,330 --> 00:03:38,200
Alors copions ça.

40
00:03:38,340 --> 00:03:39,810
Nous avons trois spand.

41
00:03:39,990 --> 00:03:44,080
Chacun a une lettre X y rafraîchir.

42
00:03:44,100 --> 00:03:45,160
Rien n'est différent.

43
00:03:45,450 --> 00:03:51,810
Mais maintenant, nous pouvons sélectionner cette portée séparément et nous allons ajouter un écouteur rapide.

44
00:03:51,840 --> 00:03:56,890
Donc, lorsque nous cliquons sur cet intervalle, nous voulons supprimer ce pour faire ou tout ce mensonge.

45
00:03:57,290 --> 00:03:57,530
D'ACCORD.

46
00:03:57,540 --> 00:03:59,820
C'est donc tout le balisage de base dont nous avons besoin.

47
00:04:00,060 --> 00:04:02,750
Faisons un tout petit peu de style.

48
00:04:02,790 --> 00:04:09,300
La première chose que nous allons faire est de centrer cette div Donc le div est le conteneur d'identification.

49
00:04:09,720 --> 00:04:26,430
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.

50
00:04:26,430 --> 00:04:28,670
Vous pouvez voir le div va tout le chemin à travers.

51
00:04:28,860 --> 00:04:32,590
Allons-y et ajoutez dans un avec afin qu'il ne va pas tout le chemin à travers.

52
00:04:32,820 --> 00:04:41,840
Et puis nous essaierons de le centrer au milieu de l'écran pour que la largeur soit de trois cent soixante-six.

53
00:04:42,120 --> 00:04:48,930
Et si nous enregistrons que c'est juste la même largeur que j'ai avec la version finale.

54
00:04:48,930 --> 00:04:53,870
Donc 360 pixels et puis la prochaine chose que nous voulons faire, bien sûr, c'est le centre.

55
00:04:54,210 --> 00:04:57,000
Et le moyen le plus simple est d'utiliser cette astuce de marge.

56
00:04:57,150 --> 00:05:02,760
Donc nous mettons la marge sur le haut et le bas pour être nulle et la gauche et la droite pour être Ahto.

57
00:05:03,570 --> 00:05:07,640
Et si nous rafraîchissons maintenant, nous avons un centre agréable à faire la liste.

58
00:05:07,680 --> 00:05:11,650
Donc, c'est tout le temps et évaluer que nous pouvons faire pour commencer ici.

59
00:05:11,700 --> 00:05:13,760
Nous ajouterons certaines choses au besoin.

60
00:05:13,950 --> 00:05:26,470
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.