📚Curso disponible
HTML y CSS
Aprende a construir tus propias páginas web desde cero con HTML y CSS, las bases del diseño y desarrollo web. Domina la estructura, el estilo y los fundamentos visuales que te permitirán dar vida a cualquier idea en la web, sin necesidad de experiencia previa.
23
Módulos
Contenido del curso
Tema 1 - Puesta en marcha del Entorno de Trabajo
6 lecciones
1.1. Instalación de Visual Studio Code
1.2. Navegadores recomendados para desarrollo
1.3. Estructura básica de carpetas y archivos
1.4. Primer archivo HTML
Teoría - Manual
Ejercicios
Tema 2 - Estructura y Elementos Básicos de HTML
10 lecciones
2.1. Etiquetas Principales de un Documento
2.2. Títulos y párrafos
2.3. Enlaces
2.4. Imágenes
2.5. Listas Ordenadas y Desordenadas
2.6. Tablas (introducción básica)
MANUAL I - Etiquetas HTML
MANUAL II - Estructuración HTML
Ejercicio 1
Ejercicio 2
Tema 3 - Formularios en HTML
16 lecciones
3.1. Estructura Básica de un Formulario
3.2. Campos de Texto y Área de Texto
3.3. Campos Tipo Password y Email
3.4. Select y Option (Listas Desplegables)
3.5. Checkbox y Radio
3.6. Botones de Formulario
3.7. Atributos Importantes de los Campos
3.8. Fieldset y Legend
3.9. Etiquetas Label y su Importancia
3.10. Formularios Completos y Buenas Prácticas
MANUAL I - Formularios
MANUAL II - Etiquetas y atributos de formularios
MANUAL III - Buenas prácticas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 4 - Multimedia en HTML (Sin CSS ni JS aún)
16 lecciones
4.1. Inserción de Vídeos (Video)
4.2. Inserción de Audio
4.3. iFrame (Contenido Embebido)
4.4. Canvas (Introducción)
4.5. SVG en HTML
4.6 Etiquetas de Contenido Semántico
4.7. Etiquetas para Texto Enriquecido
4.8. Citas y Código
4.9. Meter y Progress
4.10. Datos y Lista de Opciones
MANUAL I - Multimedia
MANUAL II - Etiquetas
MANUAL III - Citas, Meter , Progress, Datos y listas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 5 - Fundamentos de CSS
16 lecciones
5.1. ¿Qué es CSS y por qué es importante?
5.2. Cómo aplicar CSS a un HTML
5.3. Sintaxis básica de CSS
5.4. Selectores básicos (ETIQUETA, CLASE, ID)
5.5. Agrupación y combinaciones de selectores
5.6. Color en CSS
5.7. Fuentes y texto
5.8. Alineación y espaciado
5.9. Modelo de caja (introducción)
5.10. Primer proyecto práctico CSS
MANUAL I - Primeros pasos en CSS
MANUAL II - Agrupaciones, combinaciones, fuentes y texto
MANUAL III - Alineación, espaciado y modelo de caja
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 6 - Modelo de Caja en Profundidad - Bordes, Márgenes, Padding, Ancho y Alto
16 lecciones
6.1. ¿Qué es el modelo de caja?
6.2. Propiedad width y height
6.3. Propiedad padding
6.4. Propiedad margin
6.5. Propiedad border
6.6. box-sizing
6.7. Combinando margin, padding y borde
6.8. Propiedad outline
6.9. Uso de overflow
6.10. Proyecto práctico modelo de caja
MANUAL I - ¿Qué es el modelo de caja?
MANUAL II - Border y Box Sizing
MANUAL III - Propiedad outline y overflow
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 7 - Display, Position y Control de Flujo de los Elementos
15 lecciones
7.1. La propiedad display
7.2. El flujo normal del documento
7.3. position: static, relative, absolute
7.4. position: fixed y sticky
7.5. Propiedad float
7.6. Z-index
7.7. Ocultar y mostrar elementos
7.8. Centrado de elementos
7.9. Combinando display y position
MANUAL I - Display y Position
MANUAL II - Position: Fixed y Sticky, Float y Z-Index
MANUAL III - Elementos
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 8 - FlexBox (Maquetación Flexible)
15 lecciones
8.1. ¿Qué es Flexbox y por qué usarlo?
8.2. Activar un contenedor flex
8.3. Eje principal y eje cruzado
8.4. justify-content
8.5. align-items
8.6. align-self
8.7. flex-wrap
8.8. Orden y order
8.9. flex-grow, flex-shrink, flex-basis
MANUAL I - Flexbox, contenedor y ejes
MANUAL II - Justify-content, align-items, align-self,
MANUAL III - Flex-wrap, orden y order y distintos flex
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 9 - CSS Grid Layout (Maquetación de Cuadrículas)
15 lecciones
9.1. ¿Qué es CSS Grid y cuándo usarlo?
9.2. Activar un contenedor grid
9.3. Definir filas y columnas
9.4. Espaciado entre celdas
9.5. Posicionar elementos en el grid
9.6. Áreas nombradas
9.7. Grid implícito y explícito
9.8. Alineación en el Grid
9.9. Grid responsive
MANUAL I - CSS Grid, activar contenedor y definir filas/columnas
MANUAL II - Espaciado, posicionamiento y areas nombradas
MANUAL III - Grid implicito y explicito, alineación y responsive
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 10 - Diseño Responsive - Media Queries, Unidades Relativas y Breakpoints
16 lecciones
10.1. ¿Qué es el diseño responsive?
10.2. Introducción a media queries
10.3. Breakpoints recomendados
10.4. Unidades relativas - em, rem y porcentaje
10.5. Viewport units (vw, vh)
10.6. Combinar media queries y unidades relativas
10.7. Adaptar tipografías al responsive
10.8. Imágenes y media responsive
10.9. Layouts adaptativos sin frameworks
10.10. Buenas prácticas en diseño responsive
MANUAL I - Diseño responsive, media queries y breakpoints
MANUAL II - unidades relativas, viewports y combinaciones
MANUAL III - Adaptar tipografías, imagenes y layouts
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 11 - Animaciones y Transiciones CSS
16 lecciones
11.1. ¿Qué son las transiciones?
11.2. Propiedades que se pueden animar
11.3. Timing function
11.4. Retrasos y duración
11.5. ¿Qué es una animación con keyframes?
11.6. Repeticiones y dirección
11.7. Pausar y reanudar animaciones
11.8. Aplicar animaciones a múltiples elementos
11.9. Rendimiento y buenas prácticas
11.10. Accesibilidad en animaciones
MANUAL I - Transiciones, propiedades animables y timing
MANUAL II - Retrasos, keyframes y repeticiones
MANUAL III - Pausar, animaciones multiples, rendimiento y accesibilidad
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 12 - Buenas Prácticas en CSS (Oreganización, Manteinimiento y Legibilidad)
16 lecciones
12.1. Orden lógico en la hoja de estilos
12.2. Uso consistente de convenciones de nombres
12.3. Separar estructura y decoración
12.4. No sobreescribir innecesariamente
12.5. Comentarios útiles
12.6. Evitar selectores demasiado específicos
12.7. Uso de variables CSS (CSS custom properties)
12.8. Reutilización y DRY (Dont Repeat Yourself)
12.9. Archivos CSS limpios y ligeros
12.10. Preparar el CSS para crecer
MANUAL I - Orden, convenciones y estructura y decoración
MANUAL II - Sobrescritura, comentarios útiles y selectores específicos
MANUAL III - Variables CSS, DRY y archivos css limpios
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 13 - Heramientas del Navegador y Depuración CSS
16 lecciones
13.1. Introducción a las DevTools
13.2. Inspeccionar y modificar el CSS en tiempo real
13.3. Visualizar el modelo de caja (box model)
13.4. Gestionar clases y reglas aplicadas
13.5. Herramientas para layout (flex y grid)
13.6. Revisar media queries en vivo
13.7. Depurar problemas de cascada
13.8. Uso de la consola para depuración CSS
13.9. Medir tiempos y rendimiento del CSS
13.10. Buenas prácticas en la depuración con navegador
MANUAL I - Depuración y Optimización de CSS: Herramientas y Técnicas Prácticas
MANUAL II - Depuración y Diseño Responsivo con Herramientas de Navegador
MANUAL III - Dominando las DevTools para la Depuración y Diseño CSS
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 14 - Accesibilidad Básica en HTML y CSS
16 lecciones
14.1. ¿Qué es la accesibilidad web?
14.2. Estructura semántica y su impacto
14.3. Uso adecuado de atributos alt
14.4. Contrastes y colores
14.5. Tamaños de fuente y unidades relativas
14.6. Navegación por teclado
14.7. Enlaces y botones accesibles
14.8. Formularios accesibles
14.9. Uso de aria-* (introducción)
14.10. Pruebas básicas de accesibilidad
MANUAL I - Mejorando la Accesibilidad Web: HTML, CSS y Pruebas de Accesibilidad
MANUAL II - Mejorando la Accesibilidad Web con ARIA y HTML Semántico
MANUAL III - Accesibilidad Web y Navegación por Teclado en HTML y CSS
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 15 - CSS Variables (Custom Properties)
16 lecciones
15.1. ¿Qué es una CSS Variable?
15.2. Declarar variables en :root
15.3. Usar variables en propiedades
15.4. Variables locales (scoped)
15.5. Variables en media queries
15.6. Variables en calc()
15.7. Organización de variables
15.8. Variables y mantenimiento del código
15.9. Accesibilidad y variables
15.10. Buenas prácticas y errores comunes
MANUAL I - Dominando las Variables CSS para un Código Eficiente y Responsivo
MANUAL II - Dominando Variables CSS: Alcance, Accesibilidad y Aplicaciones
MANUAL III - Gestión Profesional de Variables en HTML y CSS
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 16 - CSS Avanzado para Layout - Flexbox y Grid
16 lecciones
16.1. Introducción al diseño flexible
16.2. Contenedor Flex básico
16.3. Control vertical con Flexbox
16.4. Flex wrap y orden
16.5. Grid básico_ contenedor y filas_columnas
16.6. Posicionar elementos en Grid
16.7. Responsive con Grid y Flexbox
16.8. Gap y espaciado
16.9. Auto-fit y auto-fill en Grid
16.10. Buenas prácticas en layouts modernos
MANUAL I - Dominando CSS Grid, Flexbox y Diseño Responsivo
MANUAL II - Dominando CSS Grid y Flexbox para Diseños Web Responsivos
MANUAL III - Dominando Flexbox, Grid y Espaciado en Diseño Web Moderno
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 17 - Tipografías Web Avanzadas
16 lecciones
17.1. Diferencia entre tipografías seguras y personalizadas
17.2. Cómo integrar Google Fonts
17.3. Declaración de familias tipográficas
17.4. font display y su impacto
17.5. Tamaño de fuente y unidades
17.6. Pesos y estilos de fuente
17.7. Ajustes de línea y espaciado
17.8. Text transform y decoración
17.9. Responsividad en tipografía
17.10. Buenas prácticas con tipografías
MANUAL I - Dominando las Fuentes y Tipografías en HTML y CSS
MANUAL II - Dominando la Tipografía en CSS: Estilos, Espaciado y Responsividad
MANUAL III - Dominando la Tipografía en CSS: Transformaciones, Decoraciones y Fuentes Personalizadas
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 18 - Media Queries Avanzadas y Estilos para Impresión
15 lecciones
18.1. Repaso de media queries básicas
18.2. Media queries para dispositivos específicos
18.3. Media queries combinadas (condiciones múltiples)
18.4. Media queries y rendimiento
18.5. Uso de prefers color scheme
18.6. Media queries con orientación
18.7. Media queries para resolución_píxeles
18.8. Estilos para impresión
18.9. Buenas prácticas en media queries
MANUAL I - Dominando Media Queries y Modos de Color en CSS
MANUAL II - Dominando Media Queries y Orientación en CSS
MANUAL III - Aplicación Profesional de Media Queries en CSS
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 19 - Introducción a Bootstrap 5
16 lecciones
19.1. Qué es Bootstrap y para qué sirve
19.2. Cómo incluir Bootstrap en un proyecto
19.3. Sistema de contenedores
19.4. Grid system básico
19.5. Tipografía y clases de texto
19.6. Botones
19.7. Imágenes responsivas
19.8. Colores y utilidades
19.9. Responsive helpers
19.10. Buenas prácticas con Bootstrap
MANUAL I - Dominando Bootstrap: Diseño Responsivo, Componentes y Prácticas Efectivas
MANUAL II - Maquetación y Estilos con Bootstrap: Grids, Imágenes Responsivas y Tipografía
MANUAL III - Dominando Bootstrap: Colores, Espaciado y Diseño Responsivo
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 20 - Componentes Esenciales de Bootstrap 5
16 lecciones
20.1. Navbars
20.2. Cards
20.3. Alerts
20.4. Accordion
20.5. Modals
20.6. Carousel
20.7. Badges y labels
20.8. Progress bar
20.10. Buenas prácticas con componentes
20.9. Spinners
MANUAL I - Creación y Optimización de Componentes Web con HTML y CSS
MANUAL II - Creación y Personalización de Alertas, Navbars y Modals con HTML, CSS y Bootstrap
MANUAL III - Creación y Mejora de Elementos Web con HTML, CSS y JavaScript
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 21 - Flexbox en Profundidad
16 lecciones
21.1. ¿Qué es Flexbox y cuándo usarlo?
21.2. Activar Flexbox
21.3. Dirección de los elementos
21.4. Alineación en el eje principal
21.5. Alineación en el eje cruzado
21.6. Multilínea con Flexbox
21.7. Tamaños y proporciones
21.8. Orden de los elementos
21.9. Gap y separación entre elementos
21.10. Buenas prácticas con Flexbox
MANUAL I - Dominando Flexbox: Orden, Tamaños, Dirección y Multilínea en CSS
MANUAL II - Dominando Flexbox: Aplicación, Buenas Prácticas y Errores Comunes
MANUAL III - Dominando Flexbox: Alineación, Distribución y Dirección
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 22 - CSS Grid en Profundidad
13 lecciones
22.1. Activar Grid
22.2. Definir columnas y filas
22.3. Grid Gap
22.4. Colocación manual de elementos
22.5. Grid auto-fit y auto-fill
22.6. Orden y superposición
22.7. Buenas prácticas con CSS Grid
MANUAL I - Dominando CSS Grid: Superposición, Reordenamiento y Buenas Prácticas
MANUAL II - Dominando CSS Grid: Creación y Adaptación de Diseños Responsivos
MANUAL III - Dominando Grids en HTML y CSS: Creación y Espaciado
Ejercicio 1
Ejercicio 2
Ejercicio 3
Tema 23 - Accesibilidad Aplicada a CSS
15 lecciones
23.1. Contraste de colores
23.2. Fuentes legibles
23.3. Unidades relativas para escalado
23.4. Focus visible
23.5. Espaciado y tamaño de elementos interactivos
23.6. Animaciones responsables
23.7. Uso de media queries para accesibilidad
23.8. Evitar contenido que bloquea
23.9. Buenas prácticas CSS y accesibilidad
MANUAL I - Mejorando la Accesibilidad Web con HTML y CSS
MANUAL II - Diseño Web Accesible: Overlays, Escalado y Animaciones Responsables
MANUAL III - Mejorando la Accesibilidad Web con CSS Avanzado
Ejercicio 1
Ejercicio 2
Ejercicio 3
¿Listo para empezar?
Aprende a desarrollar desde 0 con IA integrada. Practica, resuelve retos reales, con correcciones inmediatas y completamente tutorizado.