Estructura HTML y CSS para Proyectos Web en Visual Studio Code

Construir el esqueleto HTML de un proyecto web completo es el paso fundamental antes de aplicar cualquier estilo. Aquí se recorre paso a paso cómo organizar la navbar, el main con sus secciones de catálogo e información, y el footer, todo guiado por un archivo de diseño en Figma y preparado para compilar estilos con Sass.

¿Cómo se estructura la navbar con botones y SVG?

El primer elemento que se construye es la barra de navegación. Dentro de la etiqueta nav ya existente se agrega una etiqueta <p> con el texto Eco Store, que funciona como logo de texto [0:44]. Si se cuenta con un logotipo gráfico, lo recomendable es usar una etiqueta <img> en su lugar.

A continuación se crean tres botones con la etiqueta <button>, cada uno con una clase que los identifica:

• profile: para el botón de perfil de usuario.
• wishlist: para la lista de deseos.
• cart: para el carrito de compras.

Dentro de cada botón se incluye una etiqueta <svg> vacía por el momento [1:30]. El uso de SVG permite incorporar íconos vectoriales escalables que no pierden calidad en distintas resoluciones.

¿Por qué usar article y divs para la sección principal?

Dentro de la etiqueta <main>, se incorpora un <article> porque el contenido combina textos descriptivos con una imagen destacada, lo que encaja semánticamente con esta etiqueta [2:22]. La etiqueta article en HTML representa un bloque de contenido independiente y autocontenido.

El article se divide en dos <div>:

• infosection (renombrado después a impact): contiene un <h1> con el título "Impacto ecológico", un <p> para la descripción y un <button> con el texto "Conoce más" [2:50].
• imagesection: aloja la imagen principal. Se envuelve dentro de un div porque manipular una imagen dentro de un contenedor resulta más sencillo al momento de aplicar estilos, aunque no es obligatorio [3:40].

¿Cómo se organizan las secciones de catálogo y empresa?

Fuera del article se crean dos etiquetas <section> con clases descriptivas [4:05]:

• product-section: agrupa el catálogo dividido en dos <div> con clases healthcare y furniture. Cada uno lleva un <h2> con los títulos "Cuidado de la salud" y "Decoración del hogar" respectivamente [5:32].
• La segunda sección contiene tres <div> con las clases about-us, gallery y location [5:55].

El uso de clases semánticas como healthcare, furniture o location facilita la lectura del código y la aplicación posterior de estilos con selectores específicos.

¿Qué elementos componen las subsecciones internas?

Dentro de about us se agregan dos bloques con imágenes de íconos y párrafos descriptivos: uno para el ícono de la Tierra (earth) y otro para innovación (innovation) [7:15].

La galería de estilos incluye tres <div>, cada uno preparado para contener una imagen [7:50]. Para la sección de ubicación, se coloca un <div> con clase map que contiene una imagen del mapa y una etiqueta <p> para la dirección física [8:10].

¿Cómo se construye el footer del proyecto?

El <footer> no necesita clase adicional porque es único en la página y se puede estilizar directamente con el selector de tipo footer en CSS o Sass [4:50].

Sus elementos internos son:

• Un <h3> con el texto "Ecostore" en lugar de un <p>, para darle mayor jerarquía visual al logo del pie de página [8:45].
• Varias etiquetas <p> con información general.
• Un <div> con clase social-media que agrupa tres imágenes correspondientes a íconos de redes sociales [9:10].

Para visualizar el progreso se utiliza Go Live desde Visual Studio Code y se verifica que el compilador de Sass esté observando los cambios con Command + Shift + P [9:30]. Aunque el resultado visual aún es básico, el esqueleto HTML queda completo y listo para recibir estilos.

Si tienes dudas sobre la organización de las etiquetas o las clases utilizadas, compártelas en los comentarios. Lo que sigue es trabajar con at rules y nesting en Sass para simplificar el código de estilos.