CSS Essentials

Acerca de este curso

Este curso proporciona una introducción práctica y completa a las hojas de estilo en cascada (CSS), fundamentales para el diseño visual de páginas web. Los estudiantes aprenderán a utilizar selectores, aplicar colores, gestionar el diseño de cajas, establecer tipografías, crear diseños flexibles y adaptativos, y comprender conceptos clave como herencia, especificidad y buenas prácticas de accesibilidad.

Objetivos

Al finalizar el curso, los alumnos serán capaces de:

• Comprender el propósito y funcionamiento del CSS.
• Aplicar estilos visuales mediante selectores y propiedades.
• Diseñar estructuras de página usando cajas, colores, fuentes y layouts flexibles.
• Controlar la presentación responsive de un sitio web.
• Aplicar buenas prácticas de accesibilidad y organización de código CSS.

Duración

30 horas - Modalidad online

Programa

Módulo 1: Fundamentos de CSS.

• Introducción a CSS.
• Incluir CSS en una página web.
• Crear y enlazar hojas de estilo externas.
• Archivos y directorios CSS.
• Sintaxis de CSS.
• Comentarios en CSS.
• Aplicar selectores a elementos HTML.
• Cascada, especificidad y herencia en CSS.
• PROYECTO: Estilizar una página web sencilla.

Módulo 2: Propiedades y valores.

• Colores y modelos de color.
• Propiedades relacionadas con el color.
• Propiedades de fondo y funciones de degradado.
• Propiedades abreviadas y extendidas en CSS.
• Propiedades de estilo de texto en CSS.
• Propiedades de listas.
• Propiedades de hipervínculos.
• Propiedades de imagen.
• PROYECTO: Crear una página de portafolio.

Módulo 3: Modelo de caja.

• Introducción al modelo de caja.
• Conceptos esenciales del modelo de caja.
• Añadir fondos a elementos de caja.
• Control del diseño del contenido.
• Control de la visibilidad de elementos.
• Posicionamiento en CSS.
• Personalización de tablas con CSS.
• Personalización de formularios con CSS.
• PROYECTO: Construcción de una página de productos.

Módulo 4: Flotantes y media queries.

• Opciones de diseño en CSS.
• Fundamentos de los elementos flotantes.
• Crear diseños multicolumna con floats.
• Media queries.
• Crear una cuadrícula con floats.
• Ejemplos prácticos con floats.
• PROYECTO: Crear un diseño responsive multicolumna.

Módulo 5: Flexbox y CSS Grid.

• Fundamentos de Flexbox.
• Cómo usar Flexbox.
• Personalización del contenedor Flex.
• Personalización de los elementos Flex.
• Ejemplos de diseño con Flexbox.
• Fundamentos de CSS Grid.
• Propiedades de CSS Grid.
• Ejemplos de diseño con Grid.
• PROYECTO: Crear una página responsive de portafolio con Flexbox y Grid.

Módulo 6: Transiciones, interactividad y animaciones.

• Transiciones e interactividad.
• Transiciones y ejemplos prácticos.
• Animaciones en CSS.
• Crear animaciones simples en CSS.
• PROYECTO: Crear animaciones y transiciones atractivas.

Módulo 7: Bootstrap.

• Frameworks CSS.
• Primeros pasos con Bootstrap.
• Estructura de un proyecto en Bootstrap.
• Sistema de cuadrícula de Bootstrap.
• Clases utilitarias de Bootstrap.
• Imágenes y medios responsive.
• Componentes de Bootstrap.
• Personalización de Bootstrap con CSS.
• Resolución de problemas comunes en Bootstrap.
• PROYECTO: Crear una página responsive sencilla con Bootstrap 5.

Módulo 8: Sass y Less.

• Preprocesadores CSS.
• Fundamentos de Sass.
• Fundamentos de Less.
• PROYECTO: Proyecto práctico con Sass.

Módulo 9: Accesibilidad.

• Introducción a la accesibilidad web con CSS.
• Estilo claro y coherente.
• Ajuste de contraste y tamaño de fuente.
• Accesibilidad para lectores de pantalla.
• PROYECTO: Proyecto práctico de accesibilidad web con CSS.

Proyecto final de curso.

• Proyecto final de laboratorio: Diseño web integral.