1
00:00:02,070 --> 00:00:05,370
Passons donc à une solution à cet exercice.

2
00:00:05,640 --> 00:00:09,210
Comme toujours, vous pouvez jeter un oeil sur le code tout de suite si vous voulez suivre le long.

3
00:00:09,210 --> 00:00:10,430
Commencez par zéro avec moi.

4
00:00:10,440 --> 00:00:12,110
Sentez-vous à l'aise de le faire.

5
00:00:12,150 --> 00:00:25,870
Donc, la toute première chose que nous devons faire est de créer un nouveau fichier que j'appellerai Pokemon que chaque équipe va créer notre boilerplate et nous allons remplir le titre pour correspondre où il devrait être.

6
00:00:26,070 --> 00:00:28,070
Oh, viens sur le tableau.

7
00:00:29,760 --> 00:00:39,750
Donc, nous savons que cela va avoir un H-1 haut et que chacun est juste hokum première génération sur le graphique.

8
00:00:40,740 --> 00:00:52,610
Et nous savons qu'il va y avoir une table dans cette table et ont une tête T et un corps t qui juste pour rafraîchir votre mémoire n'a aucune incidence sur la façon dont la table se présente ou se comporte.

9
00:00:52,770 --> 00:01:06,580
Il s'agit purement de faire notre balisage aussi sémantique que possible en le rendant de sorte qu'un moteur de recherche ou un webcrawler sait que c'est le droit chapelier apparaissent et c'est le corps.

10
00:01:06,720 --> 00:01:09,450
Donc, juste une bonne idée, c'est la pratique.

11
00:01:09,450 --> 00:01:26,230
Alors, nous allons ajouter dans nos quatre premiers titres, donc pour les adolescents, nous avons le nom de l'image de type et évolue en.

12
00:01:26,880 --> 00:01:31,190
Alors, allons-y et vérifions tout cela.

13
00:01:31,470 --> 00:01:33,900
Il y a notre table jusqu'ici.

14
00:01:33,900 --> 00:01:40,480
La première chose que nous voulons probablement faire, c'est juste de faire correspondre ce que nous avions nous lui donner une frontière.

15
00:01:40,740 --> 00:01:50,050
Rappelez-vous cependant que nous ne voulons pas vraiment faire cela plus tard dans la classe donc une fois que nous parlons de C S s nous allons faire tout le style par C S S.

16
00:01:50,070 --> 00:01:53,730
C'est juste pour rendre les choses visuelles pour l'instant.

17
00:01:53,970 --> 00:02:00,540
Ce n'est pas une mauvaise idée de savoir à ce sujet, mais c'est une meilleure idée vraiment de le faire professionnellement.

18
00:02:00,570 --> 00:02:02,540
OK alors allons prendre une partie de ces données.

19
00:02:02,720 --> 00:02:12,440
Quand il le copier vers le bas juste au fond ici et le commenter tout dehors et alors tout va faire est de créer ma première rangée ainsi commencera avec bulbasaur.

20
00:02:12,480 --> 00:02:19,840
Donc au lieu du corps nécessaire à votre Au lieu de cela TR Nous avons besoin de 40.

21
00:02:21,480 --> 00:02:25,230
Le nom va correspondre à notre deuxième Th.

22
00:02:25,340 --> 00:02:28,130
Donc, je vais le mettre dans le deuxième t d là.

23
00:02:28,410 --> 00:02:30,440
L'image va d'abord.

24
00:02:30,690 --> 00:02:44,310
Donc, je vais copier l'image que vous rl et puis je vais créer une balise d'image et de définir la source égale à celle que vous êtes réel à l'intérieur de ce tiddy si vous voulez vous pourrait espacé un peu comme ça .

25
00:02:44,430 --> 00:03:00,540
Donc, vous savez que cela n'a pas d'impact quelque chose, c'est simplement purement esthétique dans notre code afin que nous puissions voir les relations que cette image est imbriquée à l'intérieur de la télévision que si nous avons le nom suivant, nous avons le type qui est l'herbe et le poison.

26
00:03:00,540 --> 00:03:05,090
Et puis enfin nous avons un autre plus complexe où nous avons une balise AI.

27
00:03:05,730 --> 00:03:24,330
N'oubliez pas qu'il doit ressembler à un tag qui dit Ivey ou de sorte que e-tag copions le lien qu'il doit aller et puis copions le nom de ce contenu et puis je vais aller de l'avant et de se débarrasser Ceci pour se débarrasser des commentaires.

28
00:03:24,330 --> 00:03:28,570
Eh bien se débarrasser de cela juste pour que nous nettoyer un peu.

29
00:03:29,190 --> 00:03:32,330
Nous allons rafraîchir et il ya notre première entrée.

30
00:03:32,430 --> 00:03:33,690
Vérifiez que cela fonctionne.

31
00:03:33,700 --> 00:03:35,150
Ou puis-je être douloureux.

32
00:03:35,160 --> 00:03:36,180
Génial.

33
00:03:36,840 --> 00:03:37,560
D'ACCORD.

34
00:03:37,560 --> 00:03:40,620
Nous allons donc répéter le même processus.

35
00:03:40,620 --> 00:03:43,930
Et pour le bien du temps, je vais simplement copier cela.

36
00:03:44,100 --> 00:04:04,250
Donc, toute cette rangée et rappelez-vous que vous pouviez faire Control-C et le coller avec le contrôle V et la commande C dans la commande que nous fournissons également a ce raccourci agréable où vous pouvez sélectionner et appuyez sur commande shift le commutateur de commande deux fois si vous le vouliez.

37
00:04:04,500 --> 00:04:07,910
Et cela va le dupliquer deux fois.

38
00:04:07,920 --> 00:04:12,880
Donc, maintenant, nous avons doublé ce automatiquement et nous avons juste besoin de passer et faire quelques-uns des changements.

39
00:04:13,200 --> 00:04:33,770
Donc le premier nom est char Mandar l'image que vous êtes Owl et nous avons besoin du Tamilien.

40
00:04:34,740 --> 00:04:45,830
C'est un type de feu et vous êtes tous ici collé.

41
00:04:47,040 --> 00:04:48,360
Examinons cela.

42
00:04:48,780 --> 00:04:54,480
Donc, nous devrions avoir à ouvrir la source parce que nous copier et collé dans le lien est correct.

43
00:04:54,480 --> 00:04:55,250
Génial.

44
00:04:55,290 --> 00:05:09,960
Maintenant, nous avons juste besoin de terminer avec l'eau image Squirtle.

45
00:05:10,050 --> 00:05:21,560
Allons-y avec vous ou bien d'abord si le lien a changé le nom ou la tortue et la boisson est l'eau.

46
00:05:21,760 --> 00:05:26,350
Tout le montant exact de copier et coller là.

47
00:05:26,380 --> 00:05:27,170
Voilà.

48
00:05:27,180 --> 00:05:28,860
Assurez-vous que tout fonctionne très bien.

49
00:05:29,030 --> 00:05:33,950
OK, c'est tout ce que nous devons faire pour nous assurer qu'ils correspondent.

50
00:05:34,170 --> 00:05:37,810
Cela semble bon.

51
00:05:38,280 --> 00:05:38,920
Génial.

52
00:05:38,940 --> 00:05:41,490
Un petit changement que je pourrais faire pendant que je suis ici.

53
00:05:41,490 --> 00:05:43,250
Juste une bonne leçon à ce sujet.

54
00:05:43,250 --> 00:05:51,620
Je vais ajouter un commentaire ici juste pour clarifier pour vous les gars donc ce premier est ce qui était votre prochain.

55
00:05:51,630 --> 00:05:54,500
C'est tout sur le charme mandar.

56
00:05:54,510 --> 00:06:01,460
Et enfin c'est tout ce qui correspond à Squirtle.

57
00:06:01,530 --> 00:06:05,680
Un changement bien que comme je l'ai mentionné est ces images sont un peu massives.

58
00:06:05,780 --> 00:06:09,880
Nous pourrions les rétrécir habilement vers le bas et cela réduirait la taille d'une table vers le bas.

59
00:06:10,110 --> 00:06:14,110
Et c'est quelque chose que vous feriez avec CSSA c'est l'information de style.

60
00:06:14,190 --> 00:06:18,090
Donc, idéalement, nous le faisons avec s loin de chaque équipe.

61
00:06:18,120 --> 00:06:19,900
Nous voulons les séparer.

62
00:06:19,950 --> 00:06:22,360
Chaque fois que je vais structurer le style CSSA.

63
00:06:22,710 --> 00:06:35,220
Mais pour cet exercice ce que nous pouvons faire est d'ajouter un attribut avec à une image que vous mettez un nombre comme 50 et juste voir que comme un rafraîchissement.

64
00:06:35,220 --> 00:06:44,380
Cela change à 50 pixels beaucoup plus petit où vous changez à 500 et obtenir une image gigantesque.

65
00:06:44,540 --> 00:06:45,640
Gardez-le à 50.

66
00:06:45,990 --> 00:06:56,450
Et une autre raison que je veux vous montrer c'est plutôt que copier et coller ce trois fois qui fonctionne très bien.

67
00:06:56,910 --> 00:07:05,630
Une meilleure façon de faire cela en sublime est de créer réellement trois curseurs alors je vais vous montrer ce que je veux dire.

68
00:07:05,670 --> 00:07:14,290
Nous cliquons sur la commande de maintien de la souris et cliquons de nouveau et puis nous pouvons commencer à taper.

69
00:07:14,320 --> 00:07:20,100
Et j'ai trois curseurs à la fois avec égal à 50.

70
00:07:20,370 --> 00:07:21,800
Donc, c'est assez cool.

71
00:07:21,810 --> 00:07:31,810
C'est vraiment utile si vous avez besoin de changer plusieurs choses à la fois de la même façon que vous suffit de cliquer sur tout le bouton et il génère un tas de malédictions.

72
00:07:32,490 --> 00:07:38,890
Et comme vous pouvez le voir, nous avons une belle table plus lisible et de taille raisonnable.