Construir una landing page de portafolio para un programador empieza por un esqueleto HTML claro y semántico. Aquí aprendes cómo organizar las secciones principales (header, hero, proyectos, habilidades, contacto y footer) usando contenedores y clases reutilizables que después conectarán con tu CSS. Es el punto de partida ideal si estás cerrando un curso de HTML y CSS y quieres un proyecto real para tu GitHub.

Cómo se arma el esqueleto base de una landing page en HTML

Todo el proyecto vive dentro de un div con la clase contenedor-principal, que envuelve la web completa y facilita aplicar estilos globales más adelante [00:32]. Dentro de ese contenedor se colocan comentarios para dividir las zonas: header, hero, proyectos, habilidades, contacto y footer.

Esa división con comentarios no es decorativa. Te ordena mentalmente y te permite saltar entre bloques sin perderte cuando el archivo crece.

Qué incluye el header y la sección hero

El header lleva la clase cabecera y dentro vive la barra de navegación con un logo y tres enlaces hacia proyectos, habilidades y contacto [02:14]. Esos enlaces usan href con anclas internas, así que apuntan a los id de cada sección más abajo.

La sección hero es donde te presentas. Va dentro de un section con clase hero, un H1 con un saludo del tipo "Hola, soy..." y un botón Contáctame que reutiliza el ancla a contacto [02:38]. La idea es que tanto el botón del hero como el enlace del nav lleven al mismo lugar.

¿Por qué usar etiquetas semánticas como header, section y footer? Porque le dan significado al contenido para navegadores, lectores de pantalla y motores de búsqueda. Un section no es solo un contenedor: indica que ahí vive un bloque temático independiente.

Cómo organizar la sección de habilidades y proyectos

La sección de habilidades usa un section con id="habilidades" y clase habilidades, un título H2 y varias tarjetitas (ítems de habilidad) dentro de un contenedor común [03:48]. Cada tarjeta agrupa tecnologías por categoría.

Las categorías que se replican en el ejemplo son cinco:

• Front-end.
• Back-end.
• Base de datos.
• Herramientas.
• Diseño.

Este patrón de contenedor + ítems repetidos es clave porque después en CSS lo vas a convertir en una cuadrícula con Grid o Flexbox sin tocar el HTML.

Cómo se estructura cada tarjeta de proyecto

La sección proyectos se deja para el final porque es la más extensa y la que más espacio ocupa visualmente [06:25]. Tiene un section, un H2 y un contenedor tipo cuadrícula con tres article, uno por proyecto.

Dentro de cada article la estructura se repite igual en los tres:

• Un div para la imagen del proyecto.
• Un div para la información, con un H3, un párrafo descriptivo y tres etiquetas con las tecnologías usadas.

Las imágenes salen de la carpeta assets del proyecto, y si necesitas recursos gratis puedes usar Pexels, que es de donde salen las tres imágenes del ejemplo [07:32]. Repetir la misma estructura en los tres article te permite estilarlos una sola vez en CSS.

Cómo se construye el formulario de contacto y el footer

La sección contacto vive en un section con id="contacto" y dentro un H2 y un form con clase formulario-contacto [04:42]. El formulario se divide en bloques con la clase repetida grupo-formulario, uno por cada campo.

Los tres campos son:

1. Nombre, con label e input tipo text.
2. Email, con label e input tipo mail.
3. Mensaje, con label y un textarea.

Al final va el botón submit. Ojo: este formulario no va a enviar datos porque no hay JavaScript en el curso, así que funciona como maqueta visual y estructural.

¿Qué diferencia hay entre input y textarea? El input es un campo de una sola línea (texto, email, número). El textarea permite varias líneas y es ideal para mensajes largos como los de un formulario de contacto.

El footer se resuelve con la clase pie-de-pagina, una lista simple de redes sociales escritas como texto (sin logos) y una línea de copyright [05:48]. Es deliberadamente sencillo para que tú lo amplíes después con íconos o enlaces reales.

¿Para qué sirve repetir la clase grupo-formulario en cada campo? Para aplicar el mismo estilo (espaciado, tipografía, alineación) a todos los bloques del formulario con una sola regla CSS, en lugar de escribir estilos uno por uno.

Con el HTML listo ya tienes el esqueleto que vas a vestir con CSS en las siguientes clases. Cuéntame en los comentarios cómo vas a personalizar tu propia landing: ¿mantienes el perfil de programador o lo adaptas a otro perfil profesional?