¿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
[Aplicado] Construye un sitio web sencillo
En esta lección final juntarás todo lo aprendido para montar una página de presentación completa, con cabecera, contenido y pie.
Aquí no hay ninguna técnica nueva: se combinan las que ya conoces. <header>, <main> y <footer> son etiquetas semánticas que describen el papel de cada zona; el bloque de perfil usa Flexbox para poner la foto y el texto en horizontal; los enlaces se convierten en botones redondeados con border-radius: 999px, y margin: 0 auto centra el contenido principal.
Lee el código de arriba abajo fijándote en cómo cada pieza corresponde a una lección anterior. Después reescríbelo con tus propios datos: cambia el nombre, el texto de presentación y los colores.
Al construir algo completo aparece un tipo de error distinto al de los ejemplos pequeños: una etiqueta sin cerrar o una llave de CSS de más pueden desmontar toda la página. Cuando algo falle, avanza por partes y comprueba después de cada bloque.
Un sitio real no es mucho más que esto repetido y refinado. El siguiente paso natural es adaptarlo a móvil con media queries, sacar el CSS a un archivo aparte y publicarlo gratis con GitHub Pages o Netlify para que cualquiera pueda verlo.
💡 La vista previa se genera por completo en esta página; no se envía nada al exterior.