Hola a todos, bienvenidos de nuevo. En el pasado, hemos hecho código juntos segmentos, donde he codificado, tú has codificado conmigo, y hemos cometido muchos pequeños errores juntos. Hoy, realmente quiero hacer una revisión del código en su lugar. Quiero que te sientas y veas algunos de los códigos que he escrito y veas cómo las pequeñas cosas que hemos estado aprendiendo se están acumulando para crear páginas web más complejas. Así que vamos a empezar con algo de HTML. Por aquí, tengo un código que solo va a crear un montón de diferentes divs. Lo único que podría ser nuevo que no ha visto antes es esta idea del índice de pestañas. Lo que hace el índice de pestañas es que le permite al navegador saber que si alguien está tabulando a través de su página, realmente desea poner diferentes elementos en foco en un orden diferente. Entonces, en este caso, lo primero sería A, y luego C, y luego B, etc. Es solo un nivel más de accesibilidad que quería presentarte en nuestro código. La única otra cosa que quería que supieras en este HTML es que el último div tiene una clase animada en él. He hecho este un poco diferente para que puedas ver las transiciones y transformaciones en acción. Entonces, sigamos adelante y veamos el CSS y jugemos con el navegador. Ahora, cuando comenzamos en la parte superior, puedes ver que acabo de marcar el div para que sean pequeñas cajas donde puedas ver el contenido, y no todo está demasiado aplastado. Lo único que puede que aún no haya usado usted mismo en su código es esta idea de transición de dos segundos de facilidad. Esto va a dejar que el navegador sepa que cuando cambiemos de estado, queremos tomar unos dos segundos y facilitarlo. Pero primero, veamos el enfoque. En mi enfoque, digo cambiar el color de fondo. Así que ahora, cuando vaya a mi navegador, voy a empezar a tabular a través de los diferentes elementos. Y cuando lo haga, puedes ver que todos se encienden. Voy a actualizar la página, porque la que esperaba ir primero no lo hizo. Eso es porque había estado tabulando antes de que empezáramos a escribir. Así que aquí vamos. A cambia de color, y luego C, y luego B. Esto es lo que le da al usuario la capacidad de saltar primero a las secciones más importantes. Muy bien, entonces después del enfoque, hablemos de flotar. Ahora, cuando el cursor entra en el caso, lo que estoy diciendo es hacer el ancho de 200 píxeles, era 100, y cambiar el color de fondo. Así que echemos un vistazo. Voy a resaltar sobre C justo aquí, y luego B, y luego A. Y pueden ver que es una transición muy agradable y suave. Pero una de las cosas que quiero que notes es que cuando no estoy flotando sobre nada, en realidad tenemos A a F en la línea superior y luego G a I en la parte inferior. Cuando comienzas a ir un poco demasiado loco cambiando el tamaño de las cosas dinámicamente, puedes tirar todo fuera de la posición. Así que asegúrate de usar esto con moderación. Muy bien, vayamos a la genial, la última. Si recuerdas, hice un div, y lo configuré para ser animado porque usé la clase animada. En este momento, la única diferencia es que el color de fondo es un poco verde, pero quiero mostrarte lo que sucede cuando pase el cursor sobre él. Cuando lo haga, voy a poner en marcha una transformación donde voy a decir que rota esto 360 grados. Y además, en lugar de tener una opacidad de 0.4, lo que significa que se borra, despeje un poco, configúrelo a todo color. Aquí vamos. Creo que eso es genial. Lo rotamos. Cuando salimos del flotador, gira hacia atrás. Estas son las cosas divertidas que puedes agregar a tu página cuando aprendes a codificar que realmente te dan esta sensación de, hey, lo estoy haciendo, estoy haciendo que las cosas cambien. Así que lo que realmente te animaría a hacer ahora es volver atrás, revisar la conferencia de transición, revisar la conferencia de transformación, asegurarse y ver si esos conceptos ahora tienen un poco más de sentido que has visto el código en acción. Y espero que juegues con este código, cambies los valores y realmente te diviertas con él. Así que buena suerte.