1
00:00:00,360 --> 00:00:01,140
Dar una buena acogida.

2
00:00:01,320 --> 00:00:06,480
Ahora que tenemos la estructura de carpetas configurada y tenemos nuestros archivos creados, vamos a pasar

3
00:00:06,480 --> 00:00:10,020
un tiempo en este video creando la estructura del equipo real.

4
00:00:10,020 --> 00:00:12,590
Entonces los elementos que necesitamos para nuestra lista de tareas pendientes.

5
00:00:12,990 --> 00:00:18,060
Comencemos echando un vistazo a la versión final para la que estamos trabajando a lo largo del

6
00:00:18,090 --> 00:00:19,270
curso de esta unidad.

7
00:00:19,650 --> 00:00:21,400
Así que aquí está la lista de tareas finales.

8
00:00:21,600 --> 00:00:26,490
Y los grandes elementos que tenemos aquí tenemos un encabezado aquí.

9
00:00:26,570 --> 00:00:29,200
Usted tiene un botón aquí algún tipo de elemento.

10
00:00:29,340 --> 00:00:36,510
Tenemos una entrada de texto aquí, el tipo de entrada es igual al texto y luego este es un pozo y cada uno de

11
00:00:36,510 --> 00:00:38,580
estos es un aliado en esa UL.

12
00:00:39,030 --> 00:00:44,960
Y luego cada botón aquí es un lapso que estamos mostrando y escondiendo y cambiando el encendido.

13
00:00:44,970 --> 00:00:50,000
Y también necesitamos algún tipo de elemento para contener todo y solo usaremos un dispositivo para hacerlo.

14
00:00:50,040 --> 00:00:59,070
Necesitamos un div dentro de ese div. Haremos un H-1 con una entrada de texto a UL con un grupo de aliados y luego

15
00:00:59,070 --> 00:01:01,230
un lapso de tiempo allí también.

16
00:01:01,230 --> 00:01:07,110
hacer esto es creando una lista de cosas feas para hacer y luego regresando y agregando en el C S.

17
00:01:07,110 --> 00:01:12,660
Así que comenzaremos por escribir algo sobre él. No hay ningún C S real y solo para que sepas

18
00:01:12,690 --> 00:01:14,590
la forma en que vamos a

19
00:01:14,640 --> 00:01:20,280
Así que quiero llegar al meollo de esto, que es la consulta J y la lógica de hacer nuevas cosas

20
00:01:20,280 --> 00:01:24,380
para hacer y eliminarlas, y luego volveremos y agregaremos algunas cosas bonitas al final.

21
00:01:24,610 --> 00:01:24,860
DE ACUERDO.

22
00:01:24,870 --> 00:01:26,990
Comencemos con el HD

23
00:01:27,300 --> 00:01:34,380
vamos a darle un contenedor de ID y vamos a poner todo dentro de ese div y luego

24
00:01:34,380 --> 00:01:44,280
en lugar de ese div tendrá un H1 y solo dirá que hacer la lista y luego lo haremos tener una entrada de texto.

25
00:01:44,280 --> 00:01:46,640
Voy a hacer un div y

26
00:01:46,990 --> 00:01:50,580
Entonces el tipo de entrada es igual a texto.

27
00:01:50,580 --> 00:01:52,380
Y veamos cómo se perfila.

28
00:01:52,680 --> 00:02:00,650
Voy a deshacerme del fondo morado por ahora y vamos a verlo aquí.

29
00:02:01,200 --> 00:02:04,230
Y también me libraré de esta alerta.

30
00:02:04,230 --> 00:02:06,270
Así que hagámoslo ahora.

31
00:02:06,270 --> 00:02:07,240
Aquí vamos.

32
00:02:07,790 --> 00:02:08,140
DE ACUERDO.

33
00:02:08,190 --> 00:02:12,420
Así que tenemos nuestra opinión, tenemos nuestro texto para el H-1.

34
00:02:12,600 --> 00:02:15,450
Supongo que deberíamos llegar a la lista.

35
00:02:15,690 --> 00:02:18,970
Y luego lo siguiente que haremos es agregar el UL.

36
00:02:19,080 --> 00:02:24,240
Así que hagamos esos cambios a Dasch do list.

37
00:02:24,240 --> 00:02:30,660
Y después de eso, agregaremos nuestra UL y cada uno que hagamos es mentir dentro de allí.

38
00:02:30,660 --> 00:02:35,130
Y comencemos añadiendo tres o cuatro Tutu iniciales.

39
00:02:35,430 --> 00:02:38,640
Así que tendré que ir a

40
00:02:42,450 --> 00:02:48,350
las túnicas nuevas de la clase Potions y también agregaremos visitar Hagrid.

41
00:02:48,360 --> 00:02:48,630
Todo bien.

42
00:02:48,630 --> 00:02:51,740
Entonces tenemos tres para hacer esto en nuestra lista.

43
00:02:51,750 --> 00:02:59,630
Lista muy poco destacable hasta el momento, pero tenemos nuestro H-1 nuestra entrada de texto y nuestros tres aliados dentro de ella.

44
00:02:59,680 --> 00:03:06,150
Bueno, ahora vamos adelante y agreguemos un botón para eliminar y no vamos a tener este botón para eliminar

45
00:03:06,150 --> 00:03:09,820
basura con todo el estilo para comenzar que vendrá después.

46
00:03:09,840 --> 00:03:15,030
Simplemente vamos a tener un botón más simple y en realidad ni siquiera va a ser un botón.

47
00:03:15,180 --> 00:03:16,460
Simplemente se verá así.

48
00:03:16,590 --> 00:03:23,400
Entonces, la letra X en la que podemos hacer clic y si hacemos clic en esa X, la eliminará.

49
00:03:23,460 --> 00:03:28,830
Y así es como comenzaremos en lugar de solo hacer que la letra sea parte de la

50
00:03:28,830 --> 00:03:32,840
mentira, aunque voy a usar un lapso tan amplio con una letra X.

51
00:03:33,330 --> 00:03:38,200
Así que copiemos eso.

52
00:03:38,340 --> 00:03:39,810
Tenemos tres spand.

53
00:03:39,990 --> 00:03:44,080
Cada uno tiene una letra X allí refrescar.

54
00:03:44,100 --> 00:03:45,160
Nada se ve diferente.

55
00:03:45,450 --> 00:03:51,810
Pero ahora podemos seleccionar ese lapso por separado y agregaremos un oyente rápido.

56
00:03:51,840 --> 00:03:56,890
Entonces, cuando hacemos clic en ese lapso queremos eliminar esto para hacer o toda esta mentira.

57
00:03:57,290 --> 00:03:57,530
DE ACUERDO.

58
00:03:57,540 --> 00:03:59,820
Así que eso es todo el marcado básico que necesitamos.

59
00:04:00,060 --> 00:04:02,750
Hagamos un poquito de estilo.

60
00:04:02,790 --> 00:04:09,300
Lo primero que haremos es centrar este div Entonces el div es contenedor de ID.

61
00:04:09,720 --> 00:04:21,330
Vamos aquí y seleccionamos que en nuestro archivo CSSA seleccionaremos el contenedor ordenado y demos un lindo fondo gris solo

62
00:04:22,020 --> 00:04:26,430
para comenzar y ver lo que obtenemos.

63
00:04:26,430 --> 00:04:28,670
Puedes ver que el div se extiende por todo el camino.

64
00:04:28,860 --> 00:04:32,590
Avancemos y agreguemos un a para que no llegue a todos lados.

65
00:04:32,820 --> 00:04:39,900
Y luego intentaremos centrarlo en el centro de la pantalla para que el ancho sea de

66
00:04:39,900 --> 00:04:41,840
trescientos sesenta y seis.

67
00:04:42,120 --> 00:04:48,930
Y si guardamos que es el mismo ancho que tengo con la versión final.

68
00:04:48,930 --> 00:04:53,870
Así que 360 ​​píxeles y luego lo próximo que queremos hacer es centrar eso.

69
00:04:54,210 --> 00:04:57,000
Y la forma más fácil es usar ese truco de margen.

70
00:04:57,150 --> 00:05:02,760
Así que establecemos el margen en la parte superior e inferior para que sea cero y la izquierda y la derecha para ser Ahto.

71
00:05:03,570 --> 00:05:07,640
Y si actualizamos ahora, tenemos un buen centro para hacer la lista.

72
00:05:07,680 --> 00:05:11,650
Así que eso es todo el tiempo y evaluar que podemos hacer para comenzar aquí.

73
00:05:11,700 --> 00:05:13,760
Añadiremos algunas cosas cuando las necesitemos.

74
00:05:13,950 --> 00:05:18,930
Y luego, una vez que tengamos la funcionalidad básica baja, nos enfocaremos en hacer que esto sea bonito y

75
00:05:18,930 --> 00:05:24,780
en hacer las cosas bien, conocer las animaciones y los efectos de los desvanecimientos y las diapositivas y hacer que las cosas

76
00:05:24,780 --> 00:05:26,470
se vean y se sientan mejor.

77
00:05:27,060 --> 00:05:29,870
De acuerdo, entonces en el próximo video vamos a comenzar a escribir alguna pregunta