CURSO DE CSS COMPLETO: De Principiante a Front-End 2024

Video Description

Curso COMPLETO de CSS desde Cero para convertirte en Desarrollador Front-End y puedas crear tus propias páginas web 💻 ▶ No te pierdas más directos en: https://www.twitch.tv/midudev 00:00:00 - Introducción a CSS 00:03:04 - Qué es CSS? 00:06:43 - El significado de “Cascada” 00:07:45 - Recursos CSS que recomiendo y que no 00:11:23 - Dónde poner los estilos? 00:13:42 - Partes de CSS (selector, propiedad y valor) 00:18:23 - Colores 00:28:03 - Selectores - classes 00:29:45 - Selectores - ID 00:32:07 - Herramienta para practicar (recomendación) 00:32:35 - Herencia 00:37:48 - Valores especiales de la herencia 00:42:17 - pseudo-clases 00:43:57 - border y contorno 00:45:58 - más pseudoclases 00:47:29 - simular estados (hover, visible, etc…) 00:48:28 - first-child, last-child 00:49:40 - Selectores combinados 00:55:34 - Operador - Afectar por primer nivel 00:59:10 - Operador ˜ (hermano siguiente) 01:01:04 - Operador plus 01:02:52 - Cascada 01:05:53 - fallbacks 01:08:04 - Especificidad 01:13:39 - Estilos en línea 01:14:25 - Forma de saltarse la especifidad 01:18:37 - Unidades relativas y absolutas 01:24:26 - Reset CSS y Normalize 01:27:00 - Modelo de la caja 01:34:40 - Propiedades de la caja 01:40:35 - box-sizing 01:42:25 - FLEXBOX 01:43:32 - Modelo de la Caja 01:49:55 - Desbordamiento: Overflow 01:54:45 - text-overflow 01:58:02 - Position 02:00:34 - Absolute y relative 02:05:22 - Centrar con absolute 02:07:14 - fixed 02:10:42 - sticky 02:13:57 - z-index 02:27:34 - Flexbox 02:32:02 - display: flex 02:33:36 - flex-direction 02:36:25 - direction 02:37:00 - writing-mode 02:38:07 - flex-wrap 02:42:35 - Atajo de flex-direction/wrap (flex-flow) 02:42:55 - Controlar el espacio de los elementos 02:49:58 - Atajo de flex-grow-shrink-basis 02:50:53 - Ejemplo de flex 02:53:25 - Cambiar el orden de cada elemento 02:55:59 - Posicionar elementos: Jusitify-content 03:00:05 - gap 03:01:04 - distribución en el eje cruzado 03:04:14 - align-items 03:04:46 - distribución en el eje cruzado 2 03:08:22 - los más usados 03:12:43 - GRID 03:16:33 - Qué es Grid? 03:20:30 - Grid vs Flex 03:22:37 - Grid en código 03:24:06 - Nuestra primer Grid 03:29:36 - Creando más columnas 03:30:23 - Unidad especial 03:36:42 - grid template rows 03:38:30 - Cuadricula vacia 03:40:11 - Filas automaticas 03:42:46 - Propiedad repeat() 03:47:36 - Ejercicio practico Excel (recomendado) 03:55:56 - Que no hacer + Ejercicio 04:03:19 - Auto-fill auto-fit 04:14:23 - grid-column-start/end 04:16:36 - grid-row-start/end 04:28:17 - Creando un Layout 04:33:00 - Grid áreas 04:39:32 - Alineación en línea de los elementos 04:43:17 - Alineación en bloque 04:48:58 - ANIMACIONES Y TRANSICIONES 04:51:33 - 2 formas de hacer animaciones 04:51:58 - Transiciones 04:53:47 - :hover 04:56:39 - propiedad transition-duration 04:57:58 - Error común sobre las transiciones 04:58:47 - Diferentes estados 05:01:19 - El problema del transition all 05:06:53 - cubic bezier + HACK 05:09:46 - Control de Tiempos en Transiciones CSS 05:15:31 - atajo transition 05:18:05 - Propiedades que podemos animar + Trucos 05:24:29 - Animaciones + ejemplos 05:43:45 - estado con animation-fill-mode 05:46:53 - atajo para las animaciones (animation) 05:51:42 - FPS 05:56:46 - Animaciones con Scroll 06:02:15 - animation timeline 06:06:33 - Galería de imágenes 06:08:47 - Creando navbar para animarlo 06:12:47 - Rango de las animaciones 06:16:10 - Animando galería