Cómo crear un portafolio personal básico con HTML, CSS y diseño responsivo

4064

Introducción
Si quieres mostrar tus habilidades frontend al mundo, un portafolio personal es el primer gran paso. No necesitas herramientas complejas ni conocimientos avanzados: Con HTML, CSS y un enfoque en diseño responsivo, puedes construir un portafolio atractivo que destaque tu trabajo y te represente. Este tutorial te guiará paso a paso para crear tu propio portafolio desde cero.

¿Qué necesitas?

Un editor de texto como Visual Studio Code.
Un navegador web moderno (Google Chrome, Firefox, Edge, etc.).
Conocimientos básicos de HTML y CSS.
Muchas ganas de aprender y experimentar.

Paso a paso

Planifica la estructura de tu portafolio
Antes de escribir una sola línea de código, define cómo quieres organizar tu portafolio. Un diseño básico puede incluir las siguientes secciones:

Encabezado: Tu nombre y un menú de navegación.
Acerca de mí: Una breve descripción de quién eres.
Proyectos: Una galería con tus trabajos o proyectos destacados.
Contacto: Información o formulario para que otros te contacten.
Haz un esquema en papel o utiliza herramientas gratuitas como Figma para tener una idea clara.

Crea el archivo HTML básico
Objetivo: Construir la estructura inicial del portafolio.

Abre tu editor de texto y crea un archivo llamado index.html.
Escribe la siguiente estructura básica en HTML:

<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mi Portafolio</title><linkrel="stylesheet"href="styles.css"></head><body><header><h1>Mi Portafolio</h1><nav><ul><li><ahref="#about">Acerca de mí</a></li><li><ahref="#projects">Proyectos</a></li><li><ahref="#contact">Contacto</a></li></ul></nav></header><sectionid="about"><h2>Acerca de mí</h2><p>Hola, soy [Tu Nombre], desarrollador frontend apasionado por el diseño web.</p></section><sectionid="projects"><h2>Proyectos</h2><divclass="project"><h3>Proyecto 1</h3><p>Descripción breve del proyecto.</p></div><divclass="project"><h3>Proyecto 2</h3><p>Descripción breve del proyecto.</p></div></section><sectionid="contact"><h2>Contacto</h2><p>Envíame un correo a <ahref="mailto:[email protected]">[email protected]</a>.</p></section><footer><p>&copy; 2024 Mi Portafolio</p></footer></body></html>

Diseña tu portafolio con CSS
Objetivo: Mejorar el estilo visual del portafolio.

Crea un archivo llamado styles.css en la misma carpeta que tu HTML.
Aplica estilos básicos para cada sección:

/* General */body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

header {
  background: #333;
  color: #fff;
  padding: 1rem0;
  text-align: center;
}

headerh1 {
  margin: 0;
}

navul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

navulli {
  margin: 01rem;
}

navullia {
  color: #fff;
  text-decoration: none;
}

section {
  padding: 2rem;
  text-align: center;
}

footer {
  text-align: center;
  padding: 1rem0;
  background: #333;
  color: #fff;
}

/* Proyectos */.project {
  border: 1px solid #ddd;
  margin: 1rem auto;
  padding: 1rem;
  max-width: 600px;
}

Haz que sea responsivo
Objetivo: Asegurarte de que el portafolio se vea bien en diferentes dispositivos.

Añade un media query en tu CSS (Al final del CSS) para ajustar el diseño en pantallas pequeñas:

@media (max-width: 768px) {
  navul {
    flex-direction: column;
  }

  .project {
    margin: 1rem;
  }
}

Prueba el diseño redimensionando el navegador o usando las herramientas de desarrollo del navegador.

Publica tu portafolio
Objetivo: Compartir tu trabajo con el mundo.

Sube tu proyecto a una plataforma gratuita como GitHub Pages:
Crea un repositorio en GitHub.
Sube los archivos index.html y styles.css.
Ve a la configuración del repositorio y activa GitHub Pages.

¿Por qué hacerlo?
Crear un portafolio personal es una oportunidad para mostrar tus habilidades, aprender nuevas herramientas y avanzar en tu carrera como frontend developer. Cada iteración mejorará tanto tu técnica como tu confianza. ¡Personalízalo según tu estilo!

hace 5 meses