Curso de CSS
Aprendé a diseñar sitios modernos con CSS: colores, tipografías, layouts, flexbox, grid, animaciones y diseño responsive para proyectos reales.
Módulo 1 - Conceptos básicos y sintaxis de CSS
- • Conceptos básicos y sintaxis de CSS
- • Introducción a CSS y su relación con HTML.
- • Sintaxis y estructura de CSS.
- • Cómo se aplica CSS (navegador, cliente, usuario).
- • Uso y configuración de Normalize.css.
- • Introducción a ID y CLASS: definición y aplicaciones.
Módulo 2 - Selección y jerarquía en CSS
- • Selección y jerarquía en CSS
- • Formas de seleccionar elementos: adyacentes, hijos, hermanos y atributos.
- • Entendiendo la especificidad: cómo se calcula.
- • Jerarquía en CSS: importancia y buenas prácticas.
Módulo 3 - Metodología y unidades de medida
- • Metodología y unidades de medida
- • Introducción a la metodología BEM.
- • Cómo trabajar con BEM para un código más organizado.
- • Unidades de medida absolutas y relativas: px, em, rem, %, etc.
Módulo 4 - Colores y transparencias
- • Colores y transparencias
- • Uso de colores en CSS.
- • Colores reservados y personalización.
- • Colores RGB (decimal, hexadecimal, porcentual).
- • Añadiendo transparencia a colores: rgba y hsla.
Módulo 5 - Modelo de caja en CSS
- • Modelo de caja en CSS
- • Entendiendo el modelo de caja en CSS.
- • Propiedades width y height.
- • Manejo de margenes (margin) y relleno (padding).
Módulo 6 - Backgrounds y gradientes
- • Backgrounds y gradientes
- • Uso de background-color, background-image, background-position, y más.
- • Propiedades avanzadas: background-clip, attachment, blend-mode.
- • Creación de gradientes: linear-gradient y radial-gradient.
Módulo 7 - Estilos de texto y fuentes
- • Estilos de texto y fuentes
- • Uso de font-family, font-size, font-weight y font-style.
- • Integración de Google Fonts en proyectos.
- • Alineación de texto: text-align, letter-spacing, word-spacing.
- • Control de altura de línea: line-height.
- • Decoración de texto y listas: text-decoration, list-style.
Módulo 8 - Bordes y contornos
- • Bordes y contornos
- • Uso de border: ancho, estilo y color.
- • Personalización con border-radius y outline.
- • Propiedades avanzadas de bordes: border-image y sus variantes.
Módulo 9 - Sombras y posicionamiento
- • Sombras y posicionamiento
- • Creación de sombras: box-shadow y text-shadow.
- • Propiedades de posición: static, relative, absolute y fixed.
Módulo 10 - Bloques y disposición de elementos
- • Bloques y disposición de elementos
- • Entendiendo display: block, inline, y inline-block.
- • Control del flujo y organización de elementos en CSS.
Módulo 11 - Flexbox: diseño flexible
- • Flexbox: diseño flexible
- • Propiedades principales: flex-grow, flex-shrink, flex-basis.
- • Alineación de elementos: justify-content, align-items, align-self.
- • Dirección y orden: flex-direction, order, flex-wrap, align-content.
Módulo 12 - Grid: diseño avanzado
- • Grid: diseño avanzado
- • Uso de grid-template-areas y repeat.
- • Propiedades grid y estructura de diseño.
- • Control de columnas y filas: column-gap, row-gap.
Módulo 13 - Interactividad y diseño responsive
- • Interactividad y diseño responsive
- • Uso de z-index y manejo de superposición.
- • Propiedades overflow, visibility y opacity.
- • Creación de transiciones y animaciones: hover, transform, transition, animation.
- • Diseño responsive con CSS.