Construcción de un Portafolio con HTML y CSS

Clase 6 de 27 • Curso de Creación de Páginas Web con Wordpress y No-code

Clase anteriorSiguiente clase

Resumen

¿Cómo construir un portafolio con HTML y CSS?

Construir un portafolio es una excelente manera de mostrar tu trabajo y habilidades de manera profesional. Con HTML y CSS, puedes crear un sitio web limpio y atractivo. A continuación, te muestro cómo estructurar tu portafolio con estas tecnologías, paso a paso.

¿Qué es lo que vamos a construir?

Nuestro objetivo es diseñar una página web que funcione como un portafolio. La estructura básica incluirá:

  • Un encabezado con un logotipo.
  • Una sección principal, también conocida como "hero", que contará con una imagen de fondo, tu nombre, tu arroba de redes sociales y una breve descripción de lo que haces.
  • Íconos que sirvan como enlaces a tus distintas redes sociales.

¿Cómo crear la estructura base con HTML?

Para comenzar, es esencial conceptualizar la estructura del sitio web. Imagínalo como una serie de cajas que contengan imágenes y texto. Estos son los pasos iniciales para crear la estructura del hero.

<section id="hero">
    <div class="image-container" id="computadora">
        <img src="imagenes/computadora.png" alt="Computadora">
    </div>
    <div class="information-container">
        <div class="image-container" id="foto">
            <img src="imagenes/foto.png" alt="Foto">
        </div>
        <div class="information">
            <h1>Carlos Eduardo Gómez García</h1>
            <span>@usuario</span>
            <p>Course Director at Platzi, Backend Developer, Frontend Web Developer, YouTube Content Creator</p>
        </div>
    </div>
</section>

¿Por qué usar id y class en HTML?

  • ID: Se usa para identificar elementos únicos en la página. Debe ser único y exclusivo dentro del documento. Por ejemplo, para identificar una imagen específica:

    <div id="computadora">
    <img src="imagenes/computadora.png" alt="Computadora">
</div>

  • Class: Sirve para agrupar elementos similares, facilitando la aplicación de estilos con CSS. Puedes usar la misma clase en múltiples elementos:

    <div class="image-container">
    <img src="imagenes/foto.png" alt="Foto">
</div>

¿Cómo añadir contenido adicional e íconos sociales?

En la siguiente clase, continuaremos con la descripción personal y la integración de íconos de redes sociales. Esto enriquecerá aún más tu portafolio, haciéndolo más profesional y atractivo. No olvides que, aunque aquí hemos sentado las bases con HTML, CSS será la herramienta para darle el estilo visual final.

Construir desde cero un portafolio con HTML y CSS es una puerta de entrada a muchas posibilidades en el desarrollo web. ¡No te detengas aquí! Explora, experimenta y continúa aprendiendo para mejorar tus proyectos.