Crea tu Primera Página Web desde Cero

¿Estás empezando con el desarrollo frontend? Este ejercicio práctico te ayudará a construir tu primera página web básica, paso a paso. Aprenderás conceptos fundamentales de HTML y CSS mientras desarrollas una estructura funcional y estilizada. ¡Manos a la obra!

Objetivo del ejercicio

Crear una página web simple que incluya un título, un párrafo, una lista y un botón estilizados con CSS.

Requisitos previos

Tener un editor de texto instalado (como Visual Studio Code).
Conocimientos básicos de HTML y CSS.

Estructura del proyecto

Carpeta principal: Crea una carpeta llamada mi-primer-sitio donde guardaremos nuestros archivos.
Archivos necesarios:
- index.html
- styles.css

Paso 1: Crear el archivo HTML

Dentro de la carpeta mi-primer-sitio, abre un nuevo archivo llamado index.html.
Agrega la siguiente estructura básica:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primera Página</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bienvenido a mi primera página</h1>
    </header>
    <main>
        <p>Esta es una página creada como ejercicio básico para aprender frontend.</p>
        <ul>
            <li>Entender la estructura HTML.</li>
            <li>Aplicar estilos básicos con CSS.</li>
            <li>Construir un diseño simple pero funcional.</li>
        </ul>
        <button>¡Haz clic aquí!</button>
    </main>
</body>
</html>

Paso 2: Añadir estilos con CSS

En la misma carpeta, crea un archivo llamado styles.css.
Agrega el siguiente código para estilizar tu página:

/* Estilos globales */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

h1 {
    margin: 0;
}

main {
    padding: 20px;
}

p {
    font-size: 1.2em;
    color: #555;
}

ul {
    list-style: square;
    margin: 10px 0;
    padding: 0;
}

li {
    margin: 5px 0;
}

button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

Paso 3: Ver tu página en el navegador

Abre el archivo index.html en tu navegador favorito.
Deberías ver una página con un encabezado, un párrafo, una lista y un botón estilizado.

Bonus: Mejora tu página

Añade una imagen: Busca una imagen en internet y agrégala usando la etiqueta <img>.
Enlaza a otra página: Usa la etiqueta <a> para incluir un enlace, como este:<a href="https://developer.mozilla.org/es/">Aprende más sobre HTML</a>
Experimenta con colores: Cambia los valores de background-color y color en el archivo CSS.

Con este ejercicio básico, has creado tu primera página web. Puedes seguir practicando añadiendo nuevos elementos y estilos. Para aprender más, explora recursos como la Documentación de MDN.

¿Tienes preguntas o sugerencias? Déjalas en los comentarios. ¡Comparte tu progreso y sigue aprendiendo!