Estructura HTML y CSS para Proyectos Web en Visual Studio Code

Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Contenido del curso

Conociendo SASS

Instalación y configuración del entorno de trabajo

3
Instalación y Configuración de SAS en Visual Studio Code
07:53 min

Reglas y uso

Expresiones

8
Expresiones en CSS: Números, Strings, Colores y Booleanos
03:47 min

Proyecto: sección main

9
Sección hero con Flexbox y Sass
26:58 min

Herencia en SASS

Mixins

Funciones

15
Operadores y Funciones en SAS: Uso y Ejemplos Prácticos
03:40 min

Proyecto

Deploy

19
Publica tu sitio web gratis con GitHub Pages
02:24 min

Extras

20
Instalación y Configuración de Sass con Node.js
01:00 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0018:31

Estructura HTML y CSS para Proyectos Web en Visual Studio Code

Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Clase 6 de 20

Clase 6 / 20

Comentarios (33)33 comentarios

Ana Sofía Bermúdez Portillo

Hace 3 años

Máximo Calderon

Hace 3 años

Yilmar López Ospina

Hace 3 años

Henry Alexander Velásquez Rosas

Hace 3 años

Julian Ricardo Gaviria Lugo

Hace 3 años

Yobana Iris Ney Silva Rivero

Hace 3 años

Juan Manuel Rubio Gallego

Rubén Vega

Enrique Romero

Enrique Romero

iecgerman .

Jean Carlos Rodríguez

Hace 3 años

iecgerman .

Hace 3 años

iecgerman .

Hace 3 años

Guiomara Luján Ingaruca

Hace 3 años

JOSE MARIA SUAREZ GIESE

Kenneth Angulo L

----- ----

Ulqernesh Karvenae

Paula Inés Cudicio

Luis Rodríguez

Seba Cardoso

Juan Pablo Campuzano Monsalve

Hace un año

Andrés Eduardo Puentes Puente

Hace 3 años

Julian Ricardo Gaviria Lugo

Hace 3 años

Rosmeri Gloria Ccanto Flores

Hace 3 años

Benjamin Allen Ramirez Horna

Hace 3 años

Francisco Joel Marin Calderón

Hace 3 años

Ulqernesh Karvenae

Hace 3 años

Miguel Enrique Velásquez Millán

Hace 2 años

Recursos

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.

Using emmet:

*nav+main+footer

   <nav></nav>
    <main></main>
    <footer></footer>

button*3>svg

        <button>
            <svg></svg>
        </button><button>
            <svg></svg>
        </button><button>
            <svg></svg>
        </button>

There are many other time-saving combinations. check this https://docs.emmet.io/cheat-sheet/

Thanks.... Excellent tips !!!!!

More emmet: article>.*2

    <article>
      <div class=""></div>
      <div class=""></div>
    </article>

Recomendación ✨🤗

ctrl + b

😮 si escribes un punto y seguido escribes el nombre de la clase te escribe el div. Para mi es nuevo🤪

.hola
<div class="hola"></div>

Para mi Fué: 🤯🤯🤯

Chicos, les dejo la estructura html para su uso

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet">

</head>
<body>
    <nav class="navbar">
        <p>Eco-Store</p>
        <button class="profile">
            <svg></svg>
        </button>
        <button class="wishlist">
            <svg></svg>
        </button>
        <button class="cart">
            <svg></svg>
        </button>
    </nav>
    <main class="main-section">
        <article>
            <div class="info-section">
                <h2>Impacto ecologico</h2>
                <p>Debido al impacto ambiental siendo las acciones humanas las que  modifican el ambiente, Eco-store se compromete a elaborar sus productos de manera artesanal y con materiales que favorecen al cuidado del medio ambiente.</p>
                <button>Conoce mas</button>
            </div>
            <div class="image-section">
                <img src="" alt="">
            </div>
        </article>
        <section class="product-section">
            <div class="healthcare">
                <h3>Cuidado de la salud</h3>
            </div>
            <div class="furniture">
                <h3>Decoracion del hogar</h3>
            </div>
        </section>
        <section class="info-section">
            <div class="about-us">
                <h3>¿Por qué nosotros?</h3>
                <div class="earty">
                    <img src="" alt="">
                    <p></p>
                </div>
                </div>
            </div>
            <div class="gallery">
                <h3>Galería de estilos</h3>
            </div>
            <div>

            </div>
            <div>

            </div>
            <div>

            </div>
            <div class="location">
                <h3>Encuéntranos</h3>
                <div class="map">
                    <img src="" alt="">
                </div>
                <p></p>
            </div>
        </section>
    </main>
    <footer>
        <h4>Eco-store</h4>
        <p>Careers</p>
        <p>Careers</p>
        <p>Careers</p>
        <div class="social-media">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>
    </footer>
</body>
</html>

En el min8:08 la clase cambio de nombre a "image-section" y en tu codigo le dejaste "info-section"

Sorry cambio de nombre a "impact-section"

en el min 6:05 la profe dice que es mas fácil manipular una imagen cuando esta dentro de un div, porque el div es un block e img es inline, esto lo pueden checar en https://htmlreference.io/

Assets del proyecto

https://drive.google.com/drive/folders/1OgdXKCxRvc1_Gixap_6ux9_YCPgZp5a4

pueden usar Shift + alt +flechita abajo y asi se crean copias rapidas lo seleccionado

pueden poner button.cart y se crea todo el button con la clase

<body> <nav class="navbar"> <p>Eco-Store</p> <button class="profile"><svg></svg></button> <button class="wishlist"><svg></svg></button> <button class="cart"><svg></svg></button> </nav> <main class="main-section"> <article> <div class="impact-section"> <h2>Impacto Ecológico</h2> <p>ebido al impacto ambiental siendo las acciones humanas las que modifican el ambiente, Eco-store se compromete a elaborar sus productos de manera artesanal y con materiales que favorecen al cuidado del medio ambiente.</p> <button>Conoce Más</button> </div> <div class="img-section"></div> </article> <section class="product-section"> <div class="healthcare"> <h3>Cuidado de la salud</h3> </div> <div class="furniture"> <h3>Decoracion del hogar</h3> </div> </section> <section class="info-section"> <div class="about-us"> <h3>¿Por qué nosotros?</h3> <div class="earth"> <img src="" alt=""> <p></p> </div> <div class="innovation"> <img src="" alt=""> <p></p> </div> </div> <div class="gallery"> <h3>Galería de estilos</h3> <div> <img src="" alt=""> </div> <div> <img src="" alt=""> </div> <div> <img src="" alt=""> </div> </div> <div class="location"> <h3>Encuéntranos</h3> <div class="map"> <img src="" alt=""> </div> <p></p> </div> </section> </main> <footer> <h4>Eco-store</h4> <p>Careers</p> <p>Careers</p> <p>Careers</p> <div class="social-media"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> </footer> </body>

En este punto, ignorando el tema de las variables, siento que hemos estado escribiendo css tal como lo conocemos

Estamos de acuerdo.

Creo que la magia de SASS aparecera mas adelante cuando vemoas mixins y funciones.

Las metodologías que sirven para nombrar las clases de los elementos es importante en Sass? e.e

Por supuesto ya que tener nombres claros y consistentes facilita la escritura y mantenimiento de código a futuro. . Por ejemplo tienes tu proyectos y pones nombres aleatorios y quieres cambiar algo pero tienes container-1 container-2 container-3 y no sabes exactamente en que parte debes modificar y si fueran 1000 lineas de código con 300 clases va a ser mucho mas difícil encontrar que se debe modificar pero si en cambio pones nombres como container-gallery ya sabes que es el contenedor de la galería

No hay nada en la seccion de recursos

Que buena clase, por alguna extraña razón comprendo mucho más facilmente la estructuración en HTML que en los cursos especialistas en este lenguaje de marcado. Muchas gracias Ana.

Creo que quedo desactualizado el curso

Este es mi código hasta el momento: <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./css/main.css" /> </head> <body> <nav class="navbar"> <p>Eco-store</p> <button class="profile"> <svg></svg> </button> <button class="wishlist"> <svg></svg> </button> <button class="cart"> <svg></svg> </button> </nav> <main class="main-section"> <article> <div class="impact-section"> <h1>Impacto ecológico</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio fuga nesciunt eos numquam quis totam ad consectetur ducimus. Quo impedit quos corporis ut aspernatur numquam error ullam optio, maxime labore? </p> <button>Conoce más</button> </div> <div class="image-section"> <img src="" alt="" /> </div> </article> <section class="product-section"> <div class="healthcare"> <h2>Cuidado de la salud</h2> </div> <div class="furniture"> <h2>Decoración del hogar</h2> </div> </section> <section class="info-section"> <div class="about-us"> <h2>¿Por qué nosotros?</h2> <div class="earth"> <img src="" alt="" /> <p></p> </div> <div class="innovation"> <img src="" alt="" /> <p></p> </div> </div> <div class="gallery"> <h2>Galería de estilos</h2> <div class=""> <img src="" alt="" /> </div> <div class=""> <img src="" alt="" /> </div> <div class=""> <img src="" alt="" /> </div> </div> <div class="location"> <h2>Encuentranos en</h2> <div class="map"> <img src="" alt="" /> </div> <p></p> </div> </section> </main> <footer> <h3>Eco-store</h3> <p>Careers</p> <p>Careers</p> <p>Careers</p> <div class="social-media"> <img src="" alt="" /> <img src="" alt="" /> <img src="" alt="" /> </div> </footer> </body></html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./css/main.css" />
    </head>
    <body>
        <nav class="navbar">
            <p>Eco-store</p>
            <button class="profile">
                <svg></svg>
            </button>
            <button class="wishlist">
                <svg></svg>
            </button>
            <button class="cart">
                <svg></svg>
            </button>
        </nav>
        <main class="main-section">
            <article>
                <div class="impact-section">
                    <h1>Impacto ecológico</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio fuga
                        nesciunt eos numquam quis totam ad consectetur ducimus. Quo impedit quos
                        corporis ut aspernatur numquam error ullam optio, maxime labore?
                    </p>
                    <button>Conoce más</button>
                </div>
                <div class="image-section">
                    <img src="" alt="" />
                </div>
            </article>
            <section class="product-section">
                <div class="healthcare">
                    <h2>Cuidado de la salud</h2>
                </div>
                <div class="furniture">
                    <h2>Decoración del hogar</h2>
                </div>
            </section>
            <section class="info-section">
                <div class="about-us">
                    <h2>¿Por qué nosotros?</h2>
                    <div class="earth">
                        <img src="" alt="" />
                        <p></p>
                    </div>
                    <div class="innovation">
                        <img src="" alt="" />
                        <p></p>
                    </div>
                </div>
                <div class="gallery">
                    <h2>Galería de estilos</h2>
                    <div class="">
                        <img src="" alt="" />
                    </div>
                    <div class="">
                        <img src="" alt="" />
                    </div>
                    <div class="">
                        <img src="" alt="" />
                    </div>
                </div>
                <div class="location">
                    <h2>Encuentranos en</h2>
                    <div class="map">
                        <img src="" alt="" />
                    </div>
                    <p></p>
                </div>
            </section>
        </main>
        <footer>
            <h3>Eco-store</h3>
            <p>Careers</p>
            <p>Careers</p>
            <p>Careers</p>
            <div class="social-media">
                <img src="" alt="" />
                <img src="" alt="" />
                <img src="" alt="" />
            </div>
        </footer>
    </body>
</html>

Como hace ella para borrar lo que esta dentro de la etiqueda?, donde podria aprender esos shortcuts?

Hola tengo un problema es que no me renderizan los estilos que puede estar pasando??

La fuente IBM Plex Sans no se me muestra a pesar de haber copiado los links tanto en el html y llamarlo en el scss, me aparece como fuente Time New Roman, ¿Saben a que se debe?

Hola, podrias mandar una captura de tu google fonts

Pueden compartir el figma?

No me deja darte el link pero ingresa a la primera clase en la sección de recursos hay encontraras Figma : Curso ingresa a ese link

Edité un poco la descripción de mi etiqueta p en mi proyecto:

"Eco-Store se especializa en la creación de productos artesanales utilizando materiales que respetan y cuidan el ambiente, inspirados en la importancia de proteger nuestro planeta."

Me pareció más bonita de esa forma, jijij ✨.

Conociendo SASS

Qué es Sass y por qué usarlo

Funcionamiento y ventajas de los preprocesadores CSS

Instalación y configuración del entorno de trabajo

Instalación y Configuración de SAS en Visual Studio Code

Reglas y uso

Variables y estructura de hojas Sass

Selectores y scope de variables en Sass

Estructura HTML y CSS para Proyectos Web en Visual Studio Code

Nesting y @rules de Sass en navbar

Expresiones

Expresiones en CSS: Números, Strings, Colores y Booleanos

Proyecto: sección main

Sección hero con Flexbox y Sass

Herencia en SASS

Herencia con @extend en Sass

Estilos de product cards con herencia CSS

Manipulación de Flexbox para Diseño de Tarjetas en CSS

Mixins

Uso de Mixins en SAS para Simplificar Estilos en CSS

Mixins de Flexbox con parámetros en SASS

Funciones

Operadores y Funciones en SAS: Uso y Ejemplos Prácticos

Proyecto

Sección "Por qué nosotros" con SASS y Flexbox

Estilos y Animaciones en Galerías con Figma y CSS

Sección Location y Footer con Sass

Deploy

Publica tu sitio web gratis con GitHub Pages

Extras

Instalación y Configuración de Sass con Node.js

Estructura HTML y CSS para Proyectos Web en Visual Studio Code