Dar una buena acogida.
Ahora que tenemos la estructura de carpetas configurada y tenemos nuestros archivos creados, vamos a pasar
un tiempo en este video creando la estructura del equipo real.
Entonces los elementos que necesitamos para nuestra lista de tareas pendientes.
Comencemos echando un vistazo a la versión final para la que estamos trabajando a lo largo del
curso de esta unidad.
Así que aquí está la lista de tareas finales.
Y los grandes elementos que tenemos aquí tenemos un encabezado aquí.
Usted tiene un botón aquí algún tipo de elemento.
Tenemos una entrada de texto aquí, el tipo de entrada es igual al texto y luego este es un pozo y cada uno de
estos es un aliado en esa UL.
Y luego cada botón aquí es un lapso que estamos mostrando y escondiendo y cambiando el encendido.
Y también necesitamos algún tipo de elemento para contener todo y solo usaremos un dispositivo para hacerlo.
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
un lapso de tiempo allí también.
hacer esto es creando una lista de cosas feas para hacer y luego regresando y agregando en el C S.
Así que comenzaremos por escribir algo sobre él. No hay ningún C S real y solo para que sepas
la forma en que vamos a
Así que quiero llegar al meollo de esto, que es la consulta J y la lógica de hacer nuevas cosas
para hacer y eliminarlas, y luego volveremos y agregaremos algunas cosas bonitas al final.
DE ACUERDO.
Comencemos con el HD
vamos a darle un contenedor de ID y vamos a poner todo dentro de ese div y luego
en lugar de ese div tendrá un H1 y solo dirá que hacer la lista y luego lo haremos tener una entrada de texto.
Voy a hacer un div y
Entonces el tipo de entrada es igual a texto.
Y veamos cómo se perfila.
Voy a deshacerme del fondo morado por ahora y vamos a verlo aquí.
Y también me libraré de esta alerta.
Así que hagámoslo ahora.
Aquí vamos.
DE ACUERDO.
Así que tenemos nuestra opinión, tenemos nuestro texto para el H-1.
Supongo que deberíamos llegar a la lista.
Y luego lo siguiente que haremos es agregar el UL.
Así que hagamos esos cambios a Dasch do list.
Y después de eso, agregaremos nuestra UL y cada uno que hagamos es mentir dentro de allí.
Y comencemos añadiendo tres o cuatro Tutu iniciales.
Así que tendré que ir a
las túnicas nuevas de la clase Potions y también agregaremos visitar Hagrid.
Todo bien.
Entonces tenemos tres para hacer esto en nuestra lista.
Lista muy poco destacable hasta el momento, pero tenemos nuestro H-1 nuestra entrada de texto y nuestros tres aliados dentro de ella.
Bueno, ahora vamos adelante y agreguemos un botón para eliminar y no vamos a tener este botón para eliminar
basura con todo el estilo para comenzar que vendrá después.
Simplemente vamos a tener un botón más simple y en realidad ni siquiera va a ser un botón.
Simplemente se verá así.
Entonces, la letra X en la que podemos hacer clic y si hacemos clic en esa X, la eliminará.
Y así es como comenzaremos en lugar de solo hacer que la letra sea parte de la
mentira, aunque voy a usar un lapso tan amplio con una letra X.
Así que copiemos eso.
Tenemos tres spand.
Cada uno tiene una letra X allí refrescar.
Nada se ve diferente.
Pero ahora podemos seleccionar ese lapso por separado y agregaremos un oyente rápido.
Entonces, cuando hacemos clic en ese lapso queremos eliminar esto para hacer o toda esta mentira.
DE ACUERDO.
Así que eso es todo el marcado básico que necesitamos.
Hagamos un poquito de estilo.
Lo primero que haremos es centrar este div Entonces el div es contenedor de ID.
Vamos aquí y seleccionamos que en nuestro archivo CSSA seleccionaremos el contenedor ordenado y demos un lindo fondo gris solo
para comenzar y ver lo que obtenemos.
Puedes ver que el div se extiende por todo el camino.
Avancemos y agreguemos un a para que no llegue a todos lados.
Y luego intentaremos centrarlo en el centro de la pantalla para que el ancho sea de
trescientos sesenta y seis.
Y si guardamos que es el mismo ancho que tengo con la versión final.
Así que 360 ​​píxeles y luego lo próximo que queremos hacer es centrar eso.
Y la forma más fácil es usar ese truco de margen.
Así que establecemos el margen en la parte superior e inferior para que sea cero y la izquierda y la derecha para ser Ahto.
Y si actualizamos ahora, tenemos un buen centro para hacer la lista.
Así que eso es todo el tiempo y evaluar que podemos hacer para comenzar aquí.
Añadiremos algunas cosas cuando las necesitemos.
Y luego, una vez que tengamos la funcionalidad básica baja, nos enfocaremos en hacer que esto sea bonito y
en hacer las cosas bien, conocer las animaciones y los efectos de los desvanecimientos y las diapositivas y hacer que las cosas
se vean y se sientan mejor.
De acuerdo, entonces en el próximo video vamos a comenzar a escribir alguna pregunta