Guía rápida: Publicar en CodePen una web básica
Ahora vas a hacer algo muy interesante: tu página dejará de estar solo en tu ordenador y pasará a estar visible en Internet. Vamos paso a paso.
1️⃣ Crear cuenta o iniciar sesión en CodePen
- Entra en 👉 https://codepen.io
- Regístrate o inicia sesión con tu cuenta del instituto.
- Pulsa en “Create” → “Pen”.
Verás tres paneles principales:
- HTML
- CSS
- JS
Nosotros vamos a usar solo HTML y CSS.
2️⃣ Copiar tu código
🔹 En el panel HTML:
Copia todo el contenido que tenías dentro del <body> (No hace falta que copies las etiquetas <html>, <head> ni <body>, porque CodePen ya las gestiona por ti).
🔹 En el panel CSS:
Copia el contenido que tenías dentro de <style> y pégalo aquí. En cuanto lo pegues, verás tu página renderizada automáticamente abajo. Ese momento es mágico: ya está publicada.
Enlace al pen: https://codepen.io/joselopezgetares/pen/YPWgyEg
3️⃣ Guardar tu proyecto
- Pulsa en “Save”.
- Ponle un nombre (por ejemplo: Mi Web sobre Cine).
- Guarda.
Ahora tu web ya tiene una URL pública.
Para obtenerla:
- Pulsa en “Share”.
- Copia el enlace.
Ese enlace es tu página publicada.
Publicación responsable (muy importante)
Antes de compartir tu web, revisa:
- ✅ No incluyas datos personales (apellidos, teléfono, dirección, etc.).
- ✅ Usa imágenes con licencia adecuada o propias.
- ✅ No copies textos sin citar la fuente.
- ✅ Mantén un tono respetuoso en todo el contenido.
Publicar es fácil. Publicar bien es lo que marca la diferencia.