Sección Location y Footer con Sass

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:0013:45

Sección Location y Footer con Sass

Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Clase 18 de 20

Clase 18 / 20

Comentarios (30)30 comentarios

Amauri Guillén

Hace 3 años

A mi parecer este curso quedo a deber

Considero que este curso fue demasiado largo para lo poco que se enseña de SASS. Se pudo haber optimizado más y reducirlo a 2 horas y es que gran parte del curso es ver a Ana corrigiendo y modificando una y otra vez los estilos y por momentos da la impresión de que no tiene preparado lo que va a hacer y solo está improvisando y esto clases de más de 20 minutos que parecen eternas. Me parece que esto hace que se pierda un poco el enfoque del curso que es aprender sobre el uso de SASS.

De igual forma, si la intención era hacer un curso largo, se pudo aprovechar mejor el tiempo para abordar otros temas de SASS como los modules, operators, functions, media-queries, entre otros y no dejarlo en algo tan básico.

Espero que tomen en consideración mis observaciones, tanto Ana como el team Platzi, para que en futuros cursos puedan mantener el nivel de calidad al que nos tienen acostumbrados.

Ulqernesh Karvenae

Hace 3 años

añadiendo a esto no tomo en cuenta los tamaños hechos en figma por que en un entorno profesional figma no es solo un boceto sino es el plan estructurado de lo que se debe seguir, y no simplemente por que se vea bonito esperaba que fuera un curso mas avanzado pero esta situado en una de las primeros cursos en la ruta, lo veo mas para conocer el sistema sass que la verdad me asombro y lo fundamental, hay fallos pero en general good

Rafael david suarez cordova

Hace 3 años

totalmente de acuerdo, me parece mas completo el curso de "preprocesadores de css" y al team platzi tiene que tomar en cuenta que si ya explicaron algo como los rem(es mas fácil de usarlo), responsive desing antes que este curso, partir de ahi, ya que en el curso de " responsive desing" demostraron que es mas fácil armar un proyecto desde ahí tomando en cuenta todos los cursos anteriores a este.

Katherine Cuartas

Hace 3 años

El curso me parece bueno, pero creo que es poco lo que se enseña de SASS

Libian María Hernández Gil

Hace 3 años

Wow, yo no sabía nada nadita de SASS y veo que tiene muchas ventajas... Queda revisar si hay uno que sea no de fundamentos sino más avanzado. Me ha gustado lo que explican hasta ahora, aunque para quien está iniciándose sería más complejo seguir las indicaciones de estilos de la prof.

María C. Santiago

Hace 3 años

Completado 😸🎉 Aprendí muchas cosas que no sabía de SASS, me ayudó a facilitar el trabajo, intentaré utilizarlo mucho más.

Felipe García

Hace 3 años

Muy linda pagina María, cómo logras sacar una screen a pagina completa?

María C. Santiago

Hace 3 años

Hola @Pipe.Garcia cuando le das a inspeccionar a la página, encuentras esto para sacar la captura

Julia Gabriela Nieva Paredes

Hace 3 años

Me pareció buen curso para los que estamos empezando con Sass. Pero lo que no me gustó fueron tantas idas y venidas con los valores, entiendo que así es el trabajo, estar probando y corrigiendo. Aún así, sí pienso que la profe podría tener más cuidado con esos valores y tenerlos a la mano al momento de grabar. (Lo digo porque yo también soy profe, y en la pandemia me tocó grabar) Ese pequeño detalle hubiera hecho que los videos fueran más cortos, porque algunos sí los sentí eternos. En fin, ojalá la profe lea nuestros comentarios y los use como retroalimentación positiva.

Ariel Hernán Contini

Hace 3 años

Este curso tiene sus falencias y debe tener que ver que la profesora es algo novata en esto de estructurar el contenido. Muchas veces parece que se pierde y que no tiene los conceptos tan arraigados...hasta podria decir que me gustaría ver algo simil solamente dictado por diego de granda, quien nos podria llevar mas al uso de SASS en mobile first.

De todas maneras, siempre es bueno reconocer el tiempo y el esfuerzo de Ana María y que esta debe ser una de sus primeras experiencias como profesora. No todos sabemos enseñar, no todos comenzamos sabiendo hacerlo, ojalá que esto sea el inicio de un buen camino como educadora digital. Saludos y exitos!

----- ----

Hace 3 años

🎉🎉 Costó, pero llegamos a finalizar :D!

Fabian Camilo Huertas Suarez

Hace 3 años

Muy buen curso aprendí mucho, pero si me quedo debiendo la parte del mobile-first el cual se debería trabajar de primeras, ojalá se pudiera actualizar el curso también orientado a esa manera, ya que el tema como tal de Sass aprendí bastante

Juan Diego Sastre Moreno

Hace 3 años

¡Lo logré! Después de 4 semanas de arduo trabajo y dedicación, finalmente he alcanzado mi objetivo. Terminar este gran proyecto de este excelente curso.

Franco Aguirre

Hace 3 años

Malisimo el curso, pense que ensañaria SASS pero solo fue maquetacion de un proyecto muy malo.

bye

Omar Alberto Hernández Rey

Hace 2 años

Lo mismo pienso yo pesimo

iecgerman .

Hace 3 años

¿Que es eso de APIs?? es acaso eso de hacer que el mapa sea como el de google maps ¿que le des zoom??

Xavier Flores

Hace 3 años

Gracias Ana María por tu esfuerzo y dedicación, espero que sigas creciendo y fortaleciendo tus habilidades de enseñanza, quedo a la espera de un nuevo curso de SASS intermedio o avanzado.

Juan Cortez

Hace 3 años

Como para introducir el tema está súper bien, más hay temas que debían ser enseñados con más profundidad

Ahora, el flujo de trabajo planteado no está bien porque en el mismo Platzi se exije bastante el Mobile First (esa voz de Diego De Granda en mi cabeza). Creo que eso podría mejorarse.

Opinion personal

iecgerman .

Hace 3 años

¿Si erea necesario en .location volver a decalar la variavle $text-color por segunta vez? (min 4:22)

Kevin Arizaga

Hace 3 años

si, ya que la variable fue declarada en el ambito local. No es necesario volverla a declarar cuando es declarada en el ambito global, por eso las variables globales las colocan al inicio fuera de cualquier bloque de codigo scss. Mientras q las variables locales son declaradas dentro de un bloque de codigo scss.

Isabella Sofía Pardo Andrade

Hace 2 años

Yo implemente el elemento iframe .

Y así me quedo , Aquí el codigo html:

div class="location"> <h3>Encuéntranos</h3> <div class="maps-container"> <div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2233.2669687144376!2d-74.12478680631979!3d4.592180497141079!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e3f992928b4cee9%3A0x539f03e456727685!2sCentro%20Comercial%20Centro%20Mayor!5e0!3m2!1ses!2sco!4v1737219952029!5m2!1ses!2sco" width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <h4>Centro Comercial Centro Mayor</h4> <p> Cl. 38A Sur #34d-51, Bogotá Local 1008</p> </div> <div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.3137394315595!2d-74.8303156258033!3d11.015070689148565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8ef42c4cd175908d%3A0x9b9bfcb63575d493!2sCentro%20Comercial%20Mallplaza%20Buenavista!5e0!3m2!1ses!2sco!4v1737220084980!5m2!1ses!2sco" width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <h4>Centro Comercial Mallplaza Buenavista</h4> <p>Cra. 55 #99 - 51, Barranquilla Local A-1033 </p> </div> </div> </div> css: .location { margin-top: 50px; margin-bottom: 50px; text-align: center; } .location h2 { font-size: 24px; margin-bottom: 50px; color: $boton-rojo; font-weight: 400; }

.location .maps-container { display: flex; ``/* Flexbox para alinear los mapas en fila */`` justify-content: center; align-items: flex-start; gap: 40px; ``/* Espaciado entre los mapas */`` flex-wrap: wrap; } /* Cada mapa y su información */``.map { text-align: center; width: 300px; } .map iframe { width: 100%; height: 200px; border: none; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }

.map h3 { font-size: 1.6rem; margin: 10px 0; color: $boton-rojo; font-weight: 500; } .map p { font-size: 1.4rem; margin: 5px 0; color: $gris-oscuro; } /* Adaptación a pantallas pequeñas */``@media (max-width: 768px) { .location .maps-container { flex-direction: column; ``/* Cambia a columna en pantallas pequeñas */`` gap: 20px; } .map { width: 100%; }}

Tomás Argüello

Hace 3 años

y le falta responsive design

JACOBO ZAPATA ROJAS

Hace 3 años

Hello everyone, this is how my project ended up. Hope you like the result and thank you!

https://eco-store-landing-page.vercel.app/?vercelToolbarCode=6QaBIS_Kiq40jF9

It is actually much more well suited and optimized for mobile and tablet devices, since I followed the mobile first approach and scaled it from then

Facundo Peralta

Hace 3 años

Muy buen curso. Para una primera aproximación a SASS me encantó! Si bien como muchos dicen le faltó la parte de mobile first, creo que viendo el curso de Diego y combinando lo aprendido acá es mas que suficiente, si me hubiera gustado que viaremos algo de funciones pero bueno. Me gustó también que los videos sean completos en cuanto a la creación de la web en si, Gracias! Y espero que saquen otro más intermedio con otro proyecto igual de divertido que este.

Henry Alexander Velásquez Rosas

Hace 3 años

Ese footer parece un refrito del curso Responsive Design: Maquetación Mobile First del gran Diego de Granda. 😄

JOSE MARIA SUAREZ GIESE

Hace 4 meses

Hasta este punto debo decir que fué bastante interesante el ahorro de líneas de código con los @include y @extends. Me agradó bastante el uso de Flexbox al 100% ya que es la manera de alineación que más estoy practicando.

Joseph Darwin Carhuaz Villagomez

Hace un año

Vengo de usar Stylus por muchos años, luego de ver el curso pasar a SASS ni lo voy a sentir porque se parecen demasiado. Debo añadir que coincido con algunos comentarios ya hechos, como centrar la metodología y contenidos del curso a esplorar mejor las posibilidades con SASS, principalmente con las buenas prácticas. estruturación de los estilos, modularización en archivos diferentes, configuraciones para generar css minificado, un mejor uso de variables. Agradecido con todos que hicieron posible este curso y por supuesto con la profe :)

Recursos

Cerrar un proyecto web con Sass implica algo más que escribir estilos: requiere pensar en jerarquía visual, semántica HTML y reutilización de código. Aquí aprenderás a construir la sección de location con un mapa estático y un footer con redes sociales, aplicando mixins, variables locales y selectores compartidos para mantener tu código limpio y escalable.

Cómo estructurar la sección de location con HTML semántico

La sección del mapa parte de una estructura sencilla pero pensada para SEO y accesibilidad. Dentro del Figma, el diseño contempla un título principal, una imagen del mapa y la dirección del lugar.

En el HTML usamos un H2 para el título principal encuéntranos en y un H3 para la dirección específica. Esta jerarquía importa porque los motores de búsqueda interpretan la estructura de encabezados como pistas sobre el contenido.

¿Por qué usar una imagen en vez de la API de Google Maps? Porque no exige conocimientos de consumo de APIs y permite enfocarte en el aprendizaje de Sass. Si ya manejas APIs, puedes implementar la versión interactiva.

La imagen del mapa se carga desde la carpeta assets/image, manteniendo una organización clara de recursos estáticos.

Cómo aplicar mixins y variables locales en Sass

Dentro del archivo de estilos, después de la sección gallery y antes del footer, se declara la clase .location. La clase interna .mapa recibe las propiedades de centrado mediante un @include del mixin flex-center, pasando los parámetros para fila, centrado horizontal y vertical.

Para separar la imagen del texto de dirección, se aplica un padding-bottom de 50 píxeles. El color del H3 se gestiona con una variable local llamada text-color, que se reutiliza dentro del mismo bloque. Este enfoque mantiene los valores encapsulados sin contaminar el alcance global de variables.

scss .location { $text-color: #valor; .mapa { @include flex-center(row, center, center); img { padding-bottom: 50px; } } h3 { color: $text-color; } }

Cómo compartir estilos entre selectores con una coma

Uno de los detalles más útiles aparece al ajustar tipografías. El H2 y el H3 necesitan el mismo font-size proveniente de la variable paragraph-size. En lugar de duplicar las reglas, se separan los selectores con una coma para compartir estilos.

Esta técnica reduce líneas de código y facilita el mantenimiento. Si mañana cambias el tamaño tipográfico, lo haces en un solo lugar.

Cómo construir un footer con redes sociales en Sass

El footer concentra el logotipo Eco Store, enlaces de información corporativa e iconos de redes sociales. Su estructura visual debe ser limpia y respirar lo suficiente para no sentirse comprimida.

El height del footer se deja en automático: crece según los elementos que contenga. El color del texto interno se define en blanco para contrastar con el fondo oscuro predeterminado.

¿Qué información incluir en un footer? Datos de la empresa, enlaces legales como terms and conditions, secciones como careers y la razón social. Por ejemplo: Eco Store Inc.

Dentro del footer se crea una sección con la clase social-media que agrupa los iconos de Instagram, Facebook y Twitter, importados desde assets/image.

Cómo aplicar padding y gap para mejorar la legibilidad

Los elementos del footer aparecen muy pegados por defecto, lo que afecta la lectura. Para resolverlo, se aplica un padding de 40 píxeles al contenedor general y un gap de 40 píxeles entre elementos hijos, generando espaciado tanto en el eje X como en el eje Y.

La clase social-media reutiliza el mixin flex-center para alinear los tres iconos horizontalmente. Un padding-bottom adicional separa visualmente el bloque de redes sociales del resto del contenido.

Padding general del footer: 40 píxeles.
Gap entre elementos: 40 píxeles.
Padding bottom para separación: 40 píxeles.

Estos valores son consistentes con los del resto del proyecto, lo que aporta ritmo visual al diseño.

Cómo decidir entre centrado y alineación con el título

Un dilema común aparece al posicionar el texto de la dirección: ¿alinearlo al borde izquierdo de la imagen o centrarlo junto con ella? La opción que predomina en este proyecto deja el mapa centrado y los textos alineados con el título principal.

La razón es estética y funcional: el contenido textual gana protagonismo cuando se alinea con la jerarquía superior, mientras que el mapa funciona como un bloque visual independiente.

Probar con padding-left de 120 píxeles fue una opción inicial, pero al detectar que el alineamiento dependía del ancho de la imagen, se descartó en favor del centrado natural del contenedor flex.

¿Implementaste tu propia versión con la API de mapas? Cuéntame en los comentarios cómo resolviste la integración y qué retos encontraste con Sass.

Resumen

Cómo estructurar la sección de location con HTML semántico

¿Por qué usar una imagen en vez de la API de Google Maps? Porque no exige conocimientos de consumo de APIs y permite enfocarte en el aprendizaje de Sass. Si ya manejas APIs, puedes implementar la versión interactiva.

La imagen del mapa se carga desde la carpeta assets/image, manteniendo una organización clara de recursos estáticos.

Cómo aplicar mixins y variables locales en Sass

scss .location { $text-color: #valor; .mapa { @include flex-center(row, center, center); img { padding-bottom: 50px; } } h3 { color: $text-color; } }

Cómo compartir estilos entre selectores con una coma

Esta técnica reduce líneas de código y facilita el mantenimiento. Si mañana cambias el tamaño tipográfico, lo haces en un solo lugar.

Cómo construir un footer con redes sociales en Sass

El height del footer se deja en automático: crece según los elementos que contenga. El color del texto interno se define en blanco para contrastar con el fondo oscuro predeterminado.

¿Qué información incluir en un footer? Datos de la empresa, enlaces legales como terms and conditions, secciones como careers y la razón social. Por ejemplo: Eco Store Inc.

Dentro del footer se crea una sección con la clase social-media que agrupa los iconos de Instagram, Facebook y Twitter, importados desde assets/image.

Cómo aplicar padding y gap para mejorar la legibilidad

Padding general del footer: 40 píxeles.
Gap entre elementos: 40 píxeles.
Padding bottom para separación: 40 píxeles.

Estos valores son consistentes con los del resto del proyecto, lo que aporta ritmo visual al diseño.

Cómo decidir entre centrado y alineación con el título

La razón es estética y funcional: el contenido textual gana protagonismo cuando se alinea con la jerarquía superior, mientras que el mapa funciona como un bloque visual independiente.

¿Implementaste tu propia versión con la API de mapas? Cuéntame en los comentarios cómo resolviste la integración y qué retos encontraste con Sass.

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

Sección Location y Footer con Sass