¿Ya dominas lo básico? Un curso estructurado de HTML & CSS es la vía rápida para dar el salto.
Ver cursos de HTML & CSS en UdemyEnlace de afiliado. No te cuesta nada extra.
- 01Preparar el entorno (lo que necesitas)
- 02Tu primer HTML
- 03Listas y enlaces
- 04Poner color con CSS
- 05Selectores CSS y clases
- 06Maquetar con Flexbox
- 07Probar imágenes y tablas
- 08Probar los controles de formulario
- 09Entender el modelo de cajas
- 10Introducción al diseño adaptable (media queries)
- 11Variables CSS (propiedades personalizadas)
- 12Maquetar con CSS Grid
- 13Añadir una animación
- 14Escribir comentarios
- 15Añadir interacción con pseudoclases (:hover)
- 16:not() y selectores con varias condiciones en CSS
- 17Fundamentos de las metaetiquetas y el SEO
- 18Fundamentos de accesibilidad (alt y aria-label)
- 19Probar los atributos data (data-*)
- 20Transiciones CSS (cambios suaves al pasar el ratón)
- 21iframe (incrustar otra página)
- 22position (colocar un elemento con precisión)
- 23z-index (indicar el orden de apilamiento)
- 24Fundamentos de localStorage (guardar datos en el navegador)
- 25Las etiquetas video y audio (incrustar medios)
- 26Tablas avanzadas (colspan y rowspan)
- 27Fundamentos de la especificidad en CSS
- 28Fundamentos de SVG (dibujar imágenes vectoriales)
- 29Flexbox avanzado (envolver y crecer)
- 30Validación de formularios (required y pattern)
- 31CSS Grid avanzado (grid-template-areas)
- 32Las etiquetas details y summary (crear un panel plegable)
- 33Contadores CSS (numeración automática)
- 34Tamaños de letra fluidos con clamp()
- 35prefers-color-scheme (compatibilidad con el modo oscuro)
- 36Construir un deslizador con input type=range
- 37Fijar una proporción con aspect-ratio
- 38Ajustar cómo se muestra una imagen con object-fit
- 39Girar y escalar con transform
- 40Servir imágenes adaptables con la etiqueta picture
- 41Mostrar el foco del teclado con :focus-visible
- 42Desplazamiento suave con scroll-behavior
- 43Cambiar la disposición por componente con container queries
- 44Crear un efecto de cristal esmerilado con backdrop-filter
- 45Construir una rejilla flexible con repeat() y minmax()
- 46Fijar una cabecera en su sitio con position: sticky
- 47Añadir pseudoelementos con ::before y ::after
- 48Recortar textos largos con puntos suspensivos usando text-overflow
- 49Usar un valor calculado en CSS con calc()
- 50[Aplicado] Construye un sitio web sencillo
Desplazamiento suave con scroll-behavior
En esta lección harás que los saltos a anclas dentro de la página se deslicen suavemente en vez de aparecer de golpe.
scroll-behavior: smooth aplicado a html convierte todos los desplazamientos provocados por enlaces internos en un movimiento animado. Un enlace interno se escribe <a href="#id"> y salta al elemento que tenga ese id.
El código de ejemplo enlaza con la segunda sección. Al hacer clic, la página se desliza hasta ella en lugar de saltar bruscamente, lo que ayuda a entender hacia dónde te has movido.
Un detalle práctico: si tienes una cabecera fija, el destino queda tapado por ella. Se resuelve con scroll-margin-top en el elemento de destino, indicando la altura de la cabecera.
Para ser respetuoso conviene desactivar la animación cuando el sistema pide menos movimiento, envolviéndola en @media (prefers-reduced-motion: no-preference). Para algunas personas, el desplazamiento animado provoca mareo real.
💡 La vista previa se genera por completo en esta página; no se envía nada al exterior.