Crear una interfaz de aplicación de chat

[MÚSICA] 0:00 Está bien, entonces si estás siguiendo, 0:08 usaremos SCSS en lugar de CSS, pero 0:13 Solo vamos a usar eso para 0:18 sea un poco más rápido ya que 0:23 Así que si quieres seguir, 0:26 el enlace de GitHub está en el chat. 0:31 Puedes copiarlo, y 0:35 pégalo ahí, y comenzaremos a trabajar. 0:40 Si alguien quiere ver cómo se ve esto 0:45 esta es la versión terminada. 0:48 Es solo una interfaz de aplicación de chat simple. 0:50 Realmente nada hace nada. 0:53 Esto es muy básico, pero 0:55 tenemos este botón de alternancia aquí que 0:56 Será bastante divertido. 1:02 Así que también, si ves un error en mi código 1:03 No soy perfecto. 1:08 Así que vamos a agarrar nuestro git clone, y 1:11 lo abriremos en nuestro editor de texto. 1:16 Para repasar lo que tenemos hasta 1:22 Solo tenemos un archivo HTML estándar. 1:25 Tenemos una carpeta de maquetas, 1:28 que tendrá nuestro mockup de tema oscuro 1:30 Tenemos todos nuestros iconos como SVGs. 1:35 Tenemos un app.js, que está vacío. 1:38 Escribiremos todo eso. 1:40 Y tenemos un archivo styles.css con, 1:42 tenemos una importación de fuente para 1:46 Y también estamos dándole 1:51 Y todos nuestros colores de tema ya están 1:54 Así que en nuestra regla de body, 1:59 Y si no estás familiarizado 2:03 las repasaremos 2:05 Entonces este es nuestro tema, estos son los 2:08 Y cuando le damos la clase 2:12 tendremos todos estos colores 2:15 Haremos todo eso juntos, de todas formas, 2:19 Así que nuestro tema claro está aquí, 2:24 Voy a seguir adelante y 2:27 copiar todo esto porque voy a 2:28 Puedes seguir con CSS, 2:33 O si estás familiarizado con SCSS, 2:36 Solo vamos a usar SCSS para anidar. 2:38 Así que lo haré muy rápidamente. 2:42 Así que hagamos mkdir, haremos styles, 2:45 haremos touch styles.css, 2:50 luego haré mi editor un poco más pequeño. 2:54 ¿Todos todavía pueden ver el editor, está bien? 3:00 ¿Sigue siendo legible? 3:02 >> Sí 3:04 Está bien. 3:13 Está bien, veo lo que hice. 3:18 Está bien, sass styles.scss -> styles.css. 3:24 Arrastraré todos esos aquí. 3:30 Crearé una carpeta CSS. 3:34 No te preocupes si esto no tiene sentido, solo lo estoy configurando con Sass. 3:37 Probablemente debería haber hecho esto antes, pero lo estamos haciendo ahora. 3:41 Genial, y comencemos a observar cambios. 3:48 Y no estoy viendo cambios. 3:57 Cd styles, sass --watch. 4:08 Ahí vamos. 4:12 Está bien, así que ahora tenemos nuestros estilos compilándose, excelente. 4:13 Está bien, así que comencemos. 4:16 Abriré el mockup en la derecha. 4:19 En realidad, abramos esto en el navegador. 4:23 Empujo esto a la derecha y el editor a la izquierda. 4:30 Cerraré la terminal, realmente no la necesitamos más. 4:35 Así que primero vinculemos nuestra hoja de estilos. 4:37 /styles/css/styles.css, y también podemos hacer nuestra etiqueta de script ahora mismo. 4:42 Genial, está bien, voy a abrir el mockup en el navegador para que 4:51 podamos seguir adelante. 4:56 Así que este es el mockup, y comenzaremos a construir esta interfaz. 4:58 Así que escribamos el marcado para esto. 5:04 Podemos hacer .chat-interface. 5:06 Y en realidad, llamemos a esto .chat-app ya que esto contendrá todo. 5:11 Y solo vamos a tener un elemento aquí, 5:17 que será la chat-interface en la parte inferior. 5:20 Así que llamaremos a eso .chat-interface. 5:24 Y habrá tres elementos secundarios en esta .chat-interface. 5:27 Vamos a tener esta barra de utilidades aquí arriba. 5:31 Vamos a tener esta entrada en el centro, y 5:34 vamos a tener otra barra de utilidades en la parte inferior. 5:36 Así que esos serán nuestros tres elementos secundarios. 5:39 Así que hagamos un div, una clase de utilidades, la duplicaremos. 5:41 Y en el centro, solo pondremos una entrada con el tipo de texto. 5:47 Y podemos eliminar estos atributos, 5:52 realmente no los necesitaremos para esto. 5:55 Genial, está bien, así que comencemos a construir esta primera cosa de utilidades. 5:59 Estos colores de fondo oscuro gris son elementos <ul>, 6:04 y adentro hay elementos <li>. 6:09 Así que veamos, tenemos negrita, cursiva y tachado. 6:11 Así que son tres elementos de lista. 6:16 Así que haremos ul>li*3. 6:17 Y esto es Emmet, que es estándar en VS Code, estoy bastante seguro. 6:22 Y luego, vamos a hacer la interfaz para el icono de enlace. 6:29 Entonces ul>li, y 6:34 Y luego tenemos estos dos pequeños 6:39 Y el último es para 6:45 Y si desplazamos todo el camino hacia la derecha, 6:50 nuestro interruptor de alternancia. 6:54 Así que vamos a seguir adelante y 6:55 Okay, así que tenemos nuestra estructura de UI para 7:00 vamos a seguir adelante y añadir los iconos. 7:04 Entonces son SVG, y 7:07 Así que busquemos negrita. 7:12 Excelente, simplemente vamos a presionar Ctrl+A, 7:15 El zoom está en el camino. 7:26 Veamos, 7:29 Okay, así que 7:32 Ahora, vamos a hacer el icono de cursiva. 7:37 Copiar todo, pegar. 7:40 Y ahora, el icono de tachado, 7:43 copiar todo, Y pegar. 7:46 Y siguiente, sí. 7:52 >> Solo una pregunta rápida, cuándo, 7:54 eso va a estar actualizando la página 7:59 >> Sí, así que en este momento, 8:05 que podamos construir la estructura. 8:08 La página web real está bastante 8:10 no presionamos Guardar en nada. 8:12 >> Por supuesto, eso tiene todo el sentido. 8:14 Okay, gracias. 8:16 >> Sí, así que una vez que construyamos la UI, 8:17 entraré en el navegador, donde lo que estamos 8:20 Así que veamos, en el HTML, 8:26 Entonces, a continuación, necesitamos este icono de enlace. 8:32 Así que iremos aquí a enlace, 8:34 Pegaremos eso allí. 8:39 A continuación, tenemos estos dos elementos de lista. 8:41 Así que tenemos un enlace, no, 8:43 realmente no importa cuál sea cuál. 8:46 Así que simplemente copiaremos uno, y 8:49 pegaremos eso en uno de los li, y tenemos el otro. 8:51 Y lo pegaremos debajo. 8:57 Y el último icono para 9:05 Así que busquemos eso. 9:08 Copiar eso. 9:11 Me pregunto cómo puedo quitar esta interfaz de usuario de zoom de mi pantalla para 9:12 poder hacer clic en mi index.html. 9:18 >> Si presionas los puntos suspensivos y 9:20 >> Excelente, ¿viste esos también? 9:28 No. 9:33 >> Bueno, gracias. 9:35 [RISA] Y 9:37 Vamos a construir esto solo con CSS. 9:41 Y eso solo va a ser una entrada con el tipo de casilla de verificación. 9:43 Entonces en el último elemento de la lista para nuestra primera instancia de utilidades, 9:47 solo va a ser una entrada con el tipo de casilla de verificación. 9:52 Y podemos eliminar el atributo name, no lo vamos a necesitar. 9:56 Y en el id=darkMode. 9:59 Presiona Guardar, y el navegador debería verse bastante mal. 10:03 Necesitamos estilizar todo esto. 10:06 Pero haremos todo eso después de que terminemos de construir el resto de la interfaz de usuario. 10:08 Entonces, a continuación, tenemos nuestra entrada, que va a ser, 10:12 veamos esta pequeña respuesta aquí. 10:16 Entonces podemos seguir adelante y dar un marcador de posición 10:19 atributo y escribir "Responder...." 10:24 Y ahora, podemos trabajar en este último panel de utilidades en la parte inferior. 10:28 Entonces vamos a abrirlo aquí. 10:34 Está bien, entonces el primer elemento es solo uno. 10:38 Entonces haremos un <ul>, haremos esto exactamente como el de arriba. 10:40 Y esto será para nuestro signo de más. 10:43 Entonces podemos simplemente hacer esto, copiar el más, SVG. 10:45 Pega eso. 10:50 Y luego el siguiente <ul> tendrá nuestra cámara de video y el micrófono, entonces haz li*2. 10:53 Y encontraremos video, copiar. 11:00 Pegaremos eso. 11:04 Y ahora necesitamos encontrar el micrófono. 11:06 Ahí vamos. 11:09 Y pegaremos eso. 11:10 Entonces, a continuación, tenemos la sección con los emojis, la @ y las fuentes. 11:13 Entonces ul>li*3. 11:18 Y haremos emoji, que creo que es face-smile.svg. 11:23 Y tenemos la @, que creo que es solo @, sí. 11:31 Y tenemos las fuentes, font-solid. 11:39 Increíble, y el último elemento en esto será nuestro botón de envío CTA. 11:47 Entonces podemos simplemente crear otro li para esto como hicimos con la casilla de verificación. 11:54 Aquí, pondré el icono del plano de papel. 12:00 Y debajo, solo escribiré Enviar. 12:05 Entonces, creo que eso es todo para nuestro marcado. 12:08 Sí, eso es todo lo que necesitamos para la maqueta. 12:13 Entonces hemos terminado con nuestro HTML, y 12:15 podemos comenzar a trabajar en los estilos porque esto se ve bastante mal. 12:17 [RISA] Entonces déjanos arreglarlo. 12:20 Está bien, en nuestra hoja de estilos, abriré el HTML a 12:25 la derecha para que puedas ver un poco mejor. 12:31 Haré esto un poco más pequeño. 12:35 Si esto es demasiado pequeño para alguien, solo házmelo saber, y 12:37 haré el tamaño de fuente un poco más grande. 12:40 Entonces cerremos todo en el marcado y 12:42 echemos un vistazo a cómo se ve nuestra interfaz de usuario. 12:45 Entonces tenemos un hijo, que es chat-app. 12:48 Entonces seleccionemos eso a .chat-app. 12:51 Establece la altura mínima a 100vh. 12:54 Y estableceremos display: flex, y flex-direction, haremos column. 12:58 Y la razón de esto es porque el único elemento en nuestro chat-app es este 13:05 interfaz-de-chat, que en el mockup 13:09 Y una forma realmente fácil de hacer eso es 13:13 y luego dándole un margin-top de auto. 13:19 Entonces, escribiremos chat-interface, 13:21 y margin-top de auto. 13:27 Y funciona si lo escribo correctamente. 13:30 Excelente, no notarás nada aún 13:34 Entonces, si establecemos una regla para svg's y simplemente 13:38 que es solo temporal, 13:44 Pero verás que nuestra interfaz-de-chat está 13:48 que es exactamente lo que queremos. 13:53 Y si esto te parece confuso, 13:55 Básicamente está anidando esta interfaz-de-chat 14:00 es un hijo de ella. 14:05 No voy a entrar en demasiado detalle 14:06 escribirlo con CSS y tener la 14:10 Dentro de interfaz-de-chat, 14:14 que son nuestras utilidades, nuestra entrada, 14:18 Entonces, comencemos a trabajar en estas utilidades. 14:23 No tenemos nada más que elementos <ul> aquí. 14:29 Y me gustaría que todos estuvieran 14:33 que es la casilla de verificación en el lado derecho, 14:38 Entonces, déle un display de flex, 14:45 justify-content: flex-start. 14:53 Y si apuntamos, veamos, haremos ul, 15:00 y también le daremos un display de flex, 15:05 interfaz-de-chat, utilidades. 15:12 ¿Está escrito correctamente? 15:19 Allí, está bien, así que 15:27 Entonces, corrijamos eso. 15:31 Escríbelo correctamente de vuelta aquí. 15:39 Excelente, ahí vamos. 15:45 Entonces esto está comenzando a tomar forma. 15:47 Déle a nuestro ul un background-color. 15:49 Y usaremos estas variables CSS, 15:55 Entonces, lo que haremos es copiar 16:01 haremos background-color, 16:05 Y dentro de los paréntesis, 16:08 Y ahora, deberías ver un tipo de 16:12 Y si apuntamos al li y 16:18 podemos darle un color, 16:23 Y los svg's son imágenes, pero en realidad puedes 16:30 Entonces, haremos fill: var(--icon-color), y presionaremos Guardar. 16:38 Y podrías no notarlo, pero 16:42 es un poco más claro 16:44 Está bien, entonces estos elementos ul, 16:50 25 píxeles para darles 16:54 Estos li's les daremos 16:58 Hagamos tal vez 35 píxeles con un width 17:01 Y aquí, 17:08 digamos que tal vez 25 píxeles. 17:13 Y eso se ve bastante bien. 17:16 También, en el li, haremos un list-style 17:18 Excelente, esto está empezando a 17:24 Pero ahora, esto se ve 17:29 estos SVG están realmente en la esquina 17:32 Entonces, una forma fácil de centrarlos 17:36 darle un display de flex. 17:41 Podemos justify su content, center, 17:43 Excelente, ahora, los iconos están centrados 17:50 Hagámoslos un poco más pequeños, 17:56 Eso es demasiado pequeño. 17:59 Vamos. 18:00 Creo que eso se ve bastante bien. 18:01 Démonos a nuestro ul un poco de padding 18:04 Entonces podemos hacer padding, haz top y bottom, 18:07 solo haremos 0 con tal vez 0.25rem, 18:10 Excelente, esto está empezando 18:15 Y ahora, démonos un 18:18 1rem de margin-right, 18:23 Saquemos esto del camino. 18:29 Entonces ahora queremos mover los últimos 18:31 el camino hacia la derecha. 18:35 Y porque su padre usa flex, 18:37 debería decir que el ul un margin izquierdo. 18:44 Y la forma en que podemos hacer esto 18:48 darle un margin-left de auto. 18:54 Excelente, lo empujó todo el camino 18:57 Flex es increíble. 19:00 Removamos este margin-right 19:02 Entonces también podemos, en esta regla, 19:07 darle un margin-right de 0. 19:11 Excelente, debería espaciarlo 19:15 Démosle un poco de padding 19:18 Excelente, ahora, una cosa que olvidé es 19:28 Entonces hagámoslo ahora. 19:34 Background-color: y 19:36 Cópiala, y 19:42 Y para nuestro chat-interface, 19:48 también tenemos una variable. 19:53 Será background-color: var(--chat-interface-bg). 19:56 Presiona Guardar. 19:59 Y ahora tenemos nuestro color de fondo pero 20:04 esto se vea un poco mejor, 20:10 Excelente y le daré 20:15 algo pequeño como tal vez 0.33 rem. 20:19 Creo que eso se ve bien. 20:22 Hagamos este padding 20:25 Excelente, está bien, 20:28 Entonces cerremos nuestro anidamiento de utilities y 20:32 Podemos hacer un border de none y 20:39 estableceremos el contorno en ninguno. 20:43 Bien y eso ya se ve bastante bien. 20:47 Increíble, así que ahora vamos, 20:52 hagámoslos un poco más pequeños. 20:57 Hagamos como 18 píxeles, 21:00 Está bien, así que 21:07 Trabajemos en el interruptor de palanca. 21:10 Así que haremos esto con CSS puro. 21:13 Así que volvamos al marcado y 21:16 Démosle a este <li> una clase para que 21:20 Haremos toggle-switch, presiona Guardar. 21:23 Y ahora volvamos a este li y 21:27 queremos dirigirnos al li que 21:30 Démosle un display de none 21:36 Bien, lo hizo, está bien así que 21:39 Reiniciemos todo, 21:45 En realidad, eso sería para el ul. 21:54 Solo orientemos el input dentro y 21:56 haz -webkit-appearance, 22:01 A continuación, le daremos un ancho de, 22:09 Tendremos que anular el ancho para 22:14 Y para obtener la pequeña cosa adentro 22:22 necesitaremos posicionar el input que 22:27 haremos posición relativa Y 22:31 le daremos, creo que eso debería funcionar. 22:38 Trabajemos en el interruptor real 22:44 Así que configuraremos un elemento after. 22:48 Le daremos una posición de absoluta, 22:53 un top de 50%, un left de 50%. 22:57 Transformaremos 23:01 -50% en ambos ejes x e y. 23:05 Le daremos un contenido 23:10 Alto, veamos. 23:14 Estamos haciendo 50 píxeles de ancho, hagamos. 23:15 Hagamos 25 píxeles de alto y ancho en esto. 23:22 Quizás necesites jugar con ello pero 23:27 Bien, y 23:32 También tenemos esta configuración en 23:38 Sí, --toggle-color. 23:46 Y lo veo pero 23:54 Veamos aquí. 24:02 esta altura, esto arriba. 24:10 Revisemos 24:18 las herramientas de 24:25 desarrollador. 24:30 Allá vamos, está bien. 24:42 Así que tenemos nuestro input, 24:43 Elemento de lista toggle-switch. 24:51 Está bien, démonos esto 25:00 Y ahora necesito averiguar 25:09 por qué esto no está centrado. 25:13 Veamos. 25:18 ¿Alguien sabe si cometí un error ortográfico? 25:29 >> Nada como una demostración en vivo. 25:40 [TOS] 25:42 >> Cómo compartir traducir, mira. 25:44 >> Transformar traducir, 25:47 Olvidé el negativo en el eje X. 25:53 >> Bien hecho, Rob. 25:56 >> Eso habría tomado mucho tiempo 25:58 [RISA] ¡Genial, gracias! 26:01 Así que estableceremos la izquierda en 30, lo cual creo 26:05 Así que ahora si nos dirigimos a esta 26:10 podemos hacer eso solo con CSS. 26:15 Podemos dirigirnos con 26:19 Podemos darle un color de fondo. 26:27 Y usaremos nuestro color de acento que es el 26:30 Así que vamos a guardar. 26:35 Hagamos clic en nuestra casilla de verificación y 26:38 Pero está volviendo azul la entrada misma. 26:43 Así que démosle un 26:48 Genial, necesito un poco, 26:55 vamos a dar el relleno para 27:01 nuestro último elemento 0. 27:07 Ahí va, se ve un poco mejor y 27:11 le daremos ese relleno al 27:14 Aún no está haciendo lo que quiero que haga, 27:25 Así que actualizaré este 30% 27:31 se ve mucho mejor, genial. 27:37 Así que ahora nos dirigimos al elemento después 27:40 punto blanco dentro del interruptor de palanca 27:44 Podemos hacer eso escribiendo el después 27:49 pseudoelemento en el estado marcado. 27:54 Y le daremos una izquierda de, veamos, 28:00 estamos haciendo 35, hagamos 65%. 28:04 Genial, y lo empuja hacia allá pero 28:08 Así que vamos a dar una transición. 28:12 Izquierda de 0.3s para 28:19 nuestro, veamos dónde estamos 28:24 Así que esto será para la entrada, así que 28:37 Veamos qué tenemos. 28:42 Tenemos --toggle-bg aquí, así que usemos esto 28:43 Genial, eso se ve mucho mejor. 28:55 Y ahora tenemos un interruptor de palanca. 28:57 Genial, pero démosle un poco de 28:59 Haremos transición 29:06 Genial, me gusta eso. 29:11 Ahora, trabajemos en el botón Enviar y 29:14 Así que haz esto aquí, así 29:17 Así que cerremos este interruptor de palanca para 29:24 Supongo que tenemos que darle una clase, hacer esto fácil. 29:29 Hagamos nuestro botón Send, que es este último li. 29:32 Hagamos una clase de send-cta, guardemos. 29:38 Y ahora dirigiremos ese Display 29:46 a none solo para ver si está configurado correctamente. y lo está, genial. 29:51 Lo primero background-color establecido en nuestro --accent 29:56 Dale el color blanco, 30:00 svg también será blanco. 30:04 Y no estamos usando ninguna variable para 30:08 esto porque esto no cambiará entre tema claro u oscuro. 30:10 Bien, vamos aquí y configuremos el ancho. 30:17 Hagamos quizás 125 píxeles. 30:22 Es un poco grande, vamos a 100 píxeles. 30:26 Luego border-radius, 25 píxeles para esa forma de píldora. 30:29 Démonos un margen derecho de 0.25 rem para 30:33 nuestro svg, vamos a 0.5. 30:38 Está bien, así me gusta. 30:41 Así que básicamente nuestra UI para esto está completa. 30:43 Así que ahora agreguemos el modo oscuro para esto. 30:47 Así que vamos a nuestro archivo JavaScript, y abramos nuestro index.html a la derecha. 30:55 Déjame cerrar todo, está bien, 30:59 así que lo que queremos hacer es siempre que esta entrada esté aquí, es muy difícil de ver. 31:07 Está bien, así que cuando esta entrada está en estado marcado, 31:12 queremos agregar la clase de dark a nuestro body, lo cual es bastante simple de hacer. 31:18 Así que, agarremos esta entrada de casilla de verificación. 31:23 Llamaremos esto const, haré esto un poco más grande y abriré esto aquí. 31:26 Está bien, así que const darkModeToggle = document.getElementById('darkMode') 31:31 Y eso es porque esta casilla de verificación tiene la ID de darkMode. 31:36 Así que, agreguemos un oyente de eventos, 31:41 darkModeToggle.addEventListener() 31:43 Y como esto es una casilla de verificación que cambia su estado, 31:52 podemos usar el oyente de eventos de cambio. 31:59 Función de configuración y aquí, es bastante simple. 32:02 Solo escribiremos, bueno, supongo que pongamos el body en una variable también. 32:07 Creo que eso debería funcionar, document.body. 32:10 Así que haremos body.classList.toggle('dark'), 32:14 Creo que esa es la clase que estamos usando, solo asegurémonos. 32:19 Sí, está bien, así que básicamente, cuando el body obtiene la clase de dark, 32:31 todas estas variables serán sobrescritas con estas variables. 32:34 Así que, veamos si funcionó. 32:39 Bien, lo hizo pero olvidamos algunas cosas. 32:50 Parece que esta entrada necesita un color de fondo. 32:54 Así que vamos a nuestra entrada. 32:59 ¿Dónde está la entrada? 33:01 Aquí mismo, está bien. 33:04 Configurémoslo con un color de fondo. 33:08 Y aquí arriba notaremos, veamos, en realidad esto no necesita uno, 33:14 Aquí mismo, está bien. 33:17 Configurémoslo con un color de fondo. 33:18 Y aquí arriba notaremos, veamos, en realidad esto no necesita uno, 33:22 hagamos transparente para el color de fondo y 33:28 eso debería funcionar bien. Perfecto, funciona. 33:33 Entonces, lo único que me gustaría hacer ahora es tal vez hacer una transición un poco mejor. 33:39 Entonces, en todas partes donde estamos cambiando nuestras variables, 33:43 configuremos algún tipo de transición. 33:46 Entonces, la interfaz de chat hará una transición desde el fondo de, 33:49 hagamos 0.5s 33:55 Copiaré esto porque probablemente lo volveré a usar. 33:57 Bien, eso es para la interfaz de chat. 34:00 Hagámoslo también para la aplicación de chat. 34:03 Presionemos guardar y notemos si, bien, entonces 34:06 parece que nuestros iconos están tardando un poco, así que veamos. 34:09 Hagámoslo para el color de fondo de nuestros elementos ul en nuestro menú de utilidades. 34:14 Y para nuestros svgs, hacer la transición de la propiedad fill 0.5 segundos. 34:20 Guardemos, perfecto, todo se ve bastante consistente. 34:28 Entonces, está bien. 34:35 Tenemos una aplicación de chat que tiene un interruptor de modo oscuro. 34:36 Simplemente pongamos un golpe, y debería seguir funcionando todo, podemos actualizar los colores. 34:39 Entonces, si seguiste junto con nosotros o quieres echar un vistazo a este código cuando hayamos terminado, 34:45 subiré esto a GitHub, y dónde está, hey Brian, ¿aún estás aquí? 34:52 >> Sí. 35:01 >> Oye, ¿cómo recupero mis botones de control para nuestro zoom? 35:02 [RISA] >> Presiona escape. 35:06 >> ¿Escape? 35:08 >> Sí. 35:10 >> Perfecto. 35:11 Sabes mucho más sobre Zoom que yo. 35:11 [RISA] Está bien, entonces en realidad, sabes qué, compartiré mi pantalla una 35:14 vez más solo para poder mostrarles cómo me gusta enviar código a GitHub. 35:19 ¿Pueden ver mi pantalla aún? 35:27 >> Sí. 35:32 >> Perfecto, entonces, digamos que hemos terminado con esto. 35:33 Estamos contentos, queremos enviar esto de vuelta a GitHub. 35:36 Puedes hacer esto a través de la terminal, o puedes usar GitHub Desktop. 35:39 Pero si estás usando VS Code, lo hace bastante fácil. 35:42 Esta es una lista de todos mis cambios. 35:44 Y si quiero hacer un commit grande, 35:46 que haré, un commit final del código grande. 35:50 Podemos escribir nuestro mensaje de commit y 35:54 luego presionar estos tres puntos e impulsar. 35:57 Y ahora si volvemos a TreeHouse GitHub, 36:02 deberías ver el código aquí y, sí, el último commit fue hace poco, así que perfecto. 36:05 Si quieres echar un vistazo al código terminado, ahora está en el repositorio de GitHub que 36:11 está vinculado en la sección de comentarios o como quieras llamarlo en Zoom. 36:16 Perfecto, he terminado aquí. 36:23 >> Muchas gracias, Dustin. 36:26 Lo que realmente me gustó de ese seminario web es definitivamente, sí, 36:28 tuvimos la oportunidad de ver las habilidades francamente magistrales de Dustin cuando se trata de CSS. 36:33 Es decir, eso por sí solo fue impresionante. 36:41 Pero también realmente me gustó cómo VS Code jugó 36:43 un papel destacado en todo VS Code. 36:47 Es una herramienta simplemente increíble, 36:50 por ejemplo, o 36:55 cualquiera de la cantidad aparentemente interminable de 37:00 Realmente no es sorpresa que se esté 37:06 >> Sí. 37:11 >> IDE que existe hoy en día. 37:12 ¿Alguien tiene alguna pregunta sobre 37:14 >> Tengo una pregunta. 37:21 [RISA] ¿Alguien sabe si Emmet 37:22 Sé que solía tener que descargarlo, pero 37:27 no creo que descargue 37:29 >> [INAUDIBLE] 37:31 ¿O hay alguien que use 37:35 Sublime o creo que Brackets? 37:39 Yo uso VS Brackets. 37:41 Creo que muchas personas 37:43 >> Brian, ¿escuché correctamente 37:47 >> Sí, Emmet está integrado 37:53 Normalmente son muy aficionados a los complementos, pero 37:58 quiero decir que Emmet es tan 38:01 >> Obviamente útil como Dustin 38:02 sorpresa que ahora esté 38:07 >> Supongo que como VS Code es tan popular, 38:10 tal vez sería genial hacer contenido de video 38:12 Quiero decir, 38:18 >> Sí, me encanta esa idea. 38:20