1
00:00:00,760 --> 00:00:01,370
DE ACUERDO.

2
00:00:01,620 --> 00:00:05,960
Entonces en este video vamos a recrear este ejercicio de tablero de tres en raya desde cero.

3
00:00:06,060 --> 00:00:09,120
Así que vamos a comenzar desde el principio con un archivo vacío.

4
00:00:09,130 --> 00:00:13,880
La placa de Coppermine que HVM puedo agregar en nuestra placa de la caldera.

5
00:00:14,460 --> 00:00:21,210
Solo voy a llamarlo placa T T T y la forma en que esto funciona solo para refrescar tu memoria.

6
00:00:21,420 --> 00:00:22,550
Es una mesa.

7
00:00:22,560 --> 00:00:23,950
Todo esto es una mesa.

8
00:00:24,000 --> 00:00:30,330
Tiene tres filas, una, dos y tres, y cada fila tiene tres Tweedy.

9
00:00:30,360 --> 00:00:32,270
Así que terminamos con un tablero de tres por tres.

10
00:00:32,430 --> 00:00:38,760
Y luego, lo que haremos es entrar y salir en estos tres televisores a los que vamos a girar a la izquierda y a la

11
00:00:39,390 --> 00:00:42,890
derecha, y luego en estos tres vamos a girar el borde superior e inferior.

12
00:00:43,560 --> 00:00:48,020
Entonces, debemos comenzar con nuestra mesa y luego con tres niveles.

13
00:00:48,810 --> 00:00:53,490
Y de hecho voy a hacer tres tiaras y hacer las primeras D's.

14
00:00:53,520 --> 00:00:56,400
Así que tenemos tres televisores y luego vamos

15
00:00:59,340 --> 00:01:01,450
a duplicar eso una vez más.

16
00:01:01,590 --> 00:01:06,650
Ahora tenemos nuestras tres filas con tres elementos, tres televisores en cada uno.

17
00:01:06,720 --> 00:01:12,940
Así que guardaremos eso y si abrimos esto en el navegador, notará que no vemos nada.

18
00:01:13,500 --> 00:01:18,600
Y eso es porque, aunque nuestra mesa está allí, antes que nada, no hay nada en nuestra mesa.

19
00:01:18,900 --> 00:01:23,910
Y luego tampoco tenemos ningún estilo aplicado porque es posible tener una tabla vacía y aún ver cosas

20
00:01:23,910 --> 00:01:25,910
que es realmente lo que está aquí.

21
00:01:25,910 --> 00:01:27,950
No hay datos en estas tablas.

22
00:01:28,080 --> 00:01:32,700
En este ejemplo, aquí solo hay una tabla y luego está diseñado.

23
00:01:32,700 --> 00:01:34,790
Entonces, tiene un borde con un a.

24
00:01:34,980 --> 00:01:36,320
Entonces tenemos que hacer eso.

25
00:01:36,360 --> 00:01:42,120
Así que solo para demostrarles que está aquí, agreguemos un poco de estilo y esta vez lo voy a

26
00:01:42,120 --> 00:01:45,210
hacer con una etiqueta de estilo que ya deben saber.

27
00:01:45,360 --> 00:01:51,170
No es una gran idea a largo plazo, sino solo un video de solución solo por la facilidad de verlo aquí para que no

28
00:01:51,170 --> 00:01:55,960
tengan que mirarme pasar de un archivo a otro y confundirse acerca de lo que va a hacer donde voy

29
00:01:55,970 --> 00:01:59,370
a hacer en uno archivo aquí en la parte superior de la etiqueta de estilo.

30
00:01:59,880 --> 00:02:09,540
Entonces, lo primero que voy a hacer es seleccionar las T y darles un ancho, y eso es porque en

31
00:02:09,540 --> 00:02:11,550
este momento, si inspeccionáramos

32
00:02:19,380 --> 00:02:22,920
los TT, veríamos que básicamente no están allí.

33
00:02:22,930 --> 00:02:24,830
Son dos píxeles por dos píxeles.

34
00:02:24,960 --> 00:02:28,720
Entonces, son realmente muy pequeños y eso es porque no hay nada allí y no

35
00:02:28,770 --> 00:02:30,680
les hemos asignado una altura o altura.

36
00:02:30,690 --> 00:02:36,570
Entonces, lo que quiero hacer es darles un ancho y vamos a comenzar con 100

37
00:02:36,570 --> 00:02:43,130
píxeles y luego haremos lo mismo para la altura, guardaremos y actualizaremos y todavía no veremos nada.

38
00:02:43,500 --> 00:02:46,860
Y nuevamente, eso se debe a que no les hemos dado nada para exhibir.

39
00:02:47,010 --> 00:02:55,380
Pero si vamos a inspeccionar ahora, podemos ver que cada Tedy ahora tiene un cuadrado de 100 por 100 píxeles.

40
00:02:55,380 --> 00:02:59,160
Así que vamos a darles un trasfondo para que puedan ver que están allí.

41
00:02:59,310 --> 00:03:02,330
Diga backgrounders rosa guardar.

42
00:03:03,000 --> 00:03:05,970
Y ahora podemos ver que tenemos los comienzos de nuestra junta.

43
00:03:06,120 --> 00:03:08,360
Así que en realidad voy a deshacer ese color de fondo.

44
00:03:08,370 --> 00:03:11,400
Solo quería mostrarte que las fichas están ahí.

45
00:03:11,400 --> 00:03:12,630
Tenemos nuestros televisores.

46
00:03:12,930 --> 00:03:18,750
Y ahora lo que tenemos que hacer es descubrir cómo activar selectivamente el borde.

47
00:03:18,930 --> 00:03:22,800
Así que vamos a comenzar con estos tres elementos.

48
00:03:22,800 --> 00:03:25,380
Queremos activar el borde izquierdo y derecho.

49
00:03:25,380 --> 00:03:26,990
Entonces, si actualizo la página.

50
00:03:27,140 --> 00:03:36,310
Pero empecemos por tomar este superior aquí y darle un cuarto izquierdo y otro derecho.

51
00:03:36,480 --> 00:03:40,990
Así que me voy a ir y ese es el segundo TD en lugar del primer TR.

52
00:03:41,070 --> 00:03:47,250
Voy a darle una clase y voy a llamar a esto una vertical y voy a hacer una

53
00:03:47,250 --> 00:03:52,120
clase para estos tres llamados vertical donde simplemente obtenemos los bordes izquierdo y derecho.

54
00:03:52,320 --> 00:03:53,820
Entonces la clase es igual a vertical.

55
00:03:53,820 --> 00:04:00,240
Y luego, aquí vamos a seleccionar vertical y simplemente le daremos un borde a

56
00:04:04,560 --> 00:04:11,570
la izquierda, hagamos un píxel negro por ahora y hagamos lo mismo para el borde.

57
00:04:11,570 --> 00:04:12,530
Derecha.

58
00:04:12,780 --> 00:04:18,280
Y si ahorramos y estamos frescos verás que tenemos el primer cuadrado completo.

59
00:04:18,690 --> 00:04:23,520
Entonces ahora necesitamos agregar la t d que está debajo y la TV que está debajo de eso.

60
00:04:23,790 --> 00:04:29,020
Y es por eso que hice una clase porque la vamos a usar más de una vez.

61
00:04:29,220 --> 00:04:34,800
Entonces, en lugar de hacer de esto una identificación y luego hacer otra identificación para

62
00:04:34,800 --> 00:04:40,840
este elemento y otra ID para esta que podría haber hecho, podría haber hecho algo como

63
00:04:40,850 --> 00:04:45,730
ID middle y luego esta para ser id bottom o algo así.

64
00:04:46,530 --> 00:04:49,570
Bueno, puedo tener un espacio allí pero algo así.

65
00:04:49,680 --> 00:04:51,760
Eso no es una gran idea.

66
00:04:51,780 --> 00:04:57,120
No queremos tener una identificación múltiple, así que voy a darle una clase y luego nuestra clase es vertical.

67
00:04:57,660 --> 00:05:01,350
Así que voy a dárselo a este también.

68
00:05:01,560 --> 00:05:04,280
Este es nuestro elemento intermedio justo debajo de él.

69
00:05:04,440 --> 00:05:07,440
Y luego el otro que está debajo de eso.

70
00:05:07,440 --> 00:05:13,000
Entonces esos tres ahora tienen clase vertical y pueden ver que obtenemos nuestras tres líneas verticales.

71
00:05:13,650 --> 00:05:17,770
Entonces, ahora solo necesitamos repetir el mismo proceso en las líneas horizontales.

72
00:05:18,570 --> 00:05:20,740
Y entonces queremos este elemento aquí.

73
00:05:20,850 --> 00:05:26,250
Este aquí y este aquí tiene una parte superior de la frontera y un fondo de la frontera.

74
00:05:26,670 --> 00:05:34,590
Así que esta vez voy a comenzar con la clase y obtenemos una copia horizontal y de subrayado, excepto cambiar

75
00:05:34,590 --> 00:05:43,080
el borde dejado al borde superior e inferior del borde y luego todo lo que tenemos que hacer es firmar esta

76
00:05:43,080 --> 00:05:45,270
clase horizontal con los elementos correctos.

77
00:05:45,270 --> 00:05:52,260
Así que los que queremos que estén en este son aquí, así que esta será la primera T. T.

78
00:05:52,260 --> 00:05:54,500
en el segundo TR.

79
00:05:54,870 --> 00:05:56,100
Así que solo voy a seguir adelante y hacer eso.

80
00:05:56,100 --> 00:06:01,420
La clase es igual o está en TL y copia eso.

81
00:06:01,440 --> 00:06:07,320
Entonces lo queremos en este medio y verá que ya tenemos una clase vertical y no hemos visto

82
00:06:07,320 --> 00:06:09,910
esto antes, donde tenemos más de una clase.

83
00:06:09,930 --> 00:06:10,910
Es realmente fácil.

84
00:06:10,920 --> 00:06:13,880
Todo lo que hacemos es agregar un espacio.

85
00:06:13,890 --> 00:06:16,350
Entonces esta no es una clase llamada vertical horizontal.

86
00:06:16,350 --> 00:06:19,780
Es dos verticales y también horizontales.

87
00:06:20,190 --> 00:06:27,030
Y luego haremos lo mismo con este último CD, que sería aquí y si guardamos y

88
00:06:27,030 --> 00:06:31,840
actualizamos la página, ahora tenemos nuestro tablero de tres en raya completo.

89
00:06:31,950 --> 00:06:36,930
Así que lo último que quiero hacer aquí es mover esto para que esté centrado

90
00:06:36,930 --> 00:06:38,800
y en realidad es realmente fácil.

91
00:06:38,910 --> 00:06:42,460
Es solo una línea de éxito en nuestra mesa.

92
00:06:42,720 --> 00:06:47,820
Vamos a darle un margen de orden y ahí vamos.

93
00:06:47,850 --> 00:06:49,820
Ese margen se calcula automáticamente.

94
00:06:49,830 --> 00:06:51,270
Puedes ver mientras me desplazo.

95
00:06:51,330 --> 00:06:57,140
medida que cambio el tamaño de la ventana, los márgenes aumentan y disminuyen, y luego una última

96
00:06:57,150 --> 00:07:04,440
cosa si queremos agregar que cada uno en la parte superior que simplemente dice tic tac toe puede hacer eso.

97
00:07:07,620 --> 00:07:08,520
Quiero decir, a

98
00:07:08,550 --> 00:07:12,690
Pero notarás que este elemento fue inspeccionado por Phi.

99
00:07:13,200 --> 00:07:16,480
Bueno, puedes ver sin siquiera inspeccionar que todo está en el costado.

100
00:07:16,650 --> 00:07:22,900
Entonces, si quería ir en el medio, el elemento realmente ocupa todo el camino a través de la pantalla.

101
00:07:23,150 --> 00:07:24,620
Puedes ver este azul aquí.

102
00:07:24,870 --> 00:07:31,710
Así que puedo simplemente centrar el texto y eso nos dará el efecto de que el H-1 está realmente en el medio.

103
00:07:31,980 --> 00:07:40,720
Así que solo el texto H-1 alinea el centro y lo guardo.

104
00:07:41,130 --> 00:07:43,230
Y ahí vamos, tenemos un tablero de tres en raya