CURSO: CSS Y DISEÑO WEB RESPONSIVE PARA REFUERZO ESCOLAR CON DEEPSEEK AI

CURSO: CSS Y DISEÑO WEB RESPONSIVE PARA REFUERZO ESCOLAR CON DEEPSEEK AI

Subtítulo: Transforma tus páginas HTML en sitios web profesionales, adaptables a móviles, tabletas y ordenadores, con hojas de estilo en cascada, animaciones sutiles y maquetación moderna, guiado por un tutor que te explica cada propiedad y te ayuda a depurar cada píxel

—

FICHA TÉCNICA

Campo Descripción

Código MUN-CSS-001

Carga horaria total 45 horas (recomendado: 3 horas por semana durante 15 semanas)

Modalidad 100% textual guiada por DeepSeek AI, con ejercicios prácticos de estilizado guiados paso a paso, depuración de diseños, retos de maquetación y un proyecto final de sitio web responsive completo

Nivel educativo Adaptable a Educación Secundaria Obligatoria (4.º curso), Bachillerato, Formación Profesional (Informática, Comercio, Imagen y Sonido) y ámbito universitario. La complejidad de los ejercicios se gradúa según el nivel del alumno.

Riesgo Bajo (frustración con la especificidad de los selectores, confusión con el modelo de caja al inicio, posible inconsistencia entre navegadores si no se usan prefijos o propiedades estándar, leve dependencia de frameworks sin comprender CSS puro). La IA no ve la pantalla del alumno; el facilitador humano debe verificar la comprensión del layout.

Dirigido a Estudiantes que ya conocen HTML y quieren aprender a diseñar y maquetar páginas web visualmente atractivas, adaptables a cualquier dispositivo. Ideal como continuación del curso de HTML y Desarrollo Web Básico.

Prerrequisito Haber completado el curso de HTML y Desarrollo Web Básico (MUN-HTML-001) o tener conocimientos equivalentes de HTML5 semántico. Disponer de un editor de código (VS Code recomendado) y un navegador web actualizado (Chrome o Firefox con herramientas de desarrollo). Conexión a internet. Autorización parental para menores de edad.

Corpus obligatorio cargado en DeepSeek Documentación oficial de CSS3 (MDN Web Docs adaptada), Referencia de propiedades CSS, Guía de diseño web responsive (Mobile First), Manual de Flexbox y CSS Grid, Guía de animaciones y transiciones CSS, Lista de prefijos de navegador y propiedades experimentales

Certificación Diploma de aprovechamiento en CSS y Diseño Web Responsive con IA. NO es una certificación profesional de desarrollo web.

—

AVISO PARA EL ESTUDIANTE (LECTURA OBLIGATORIA)

CSS es el arte de vestir tus páginas web. Con HTML construiste el esqueleto; ahora le pondrás piel, ropa y estilo.

DeepSeek te guiará en cada propiedad, te ayudará a entender por qué un elemento no se coloca donde quieres y te sugerirá mejoras de diseño. Pero:

· La IA no ve tu pantalla. Descríbele qué estás viendo para que pueda ayudarte. Si un estilo no se aplica, comprueba la especificidad, la sintaxis y si el archivo CSS está correctamente enlazado.

· El diseño responsive no es opcional. Más del 60% del tráfico web viene de dispositivos móviles. Tus páginas deben verse bien en cualquier pantalla.

· CSS no es magia, es cascada. Si entiendes la cascada, la herencia y la especificidad, entenderás CSS.

· Practica cada concepto. No leas sobre Flexbox; construye layouts con Flexbox. La maquetación solo se aprende haciendo.

—

MAPA GENERAL DEL CURSO

Parte Título Horas Enfoque

I Los fundamentos del estilo: sintaxis, selectores y modelo de caja 12 h Cómo enlazar CSS, selectores, herencia, modelo de caja, colores y tipografía

II Layout y posicionamiento: de lo estático a lo dinámico 14 h Posicionamiento, Flexbox, CSS Grid, diseño responsive, media queries

III Efectos visuales y diseño avanzado 12 h Fondos, degradados, sombras, transiciones, animaciones, variables CSS

IV Proyecto integrador: tu sitio web responsive completo 7 h Diseño, maquetación Mobile First, depuración y presentación

—

PARTE I: LOS FUNDAMENTOS DEL ESTILO. SINTAXIS, SELECTORES Y MODELO DE CAJA

(12 horas)

—

Capítulo 1. Bienvenido al taller de diseño web

(1 hora)

· Inciso 1.1. ¿Cómo funciona este curso? Tú escribes CSS; DeepSeek te guía. Sin miedo al píxel rebelde.

· Inciso 1.2. Conoce a tu tutor DeepSeek: cómo pedirle que revise tu hoja de estilos, que te explique por qué un selector no funciona, o que te sugiera una paleta de colores.

· Inciso 1.3. Tu cuaderno de diseñador/a web: paletas, combinaciones de selectores, soluciones a errores de maquetación.

· Inciso 1.4. Primera provocación: «DeepSeek, ¿por qué una misma página web puede verse completamente diferente en dos navegadores si el HTML es idéntico? Explícame el papel de CSS.»

—

Capítulo 2. Sintaxis y formas de aplicar CSS al HTML

(2 horas)

· Inciso 2.1. ¿Qué es CSS? Hojas de estilo en cascada que indican al navegador cómo presentar visualmente los elementos HTML.

· Inciso 2.2. Tres formas de aplicar CSS:

  1. En línea (inline): style=»color: red;» dentro de la etiqueta HTML. Solo para casos muy puntuales. No recomendado.

  2. Interna (embedded): <style>…</style> en el <head>. Útil para páginas únicas o pruebas rápidas.

  3. Externa (external): archivo .css enlazado con <link rel=»stylesheet» href=»estilos.css»>. Recomendada: separa estructura (HTML) de diseño (CSS), facilita el mantenimiento y la reutilización.

· Inciso 2.3. Sintaxis de una regla CSS: selector { propiedad: valor; }. Ejemplo: h1 { color: navy; font-size: 2em; }.

· Inciso 2.4. Organización del archivo CSS: comentarios (/* */), agrupación de reglas por secciones, orden alfabético de propiedades o agrupación lógica.

· Inciso 2.5. Ejercicio guiado: «DeepSeek, tengo mi archivo HTML del curso anterior. Quiero crear un archivo estilos.css externo, enlazarlo y cambiar el color de fondo de toda la página. Guíame paso a paso.»

—

Capítulo 3. Selectores: El arte de apuntar al elemento correcto

(3 horas)

· Inciso 3.1. Selectores básicos:

  · Etiqueta: p { } se aplica a todos los párrafos.

  · Clase: .destacado { } se aplica a todos los elementos con class=»destacado». Múltiples elementos pueden compartir clase.

  · ID: #cabecera { } se aplica al único elemento con id=»cabecera». Un ID debe ser único en la página.

· Inciso 3.2. Selectores combinados y de contexto:

  · Descendiente: article p { } (todos los párrafos dentro de article, a cualquier profundidad).

  · Hijo directo: ul > li { } (solo los li que son hijos directos de ul).

  · Hermano adyacente: h2 + p { } (el primer párrafo justo después de un h2).

  · Grupo: h1, h2, h3 { } (aplica a todos).

· Inciso 3.3. Pseudo-clases: definen el estado de un elemento.

  · :hover (ratón encima), :visited (enlace visitado), :focus (elemento enfocado), :first-child, :last-child, :nth-child(odd/even/n).

· Inciso 3.4. Pseudo-elementos: apuntan a partes del elemento.

  · ::before (inserta contenido antes), ::after (inserta contenido después), ::first-letter, ::first-line.

· Inciso 3.5. Ejercicio guiado: «DeepSeek, te describo mi HTML (tengo un menú de navegación con lista desordenada). Ayúdame a seleccionar solo el primer elemento de la lista y pintarlo de otro color con :first-child.»

—

Capítulo 4. La cascada, la herencia y la especificidad

(2 horas)

· Inciso 4.1. La cascada: cuando varias reglas afectan al mismo elemento, el orden de aparición importa. La última regla gana (si tiene la misma especificidad).

· Inciso 4.2. La herencia: algunas propiedades se heredan de padres a hijos (como color, font-family). Otras no (como margin, padding, border, background). Cómo forzar la herencia: font-size: inherit;.

· Inciso 4.3. La especificidad: cuando varias reglas compiten, gana la más específica. Jerarquía de especificidad:

  1. Estilos en línea (style=»…»): 1000 puntos.

  2. Selectores de ID (#cabecera): 100 puntos.

  3. Selectores de clase, pseudo-clase y atributo (.destacado, :hover): 10 puntos.

  4. Selectores de elemento y pseudo-elemento (p, ::before): 1 punto.

· Inciso 4.4. !important: rompe la cascada y la especificidad. Úsalo solo como último recurso extremo.

· Inciso 4.5. Ejercicio práctico: crea un conflicto de estilos con diferentes selectores y observa cuál gana usando las DevTools.

—

Capítulo 5. Color, tipografía y propiedades de texto

(2 horas)

· Inciso 5.1. Colores en CSS: nombre (red, navy), hexadecimal (#ff0000), RGB (rgb(255, 0, 0)), RGBA con transparencia (rgba(0,0,0,0.5)), HSL (hsl(0, 100%, 50%)).

· Inciso 5.2. Tipografía: font-family (familias genéricas: serif, sans-serif, monospace), font-size (px, em, rem), font-weight (negrita), font-style (cursiva), text-align (alineación), text-decoration (subrayado), line-height (interlineado), letter-spacing.

· Inciso 5.3. Web Fonts: Google Fonts. Cómo importar una fuente externa.

· Inciso 5.4. Ejercicio guiado: «DeepSeek, quiero usar la fuente ‘Open Sans’ de Google Fonts en mi web y definir una jerarquía tipográfica (h1 a 2.5rem, h2 a 2rem, párrafo a 1rem con interlineado 1.6). Guíame.»

—

Capítulo 6. El modelo de caja: El concepto fundamental de CSS

(2 horas)

· Inciso 6.1. Todo elemento en CSS es una caja compuesta por:

  · Contenido (content): el texto, imagen o elemento interior.

  · Relleno (padding): espacio entre el contenido y el borde. Transparente.

  · Borde (border): línea alrededor del padding. Visible.

  · Margen (margin): espacio entre el borde y otros elementos. Transparente.

· Inciso 6.2. box-sizing: content-box (por defecto: el ancho excluye padding y border) vs. border-box (el ancho INCLUYE padding y border). La mayoría de desarrolladores usa border-box universal.

  · Subinciso 6.2.1. Ejercicio guiado: «DeepSeek, ¿cómo configuro box-sizing: border-box para todos los elementos de mi web? Muéstrame el código.»

· Inciso 6.3. Dimensiones: width, height, max-width, min-width, max-height, min-height. Unidades: px, %, vw (viewport width), vh (viewport height), em, rem.

· Inciso 6.4. Bordes y bordes redondeados: border-radius.

· Inciso 6.5. Colapso de márgenes: márgenes verticales adyacentes se solapan (el mayor absorbe al menor).

· Inciso 6.6. Ejercicio práctico: crea tarjetas de contenido con márgenes, padding, bordes y sombras sencillas.

PARTE II: LAYOUT Y POSICIONAMIENTO. DE LO ESTÁTICO A LO DINÁMICO

(14 horas)

—

Capítulo 7. Posicionamiento y display

(4 horas)

· Inciso 7.1. La propiedad display: bloque vs. línea vs. inline-block vs. none.

  · block: ocupa todo el ancho disponible (div, p, h1).

  · inline: ocupa solo el espacio necesario (span, a, strong). No respeta width/height.

  · inline-block: como inline pero respeta width/height.

  · none: elimina el elemento del flujo (no se ve ni ocupa espacio).

· Inciso 7.2. La propiedad position:

  · static: por defecto. El flujo normal.

  · relative: se desplaza respecto a su posición original, conservando su espacio en el flujo.

  · absolute: se saca del flujo y se coloca respecto al ancestro posicionado más cercano.

  · fixed: se saca del flujo y se coloca respecto a la ventana del navegador. Útil para menús fijos.

  · sticky: combinación de relative y fixed. El elemento se desplaza hasta un umbral y luego se fija.

· Inciso 7.3. Propiedades de desplazamiento: top, right, bottom, left. Solo funcionan con position distinto de static.

· Inciso 7.4. z-index: controla qué elemento se superpone sobre otro. Solo funciona con position distinto de static.

· Inciso 7.5. Ejercicio guiado: «DeepSeek, quiero un menú de navegación fijo en la parte superior de la página que no se mueva al hacer scroll. Guíame con position: fixed.»

—

Capítulo 8. Flexbox: La herramienta moderna para layouts unidimensionales

(5 horas)

· Inciso 8.1. ¿Qué es Flexbox? Un modelo de layout para distribuir y alinear elementos en una sola dimensión (fila o columna). Contenedor flex (padre) y elementos flex (hijos).

· Inciso 8.2. Propiedades del contenedor flex:

  · display: flex; (o inline-flex).

  · flex-direction: row (por defecto), row-reverse, column, column-reverse.

  · flex-wrap: nowrap (por defecto), wrap (permite que los elementos salten a nueva línea).

  · justify-content: alineación horizontal (row) o vertical (column). flex-start, flex-end, center, space-between, space-around, space-evenly.

  · align-items: alineación vertical (row) u horizontal (column). stretch (por defecto), flex-start, flex-end, center, baseline.

  · align-content: alineación de filas múltiples.

· Inciso 8.3. Propiedades de los elementos flex (hijos):

  · flex-grow: capacidad de expandirse (0 = no, 1 = sí, reparto proporcional).

  · flex-shrink: capacidad de encogerse.

  · flex-basis: tamaño inicial antes de repartir espacio.

  · flex: atajo (flex: 1 1 200px;).

  · align-self: sobrescribe align-items para un elemento concreto.

· Inciso 8.4. Ejercicio práctico: «DeepSeek, ayúdame a crear una barra de navegación horizontal con 4 enlaces, espaciados uniformemente, que se convierta en columna en pantallas pequeñas.»

—

Capítulo 9. CSS Grid: La herramienta definitiva para layouts bidimensionales

(4 horas)

· Inciso 9.1. ¿Qué es CSS Grid? Layout bidimensional (filas Y columnas). Contenedor grid (padre) y elementos grid (hijos).

· Inciso 9.2. Propiedades del contenedor grid:

  · display: grid;.

  · grid-template-columns: define número y tamaño de columnas. repeat(3, 1fr), 200px 1fr 200px.

  · grid-template-rows: define número y tamaño de filas.

  · gap: espacio entre celdas (row-gap, column-gap).

  · grid-template-areas: asigna nombres a las áreas para layouts semánticos.

· Inciso 9.3. Propiedades de los elementos grid:

  · grid-column: span 2 (ocupa 2 columnas), 1 / 3 (desde línea 1 hasta 3).

  · grid-row: análogo para filas.

  · grid-area: asigna al elemento un área definida en el contenedor.

· Inciso 9.4. Flexbox vs. Grid: ¿cuándo usar cada uno? Flexbox para layouts de una dimensión (menú, lista de tarjetas). Grid para layouts de dos dimensiones (página completa, galería compleja).

· Inciso 9.5. Ejercicio práctico: crea el layout clásico de una página (cabecera, menú, contenido principal, barra lateral, pie) usando Grid Template Areas con 5 líneas de código CSS.

—

Capítulo 10. Media Queries y Diseño Responsive

(1 hora)

· Inciso 10.1. ¿Qué es el diseño responsive? Adaptar el diseño al ancho y orientación del dispositivo. Filosofía Mobile First: diseña primero para móvil, luego añade complejidad para pantallas más grandes.

· Inciso 10.2. Sintaxis de Media Queries:

  «`css

    @media (max-width: 768px) {

        /* Reglas para pantallas de 768px o menos */

    }

  «`

· Inciso 10.3. Breakpoints comunes: 576px (móviles grandes), 768px (tablets), 992px (portátiles pequeños), 1200px (escritorio).

· Inciso 10.4. Ejercicio guiado: «DeepSeek, guíame para que mi página tenga un menú en columna en móvil y en fila en escritorio usando solo CSS Flexbox y una media query.»

PARTE III: EFECTOS VISUALES Y DISEÑO AVANZADO

(12 horas)

—

Capítulo 11. Fondos, degradados y sombras

(3 horas)

· Inciso 11.1. Fondos: background-color, background-image (url, gradientes), background-size (cover, contain), background-position, background-repeat, background-attachment.

· Inciso 11.2. Degradados: linear-gradient (dirección, color1, color2, …), radial-gradient (círculo/elipse, color1, color2), conic-gradient.

· Inciso 11.3. Sombras de caja con box-shadow y sombras de texto con text-shadow.

· Inciso 11.4. Opacidad: opacity.

—

Capítulo 12. Transiciones y animaciones

(4 horas)

· Inciso 12.1. Transiciones: suavizar el cambio de una propiedad CSS al hacer hover, focus, etc. transition: propiedad duración timing-function delay;.

· Inciso 12.2. Animaciones keyframes: definir una secuencia de cambios a lo largo del tiempo con @keyframes nombre { 0% {…} 50% {…} 100% {…} }. Propiedades de animación: animation-name, animation-duration, animation-iteration-count, animation-direction, animation-delay, animation-timing-function.

· Inciso 12.3. Buenas prácticas: animar solo opacity y transform para no dañar el rendimiento, evitar animaciones excesivas que distraigan, usar prefers-reduced-motion para usuarios con sensibilidad al movimiento.

—

Capítulo 13. Variables CSS y organización avanzada

(3 horas)

· Inciso 13.1. Variables CSS (custom properties): definir valores reutilizables. –color-primario: #3498db; y aplicación con var(–color-primario).

· Inciso 13.2. Metodologías de nomenclatura: BEM (Bloque, Elemento, Modificador): .tarjeta__titulo–destacado. Ventajas de BEM para evitar conflictos de especificidad en proyectos grandes.

· Inciso 13.3. Resets CSS y Normalize.css: estandarizar el comportamiento entre navegadores antes de empezar.

—

Capítulo 14. Introducción a un Framework CSS (Tailwind CSS opcional)

(2 horas)

· Inciso 14.1. ¿Qué es un framework CSS? Clases utilitarias predefinidas. Bootstrap vs. Tailwind CSS vs. Materialize. Cuándo usar un framework y cuándo CSS puro.

· Inciso 14.2. Ejercicio guiado: codificar una tarjeta con Tailwind CSS y comparar con CSS puro.

PARTE IV: PROYECTO INTEGRADOR. TU SITIO WEB RESPONSIVE COMPLETO

(7 horas)

—

Capítulo 15. Diseño del proyecto y primeros desarrollos

(2 horas)

· Inciso 15.1. Elige un proyecto: portfolio personal, web para un club, guía turística de tu barrio o blog temático.

· Inciso 15.2. Boceto Mobile First de 3 páginas (inicio, detalle, contacto).

· Inciso 15.3. «DeepSeek, te describo mi idea. Ayúdame a planificar la estructura CSS.»

—

Capítulo 16. Desarrollo y depuración del proyecto

(3 horas)

· Inciso 16.1. Maqueta con CSS Grid y Flexbox.

· Inciso 16.2. Añade Media Queries para breakpoints de tablet y escritorio.

· Inciso 16.3. Incorpora animaciones sutiles, variables CSS y accesibilidad.

—

Capítulo 17. Presentación, cierre y diploma

(2 horas)

· Inciso 17.1. Presentación del sitio.

· Inciso 17.2. «DeepSeek, revisa mi diseño responsive y dime si hay inconsistencias.»

· Inciso 17.3. Recapitulación y diploma.

—

RESUMEN EJECUTIVO DEL CURSO

Dimensión Resumen

Rol de la IA Tutora de CSS, revisora de layouts, depuradora de estilos, generadora de ejercicios

Rol del estudiante Diseñador/a web en formación: estiliza, maqueta y adapta sitios web responsivos

Meta última Dominar CSS3 y diseñar sitios web profesionales adaptables a cualquier dispositivo

Horas 45

Estructura 4 Partes, 17 Capítulos