HTML y CSS Moderno

Lección: Introducción a HTML y estructura básica body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.7; max-width: 900px; margin: 0 auto; padding: 20px; color: #333; background-color: #f9f9f9; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } h2 { color: #2980b9; margin-top: 30px; padding-bottom: 5px; border-bottom: 1px solid #ddd; } h3 { color: #16a085; } p { margin-bottom: 15px; } pre { background-color: #2d2d2d; color: #f8f8f2; pa

Lección: Elementos de texto y encabezados - Fundamentos de HTML5 body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } h2 { color: #2980b9; margin-top: 30px; padding-bottom: 5px; border-bottom: 1px solid #ddd; } h3 { color: #16a085; } p { margin-bottom: 15px; } pre { background-color: #2d3a4b; co

Lección: Enlaces, imágenes y rutas - Fundamentos de HTML5 body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; } h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-top: 40px; } h3 { color: #2980b9; margin-top: 25px; } p { margin-bottom: 15px; } pre { background-color: #2d3a4b; color: #ecf0f1; padding: 15px; border-radius: 5px; overflow-x: aut

Tipo de lección: QuizEvaluación del móduloResponde estas preguntas para comprobar que puedes aplicar los criterios principales del módulo.

Lección: Introducción a CSS y conexión con HTML body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; } h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-top: 40px; } h3 { color: #2980b9; margin-top: 25px; } p { margin-bottom: 15px; } pre { background-color: #2d3a4b; color: #e0e0e0; padding: 15px; border-radius: 5px; overflow-x: auto; border-

Lección: Selectores, colores y tipografía en CSS body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; } h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-top: 40px; } h3 { color: #2980b9; margin-top: 25px; } p { margin-bottom: 15px; } pre { background-color: #2d3a4b; color: #ecf0f1; padding: 20px; border-radius: 8px; overflow-x: auto; borde

Lección: Modelo de Caja, Padding, Margin y Border /* Estilos mínimos para legibilidad de la lección */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; } h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-top: 40px; } h3 { color: #2980b9; margin-top: 25px; } p { margin-bottom: 15px; } pre { background-color: #2d3a4b; color: #ecf0f1; paddi

Tipo de lección: QuizEvaluación del móduloResponde estas preguntas para comprobar que puedes aplicar los criterios principales del módulo.

Lección: Flexbox para layouts flexibles - HTML y CSS Moderno body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; } h2 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; margin-top: 40px; } h3 { color: #2980b9; margin-top: 25px; } p { margin-bottom: 15px; text-align: justify; } pre { background-color: #2d3a4b; color: #e0e0e0; padding: 20px; border-rad

Introducción a CSS GridCSS Grid Layout representa un sistema de diseño bidimensional revolucionario que transformó completamente la manera en que construimos interfaces web. A diferencia de Flexbox, que trabaja en una sola dirección, Grid nos permite controlar simultáneamente filas y columnas, abriendo un mundo de posibilidades para crear layouts complejos con una elegancia y simplicidad que antes eran impensables.En esta lección exploraremos las técnicas avanzadas que te permitirán dominar CSS

En el panorama actual del desarrollo web, crear sitios que se adapten a cualquier dispositivo dejó de ser una opción para convertirse en una necesidad imperativa. Los usuarios acceden a la web desde teléfonos inteligentes, tabletas, computadoras de escritorio e incluso televisores inteligentes, cada uno con diferentes tamaños de pantalla y resoluciones. El diseño responsivo es el enfoque que nos permite crear sitios web flexibles que responden y se adaptan a estas diversas condiciones de visuali

Tipo de lección: QuizEvaluación del móduloResponde estas preguntas para comprobar que puedes aplicar los criterios principales del módulo.