CodePen es una plataforma online perfecta para practicar HTML, CSS y JavaScript. A continuación, puedes ver los pasos que debes seguir para crear tu primera página web sencilla utilizando el ejemplo que vimos anteriormente.

Paso 1: Accede a CodePen

1. Ve a www.codepen.io.
2. Si quieres guardar tu proyecto, regístrate o inicia sesión. Si no, puedes usarlo sin cuenta.

Paso 2: Abre un nuevo proyecto

1. Haz clic en "Start Coding".
2. Verás tres paneles: HTML, CSS y JavaScript.

Paso 3: Escribe el código HTML

En el panel de HTML, escribe este código para definir la estructura de tu página:

<h1>¡Bienvenidos a mi primera página!</h1>
<p>Esta es una página simple creada con HTML y CSS en CodePen.</p>

Este código:

• Crea un título grande con <h1>.
• Añade un párrafo de texto con <p>.

Paso 4: Dale estilo con CSS

En el panel de CSS, escribe este código para que tu página se vea más bonita:

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 18px;
    color: gray;
    text-align: justify;
}

Este código:

• Cambia el color del título a azul y lo centra.
• Ajusta el tamaño y color del texto del párrafo y lo justifica.

Paso 5: Agrega funcionalidad con JavaScript (opcional)

Si quieres añadir algo interactivo, como un mensaje emergente, ve al panel de JavaScript y escribe:

alert("¡Bienvenido a mi página web!");

Esto mostrará un mensaje cuando cargues la página.

Paso 6: Guarda y comparte tu trabajo

1. Haz clic en "Save" para guardar tu proyecto (debes estar registrado).
2. Si quieres compartir tu página, copia el enlace en la parte superior de la pantalla y envíalo.

Resultado Final

Cuando completes los pasos, tu página debería mostrar un título grande azul, un párrafo estilizado y un mensaje de bienvenida al cargar la página.

¡Ahora estás listo para crear y experimentar con tus propias páginas web! 🚀