Guía paso a paso para crear un portafolio web impresionante con HTML, CSS y JavaScript

Aprende cómo diseñar un portafolio web funcional y atractivo desde cero, utilizando herramientas básicas del desarrollo frontend

En la era digital, contar con un portafolio web es esencial para mostrar tus proyectos y habilidades. Este tutorial te enseñará a crear un portafolio atractivo utilizando HTML, CSS y JavaScript. Al finalizar, tendrás una página web que puedes personalizar y publicar para atraer clientes o empleadores potenciales.

Paso 1: Configura tu entorno de trabajo

Antes de comenzar, asegúrate de tener las herramientas necesarias:

  • Editor de código: Recomendamos Visual Studio Code.
  • Navegador: Usa Google Chrome para pruebas.
  • Live Server: Una extensión para previsualizar tu sitio en tiempo real.

Paso 2: Estructura tu página con HTML

El HTML define la estructura básica de tu portafolio. Crea un archivo llamado index.html y escribe el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Portafolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Mi Portafolio</h1>
        <nav>
            <ul>
                <li><a href="#sobre-mi">Sobre mí</a></li>
                <li><a href="#proyectos">Proyectos</a></li>
                <li><a href="#contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <section id="sobre-mi">
        <h2>Sobre mí</h2>
        <p>Soy un desarrollador web apasionado por crear sitios increíbles.</p>
    </section>
    <section id="proyectos">
        <h2>Proyectos</h2>
        <div class="proyecto">
            <h3>Proyecto 1</h3>
            <p>Descripción breve del proyecto.</p>
        </div>
    </section>
    <footer id="contacto">
        <h2>Contacto</h2>
        <p>Correo: ejemplo@correo.com</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>


Paso 3: Diseña tu portafolio con CSS

Crea un archivo llamado styles.css para dar estilo a tu sitio. Usa el siguiente código como base:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #2c3e50;
    color: #fff;
    padding: 20px;
    text-align: center;
}

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

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

section {
    padding: 20px;
}

.proyecto {
    margin: 15px 0;
    padding: 10px;
    border: 1px solid #ccc;
}

footer {
    background-color: #34495e;
    color: #fff;
    text-align: center;
    padding: 10px;
}


Paso 4: Agrega interactividad con JavaScript

La funcionalidad mejora la experiencia del usuario. Crea un archivo llamado script.js y añade:

document.addEventListener("DOMContentLoaded", () => {
    const links = document.querySelectorAll("nav ul li a");
    links.forEach(link => {
        link.addEventListener("click", (event) => {
            event.preventDefault();
            const sectionId = link.getAttribute("href").substring(1);
            const section = document.getElementById(sectionId);
            window.scrollTo({
                top: section.offsetTop,
                behavior: "smooth"
            });
        });
    });
});


Paso 5: Prueba y personaliza

Abre tu index.html en el navegador utilizando Live Server y verifica que todos los elementos funcionen correctamente. Personaliza los colores, fuentes y contenido para que reflejen tu estilo único.

Paso 6: Publica tu portafolio

Sube tu proyecto a una plataforma de hosting gratuito como GitHub Pages, Netlify o Vercel. Así, podrás compartirlo fácilmente con otras personas.

¿Quieres que tu portafolio sea aún más impresionante? En SiteSupremacy te ayudamos a crear diseños web profesionales y a optimizar tu presencia online con servicios de SEO y marketing digital. ¡Contáctanos hoy mismo!

José Mario Rivera Carranza 18 de diciembre de 2024
Compartir
Archivar
Cómo crear una página web responsiva desde cero: guía paso a paso