1
00:00:02,070 --> 00:00:05,370
Repasemos una solución para este ejercicio.

2
00:00:05,640 --> 00:00:09,210
Como siempre, puedes echar un vistazo al código de inmediato si quieres seguirnos.

3
00:00:09,210 --> 00:00:10,430
Comience desde el principio conmigo.

4
00:00:10,440 --> 00:00:12,110
Siéntete libre de hacerlo.

5
00:00:12,150 --> 00:00:18,640
Así que lo primero que tenemos que hacer es crear un archivo nuevo. Lo llamaré Pokemon para que cada equipo cree

6
00:00:21,450 --> 00:00:25,870
nuestro texto estándar y completemos el título para que coincida con el que debería ser.

7
00:00:26,070 --> 00:00:28,070
Oh, vamos en la tabla.

8
00:00:29,760 --> 00:00:39,750
Así que sabemos que va a tener un H-1 arriba y que cada uno es solo un hokum de primera generación en el gráfico.

9
00:00:40,740 --> 00:00:48,690
Y sabemos que va a haber una mesa en esa mesa y tenemos una cabeza en T y un cuerpo en t que solo para refrescar la

10
00:00:48,690 --> 00:00:52,610
memoria no afecta en nada la apariencia o el comportamiento de la mesa.

11
00:00:52,770 --> 00:01:00,210
Se trata simplemente de hacer que nuestro marcado sea tan semántico como sea posible para que un motor de búsqueda

12
00:01:00,360 --> 00:01:06,580
o un webcrawler sepa que este es el hatter correcto que aparece y este es el cuerpo.

13
00:01:06,720 --> 00:01:09,450
Entonces solo una buena idea es práctica.

14
00:01:09,450 --> 00:01:23,670
Así que, a continuación, vamos a agregar los cuatro encabezados más importantes, por lo que para los adolescentes tenemos el tipo de nombre de

15
00:01:23,670 --> 00:01:26,230
imagen y evolucionamos a.

16
00:01:26,880 --> 00:01:31,190
Así que sigamos y simplemente verifique cómo se ve bien.

17
00:01:31,470 --> 00:01:33,900
Ahí está nuestra mesa hasta ahora.

18
00:01:33,900 --> 00:01:40,480
Lo primero que probablemente querremos hacer es hacer que coincida con lo que teníamos. Le damos un borde.

19
00:01:40,740 --> 00:01:46,020
Sin embargo, recuerde que no queremos hacer esto más adelante en la clase, así que una vez que

20
00:01:46,030 --> 00:01:50,050
hablemos de C S, haremos todo el diseño a través de C S.

21
00:01:50,070 --> 00:01:53,730
Esto es solo para hacer que las cosas sean visuales por el momento.

22
00:01:53,970 --> 00:02:00,540
No es una mala idea saberlo, pero es una mejor idea realmente hacer esto profesionalmente.

23
00:02:00,570 --> 00:02:02,540
OK, vamos a tomar algunos de estos datos.

24
00:02:02,720 --> 00:02:10,440
comente todo y todo lo que va a hacer es crear mi primera fila, así que comenzaré con bulbasaur.

25
00:02:10,440 --> 00:02:12,440
Cuando lo copie justo abajo,

26
00:02:12,480 --> 00:02:19,840
Entonces en lugar del cuerpo necesario para su En lugar de ese TR Necesitamos 40.

27
00:02:21,480 --> 00:02:25,230
El nombre va a corresponder a nuestro segundo Th.

28
00:02:25,340 --> 00:02:28,130
Así que voy a ponerlo en el segundo lugar allí.

29
00:02:28,410 --> 00:02:30,440
La imagen va primero.

30
00:02:30,690 --> 00:02:36,720
Así que voy a copiar la imagen que tienes y luego voy a crear una etiqueta de imagen

31
00:02:36,780 --> 00:02:42,570
y establecer la fuente igual a la que eres real dentro de esa ordenada si quieres, podrías espaciarla

32
00:02:42,570 --> 00:02:44,310
un poco como esta .

33
00:02:44,430 --> 00:02:49,200
Entonces, debes saber que esto no afecta nada, es solo estéticamente puro en

34
00:02:49,200 --> 00:02:56,670
nuestro código, de modo que podemos ver las relaciones en las que está anidada esta imagen dentro del televisor. Si

35
00:02:56,670 --> 00:03:00,540
tenemos el nombre siguiente, tenemos el tipo pasto y veneno.

36
00:03:00,540 --> 00:03:05,090
Y finalmente tenemos otro más complejo en el que tenemos una etiqueta AI.

37
00:03:05,730 --> 00:03:12,390
Recuerda que debe verse como esta, una etiqueta que dice Ivey's o así que e-tag copiemos

38
00:03:12,390 --> 00:03:21,540
el enlace al que debe ir y luego copiemos el nombre para ese contenido y luego vamos a seguir adelante y deshacernos de

39
00:03:21,930 --> 00:03:24,330
esto hasta deshacerse de los comentarios.

40
00:03:24,330 --> 00:03:28,570
Bueno, deshazte de eso solo para que podamos limpiar esto un poco.

41
00:03:29,190 --> 00:03:32,330
Vamos a actualizar y está nuestra primera entrada.

42
00:03:32,430 --> 00:03:33,690
Verifica que funciona.

43
00:03:33,700 --> 00:03:35,150
¿O puedo estar dolorido?

44
00:03:35,160 --> 00:03:36,180
Estupendo.

45
00:03:36,840 --> 00:03:37,560
DE ACUERDO.

46
00:03:37,560 --> 00:03:40,620
Entonces, básicamente vamos a repetir exactamente el mismo proceso.

47
00:03:40,620 --> 00:03:43,930
Y por el bien, voy a copiar esto.

48
00:03:44,100 --> 00:03:53,030
tiene este bonito atajo donde puedes seleccionar y presionar comando cambiar el comando shifty dos veces si así lo deseas.

49
00:03:53,040 --> 00:04:02,640
Así que toda esta fila y recuerda que puedes hacer Control-C y pegarlo con control V y comando C en el comando

50
00:04:02,700 --> 00:04:04,250
que también suministramos

51
00:04:04,500 --> 00:04:07,910
Y eso lo duplicará dos veces.

52
00:04:07,920 --> 00:04:12,540
Así que ahora hemos duplicado eso automáticamente y solo tenemos que pasar y hacer algunos de los cambios.

53
00:04:13,200 --> 00:04:16,320
Entonces, el primer nombre

54
00:04:20,220 --> 00:04:21,380
es

55
00:04:26,850 --> 00:04:33,770
Char Mandar, la imagen eres Owl y necesitamos Tamilian.

56
00:04:34,740 --> 00:04:38,400
fuego y todos ustedes están aquí pegados.

57
00:04:43,980 --> 00:04:45,830
Es un tipo de

58
00:04:47,040 --> 00:04:48,360
Vamos a verificar eso.

59
00:04:48,780 --> 00:04:54,480
Entonces deberíamos tener que abrir código fuente porque copiamos y pegamos en el enlace correcto.

60
00:04:54,480 --> 00:04:55,250
Estupendo.

61
00:04:55,290 --> 00:04:57,660
Ahora solo tenemos que terminar con

62
00:05:03,300 --> 00:05:03,870
el agua

63
00:05:08,510 --> 00:05:09,960
de imagen de Squirtle.

64
00:05:10,050 --> 00:05:12,210
la bebida es agua.

65
00:05:14,570 --> 00:05:21,560
Vayamos con usted o primero si el enlace cambió el nombre o la tortuga y

66
00:05:21,760 --> 00:05:26,350
Toda la cantidad correcta de copiar y pegar allí.

67
00:05:26,380 --> 00:05:27,170
Aquí vamos.

68
00:05:27,180 --> 00:05:28,860
Asegúrate de que todo funcione bien.

69
00:05:29,030 --> 00:05:33,950
OK, entonces eso es todo lo que tenemos que hacer para asegurarnos de que coincidan.

70
00:05:34,170 --> 00:05:37,810
Se ve bien.

71
00:05:38,280 --> 00:05:38,920
Estupendo.

72
00:05:38,940 --> 00:05:41,490
Un pequeño cambio que podría hacer mientras estoy aquí.

73
00:05:41,490 --> 00:05:43,250
Solo una buena lección sobre esto.

74
00:05:43,250 --> 00:05:51,620
Agregaré un comentario aquí solo para aclararles, por lo que esta es la siguiente.

75
00:05:51,630 --> 00:05:54,500
Esto es todo sobre el encanto de mandar.

76
00:05:54,510 --> 00:06:01,460
Y, por último, esto es todo lo que corresponde a Squirtle.

77
00:06:01,530 --> 00:06:05,680
Sin embargo, un cambio como mencioné es que estas imágenes son algo masivas.

78
00:06:05,780 --> 00:06:09,880
Podríamos reducirlos hábilmente y eso reduciría el tamaño de una mesa.

79
00:06:10,110 --> 00:06:14,110
Y esto es algo que harías con CSSA, es información de estilo.

80
00:06:14,190 --> 00:06:18,090
Entonces lo ideal es que lo hagamos con s lejos de cada equipo.

81
00:06:18,120 --> 00:06:19,900
Queremos mantenerlos separados.

82
00:06:19,950 --> 00:06:22,360
Cada vez voy a estructurar el estilo de CSSA.

83
00:06:22,710 --> 00:06:32,340
Pero para este ejercicio, lo que podemos hacer es agregar un atributo con una imagen, poner un número como 50 y

84
00:06:32,340 --> 00:06:35,220
simplemente ver eso como una actualización.

85
00:06:35,220 --> 00:06:44,380
Esto cambia a 50 píxeles mucho más pequeños en los que cambia a 500 y obtiene una imagen gigantesca.

86
00:06:44,540 --> 00:06:45,640
Mantenerlo en 50.

87
00:06:45,990 --> 00:06:53,700
Y otra razón por la que quiero mostrarte esto es en lugar de copiar y pegar esto

88
00:06:53,700 --> 00:06:56,450
tres veces, lo que funciona bien.

89
00:06:56,910 --> 00:07:05,430
Una mejor manera de hacerlo en sublime es crear realmente tres cursores, así que te mostraré lo que quiero decir.

90
00:07:05,670 --> 00:07:14,290
Hacemos clic en el comando mantener presionado nuevamente el comando de extracción de la llave y hacemos clic nuevamente y luego podemos comenzar a escribir.

91
00:07:14,320 --> 00:07:20,100
Y tengo tres cursores a la vez con igual a 50.

92
00:07:20,370 --> 00:07:21,800
Entonces esto es genial.

93
00:07:21,810 --> 00:07:27,000
Es muy útil si necesita cambiar varias cosas a la vez de la misma manera

94
00:07:27,000 --> 00:07:31,810
que simplemente ordena hacer clic por todas partes y genera un montón de maldiciones.

95
00:07:32,490 --> 00:07:38,890
Y como pueden ver, tenemos una mesa agradable y legible.

96
00:07:38,900 --> 00:07:39,360
Todo bien