Passons donc à une solution à cet exercice.
Comme toujours, vous pouvez jeter un oeil sur le code tout de suite si vous voulez suivre le long.
Commencez par zéro avec moi.
Sentez-vous à l'aise de le faire.
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.
Oh, viens sur le tableau.
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.
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.
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.
Donc, juste une bonne idée, c'est la pratique.
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.
Alors, allons-y et vérifions tout cela.
Il y a notre table jusqu'ici.
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.
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.
C'est juste pour rendre les choses visuelles pour l'instant.
Ce n'est pas une mauvaise idée de savoir à ce sujet, mais c'est une meilleure idée vraiment de le faire professionnellement.
OK alors allons prendre une partie de ces données.
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.
Donc au lieu du corps nécessaire à votre Au lieu de cela TR Nous avons besoin de 40.
Le nom va correspondre à notre deuxième Th.
Donc, je vais le mettre dans le deuxième t d là.
L'image va d'abord.
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 .
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.
Et puis enfin nous avons un autre plus complexe où nous avons une balise AI.
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.
Eh bien se débarrasser de cela juste pour que nous nettoyer un peu.
Nous allons rafraîchir et il ya notre première entrée.
Vérifiez que cela fonctionne.
Ou puis-je être douloureux.
Génial.
D'ACCORD.
Nous allons donc répéter le même processus.
Et pour le bien du temps, je vais simplement copier cela.
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.
Et cela va le dupliquer deux fois.
Donc, maintenant, nous avons doublé ce automatiquement et nous avons juste besoin de passer et faire quelques-uns des changements.
Donc le premier nom est char Mandar l'image que vous êtes Owl et nous avons besoin du Tamilien.
C'est un type de feu et vous êtes tous ici collé.
Examinons cela.
Donc, nous devrions avoir à ouvrir la source parce que nous copier et collé dans le lien est correct.
Génial.
Maintenant, nous avons juste besoin de terminer avec l'eau image Squirtle.
Allons-y avec vous ou bien d'abord si le lien a changé le nom ou la tortue et la boisson est l'eau.
Tout le montant exact de copier et coller là.
Voilà.
Assurez-vous que tout fonctionne très bien.
OK, c'est tout ce que nous devons faire pour nous assurer qu'ils correspondent.
Cela semble bon.
Génial.
Un petit changement que je pourrais faire pendant que je suis ici.
Juste une bonne leçon à ce sujet.
Je vais ajouter un commentaire ici juste pour clarifier pour vous les gars donc ce premier est ce qui était votre prochain.
C'est tout sur le charme mandar.
Et enfin c'est tout ce qui correspond à Squirtle.
Un changement bien que comme je l'ai mentionné est ces images sont un peu massives.
Nous pourrions les rétrécir habilement vers le bas et cela réduirait la taille d'une table vers le bas.
Et c'est quelque chose que vous feriez avec CSSA c'est l'information de style.
Donc, idéalement, nous le faisons avec s loin de chaque équipe.
Nous voulons les séparer.
Chaque fois que je vais structurer le style CSSA.
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.
Cela change à 50 pixels beaucoup plus petit où vous changez à 500 et obtenir une image gigantesque.
Gardez-le à 50.
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.
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.
Nous cliquons sur la commande de maintien de la souris et cliquons de nouveau et puis nous pouvons commencer à taper.
Et j'ai trois curseurs à la fois avec égal à 50.
Donc, c'est assez cool.
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.
Et comme vous pouvez le voir, nous avons une belle table plus lisible et de taille raisonnable.