Programación

Tu primera página web completa: créala y publícala gratis

Por el Equipo Bit a Bit · · 8 min de lectura

En esta guía · 7 secciones
  1. Paso 1: prepara la carpeta
  2. Paso 2: el HTML
  3. Paso 3: el CSS
  4. Míralo funcionando
  5. Paso 4: revisa antes de publicar
  6. Paso 5: publícala gratis
  7. ¿Y ahora qué?

Ya sabes lo básico de HTML y CSS. Ahora vamos a juntarlo en una página real: una presentación personal para mostrar tu trabajo. Al final la publicarás para que cualquiera la vea desde su celular.

Paso 1: prepara la carpeta

Crea una carpeta con estos tres archivos. Los nombres importan: todo en minúsculas y sin espacios ni tildes.

mi-web/
├── index.html   ← la página
├── estilos.css  ← el diseño
└── foto.jpg     ← tu foto, cuadrada y de menos de 300 KB

Paso 2: el HTML

Copia esto en index.html y cambia los textos por los tuyos:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ana Torres · Diseñadora gráfica</title>
  <meta name="description" content="Portafolio de Ana Torres, diseñadora gráfica en Lima.">
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <header class="portada">
    <img src="foto.jpg" alt="Foto de Ana Torres" width="120" height="120">
    <h1>Ana Torres</h1>
    <p>Diseño logos, afiches y redes sociales para negocios.</p>
    <a class="boton" href="#contacto">Hablemos</a>
  </header>

  <main>
    <section class="servicios">
      <h2>Qué hago</h2>
      <div class="lista">
        <article><h3>Logos</h3><p>Una marca clara que se recuerde.</p></article>
        <article><h3>Redes</h3><p>Plantillas para tus publicaciones.</p></article>
        <article><h3>Impresos</h3><p>Volantes, afiches y tarjetas.</p></article>
      </div>
    </section>

    <section id="contacto">
      <h2>Contacto</h2>
      <p>Escríbeme a <a href="mailto:ana@ejemplo.com">ana@ejemplo.com</a></p>
    </section>
  </main>

  <footer>
    <p>© 2026 Ana Torres</p>
  </footer>
</body>
</html>

Paso 3: el CSS

Copia esto en estilos.css. Cambia los colores #1f4fd8 (azul) y #e39a2d (naranja) por los de tu marca:

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #131a26;
  background-color: #f3f5f8;
  line-height: 1.6;
}

.portada {
  text-align: center;
  padding: 48px 20px;
  background-color: #1f4fd8;
  color: white;
}
.portada img { border-radius: 50%; }

.boton {
  display: inline-block;
  background-color: #e39a2d;
  color: white;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
}

main { max-width: 900px; margin: 0 auto; padding: 24px 20px; }

.lista { display: flex; gap: 16px; }
.lista article {
  flex: 1;
  background-color: white;
  padding: 18px;
  border-radius: 12px;
}

footer { text-align: center; padding: 24px; color: #566174; }

/* En pantallas pequeñas, las tarjetas van una debajo de otra */
@media (max-width: 600px) {
  .lista { flex-direction: column; }
}

Míralo funcionando

Aquí tienes la misma página en el editor, con el CSS dentro para que puedas probar cambios antes de tocar tus archivos. La foto no aparece porque vive en tu computadora.

Paso 4: revisa antes de publicar

  • Míralo como en un celular. Abre la página, pulsa F12 y luego Ctrl + Shift + M. Elige un modelo de teléfono arriba.
  • Prueba todos los enlaces y el botón de contacto.
  • Revisa la foto: que pese poco y tenga su texto en alt. Si dudas del formato, mira qué formato de imagen usar.
  • Cambia el título y la descripción del <head>: es lo que aparecerá en Google.
  • Lee todo en voz alta para encontrar errores de escritura.

Paso 5: publícala gratis

Hay servicios que alojan páginas como la tuya sin costo y con el candado de seguridad (HTTPS) incluido. El más fácil para empezar es Netlify Drop:

  1. Entra a app.netlify.com/drop.
  2. Arrastra tu carpeta mi-web completa a la página.
  3. En segundos te da una dirección del tipo nombre-al-azar.netlify.app. ¡Tu web ya está en internet!
  4. Crea una cuenta gratis para conservarla: sin cuenta, la página se borra al poco tiempo.

Otras opciones gratuitas son Cloudflare Pages y GitHub Pages. Los menús cambian con el tiempo, pero la idea es la misma: subir la carpeta y recibir una dirección.

¿Quieres un nombre propio, como tunombre.com? Un dominio .com cuesta unos 10 a 12 dólares al año y se conecta a cualquiera de estos servicios. Es lo único que tendrías que pagar.

¿Y ahora qué?

Añade una sección de trabajos con tus mejores imágenes, prueba otros colores y tipografías, y cada vez que cambies algo vuelve a subir la carpeta. Si diseñas tus propias imágenes, estos atajos de Photoshop te ahorrarán mucho tiempo.

Sigue leyendo