Conociendo SASS
¿Qué es SASS y en qué se diferencia de otros preprocesadores?
¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno
Instalación y configuración del entorno de trabajo
Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo
Reglas y uso
Estructura de la hoja de estilos y variables
Uso de selectores, scope de las variables y shadowing
Creando la estructura del proyecto
At Rules: CSS y nesting
Quiz: Reglas y uso
Expresiones
Expresiones: Literales y Operaciones
Quiz: Expresiones
Proyecto: sección main
Creando la estructura de la sección main
Quiz: Proyecto: sección main
Herencia en SASS
¿Qué es la herencia y cómo funciona en SASS?
Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar
Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar
Quiz: Herencia en SASS
Mixins
¿Qué es un mixin en CSS?
Implementando mixins en el proyecto
Quiz: Mixins
Funciones
Creación de nuestras propias funciones
Proyecto
Creando la estructura de la sección '¿Por qué nosotros?'
Creando la estructura de la sección Galería de Estilos
Creando la estructura de la sección Mapa y Footer
Quiz: Proyecto
Deploy
Presentación de Github pages y deploy
Quiz: Deploy
Extras
Aprende a instalar y configurar Sass mediante Node.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 21
Preguntas 5
Using emmet:
*nav+main+footer
<nav></nav>
<main></main>
<footer></footer>
<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/
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">
<h1>Impacto ecologico</h1>
<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">
<h2>Cuidado de la salud</h2>
</div>
<div class="furniture">
<h2>Decoracion del hogar</h2>
</div>
</section>
<section class="info-section">
<div class="about-us">
<h2>¿Por qué nosotros?</h2>
<div class="earty">
<img src="" alt="">
<p></p>
</div>
</div>
</div>
<div class="gallery">
<h2>Galería de estilos</h2>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div class="location">
<h2>Encuéntranos</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>
😮 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>
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/
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”>
<h1>Impacto Ecológico</h1>
<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”>
<h2>Cuidado de la salud</h2>
</div>
<div class=“furniture”>
<h2>Decoracion 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>
<img src="" alt="">
</div>
<div>
<img src="" alt="">
</div>
<div>
<img src="" alt="">
</div>
</div>
<div class=“location”>
<h2>Encuéntranos</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>
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.
Genial…!
. tengo una duda como puedo hacer que mi sitio se quede estatico? ya que si yo me desplazo hacia la derecha todavia se ve mas del background y quiero que solo este al borde de la imagen y no se desplace más hacia la derecha
Usando emmet pueden escribir:
nav.navbar+main.main-section+footer.footer
Y el resultado es:
En esta parte estaría bueno que en vez de decir "impact" podria ser "Hero Section" Ya que es la primera sección que nos aparece cuando estamos visualizando la interfaz por primera vez.
Alt + Z ---------> Les permite visualizar toda la ventana sin necesidad de estar haciendo scrooll
Para los que le interesa aprender mas sobre Emmet
aquí les dejo el enlace a su documentación.
Me encanta como enseña la profe ♥
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?