Artículo

Cómo codificar un sitio web sencillo en menos de una hora

Una página de destino personal con:

2 min de lecturaIdioma: ES EspañolGratis0 aplausos0 comentarios

NegociosMarketing GrowthCodeWeb DevelopmentBusinessMarketing GrowthSimpleWebsite

Opciones de lectura

Lo que estamos construyendo

Una página de destino personal con:

Un titular y un eslogan
Una sección "Acerca de mí"
Enlaces a tus perfiles sociales
Información de contacto
Un formulario de contacto (que funciona sin backend)

Paso 1: configura tu proyecto (2 minutos)

Cree una carpeta llamada mi-sitio web con dos archivos:

my-website/
├── index.html    (the structure)
└── style.css     (the styling)

Abra ambos archivos en cualquier editor de texto (VS Code, Notepad, TextEdit).

Paso 2: escribe el HTML (10 minutos)

HTML es la estructura de su página. Piense en ello como la estructura de un edificio.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Name | Personal Website</title>
  <!-- Link to our CSS file -->
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>

  <!-- Header / Hero Section -->
  <header>
    <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
    <p class="tagline">Web Developer | Designer | Creator</p>
  </header>

  <!-- About Section -->
  <section id="about">
    <h2>About Me</h2>
    <p>
      Write a sentence or two about yourself. What do you do?
      What are you passionate about? Keep it friendly and authentic.
    </p>
  </section>

  <!-- Skills Section -->
  <section id="skills">
    <h2>What I Do</h2>
    <div class="skills-grid">
      <div class="skill-card">
        <i class="fas fa-code"></i>
        <h3>Web Development</h3>
        <p>HTML, CSS, JavaScript, React</p>
      </div>
      <div class="skill-card">
        <i class="fas fa-paint-brush"></i>
        <h3>Design</h3>
        <p>UI/UX, Figma, Adobe XD</p>
      </div>
      <div class="skill-card">
        <i class="fas fa-mobile-alt"></i>
        <h3>Responsive</h3>
        <p>Mobile-first, all devices</p>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact">
    <h2>Get In Touch</h2>
    <form id="contact-form">
      <input type="text" placeholder="Your Name" required>
      <input type="email" placeholder="Your Email" required>
      <textarea placeholder="Your Message" rows="5" required></textarea>
      <button type="submit">Send Message</button>
    </form>
    <p class="form-message" id="form-message"></p>
  </section>

  <!-- Footer -->
  <footer>
    <div class="social-links">
      <a href="#"><i class="fab fa-github"></i></a>
      <a href="#"><i class="fab fa-linkedin"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </div>
    <p>&copy; 2026 Your Name. Made with <span class="heart">&hearts;</span></p>
  </footer>

  <script>
    // Contact form — no backend needed
    document.getElementById('contact-form').addEventListener('submit', function(e) {
      e.preventDefault();
      const message = document.getElementById('form-message');
      message.textContent = "Thanks! I will get back to you soon.";
      message.style.color = "#4CAF50";
      this.reset();
    });
  </script>
</body>
</html>

Paso 3: escribe el CSS (15 minutos)

CSS hace que la página se vea bien. Colores, disposición, espaciado.

/* === Reset & Base === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f8f9fa;
}

/* === Header === */
header {
  text-align: center;
  padding: 80px 20px 40px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.highlight {
  color: #ffd700;
}

.tagline {
  font-size: 1.2em;
  opacity: 0.9;
}

/* === Sections === */
section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}

h2 {
  font-size: 2em;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

/* === Skills Grid === */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.skill-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.skill-card:hover {
  transform: translateY(-5px);
}

.skill-card i {
  font-size: 2em;
  color: #667eea;
  margin-bottom: 15px;
}

.skill-card h3 {
  margin-bottom: 10px;
}

/* === Form === */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: 0 auto;
}

input, textarea, button {
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
}

input:focus, textarea:focus {
  border-color: #667eea;
  outline: none;
}

button {
  background: #667eea;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

button:hover {
  background: #5a67d8;
}

.form-message {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

/* === Footer === */
footer {
  text-align: center;
  padding: 40px;
  background: #333;
  color: white;
}

.social-links a {
  color: white;
  font-size: 1.5em;
  margin: 0 10px;
  text-decoration: none;
  transition: color 0.2s;
}

.social-links a:hover {
  color: #667eea;
}

.heart {
  color: #e74c3c;
}

/* === Responsive === */
@media (max-width: 600px) {
  header h1 { font-size: 1.8em; }
  header { padding: 60px 20px 30px; }
  section { padding: 40px 20px; }
}

Paso 4: abrir en el navegador (1 segundo)

Haga doble clic en index.html. Se abre en su navegador.

Ahora tienes un sitio web en funcionamiento.

Paso 5: Personalizar (10 minutos)

Cambia estas cosas para hacerlo tuyo:

Reemplazar texto: tu nombre, eslogan, biografía
Cambiar colores: edita el degradado en el "encabezado" y el "#667eea" morado
Actualizar enlaces: reemplace # en los enlaces sociales con sus URL reales
Agrega tu foto — Agrega <img src="your-photo.jpg" alt="Your Name"> dentro del encabezado
Edite el formulario: para enviar correos electrónicos, reemplace la acción del formulario con un servicio como Formspree o Web3Forms.

Paso 6: Publicar (10 minutos)

Opciones de alojamiento gratuito:

1. Páginas de GitHub (recomendado)

Crea una cuenta de GitHub
Crea un repositorio llamado nombre de usuario.github.io
Sube tu index.html y style.css
Su sitio está activo en username.github.io

2. Netlify (más fácil)

Ir a netlify.com
Arrastra y suelta tu carpeta
Hecho. Su sitio obtiene una URL gratuita (random-name.netlify.app)

3. Vercel

Ir a vercel.com
Importa tu proyecto
Implementaciones automáticas desde GitHub

Lo que aprendiste

En menos de una hora:

Estructura HTML (títulos, párrafos, secciones, formularios)
Estilo CSS (colores, diseño, diseño responsivo)
Formulario de contacto con JavaScript
Cómo publicar online gratis

Próximos pasos

Agregar más páginas (Acerca de, Portafolio, Blog)
Aprenda JavaScript para agregar interactividad (animaciones, modo oscuro)
Utilice un marco CSS (Tailwind, Bootstrap) para un estilo más rápido
Conecte un backend de formulario de contacto real
Compre un dominio personalizado ($10-15/año)

Comentarios

0 comentarios

Todavía no hay comentarios aprobados. Las respuestas nuevas pueden esperar moderación.