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

Negocios Crecimiento de marketingCodeWeb 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)

Artículos destacados

Cómo dominar el arte de hablar en público para introvertidos

EditorialES

7 minGratis

Cómo dominar el arte de hablar en público para introvertidos

Hablar en público es ampliamente citado como uno de los mayores temores que enfrenta la gente, ubicándose por encima de la muerte en algunos estudios. Para los introvertidos, la perspectiva de pararse frente a una habitación llena de gente puede resultar especialmente desalentadora. La buena noticia: los introvertidos suelen ser oradores públicos excepcionales. Eres naturalmente reflexivo, preparado y empático con tu audiencia.

NegociosCrecimiento profesionalBusinessCareerCareer Growth

0 aplausos

Leer

Diez mejoras en el patio trasero con poco presupuesto: mejoras para el hogar con sus propias manos

EditorialES

8 minGratis

Diez mejoras en el patio trasero con poco presupuesto: mejoras para el hogar con sus propias manos

Tu patio trasero tiene más potencial del que crees. Incluso un pequeño espacio al aire libre puede convertirse en un retiro relajante, un centro de entretenimiento o un jardín productivo. Y no necesita miles de dólares ni contratistas profesionales para hacerlo realidad.

NegociosFinanzas personalesPersonal FinanceSaving MoneyBusiness

0 aplausos

Leer

Los mejores destinos de viaje para viajeros solitarios con un presupuesto limitado

EditorialES

8 minGratis

Los mejores destinos de viaje para viajeros solitarios con un presupuesto limitado

Viajar en solitario es una de las experiencias más transformadoras que puedas tener. Estableces tu propio horario, tomas decisiones sobre la marcha y conoces gente con la que nunca hablarías si viajaras con un amigo. La objeción común es el costo, pero viajar solo puede ser más barato que viajar en grupo cuando se eligen los destinos correctos.

NegociosEstilo de vidaFinanzas personalesPersonal FinanceSaving MoneyBusiness

0 aplausos

Leer

Comentarios

0 comentarios

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