En esta entrada podrás practicar con el componente header para tu aplicación.
Componente ""header""
Anímate a crear una barra de navegación sencilla. Para generar un componente, recuerda utilizar el comando ng g c <componente-name> del CLI de Angular.
Paso 1: Escribe el código HTML de tu template <header>.
Paso 3: Para tener tu header responsive, has uso de Media Queries para lograr que la aplicación se adapte a cualquier tamaño de pantalla.
{height="""" width=""""}
Siempre tienes que desarrollar tus aplicaciones front-end de manera tal que se vea correctamente en cualquier dispositivo. Apóyate de las herramientas que los navegadores poseen para validar tu aplicación.
Esta clase la verdad fue como " Esto es Facebook, esta es la parte responsiva de Facebook " y ya saben todo, que mal, venía muy ilusionado.
?
pero que mal le ves al curso Mateo? si, se salto una parte... pero solo es html o no? no todo lo vamos a tener papita. Tenemos que resolver como buenos programadores.
Veo muchas quejas en este curso, asi que solo le queda al creador y a Platzi mejorarlo eventualmente. Sin embargo, quiero dejar aquí un comentario de agradecimiento y de aliento a Nicolas y a todo el equipo de Platzi que se esforzó en la realización de este material. Esta claro que ensenar no es nada fácil, y debemos procurar que esta profesión sea respetada y debidamente valorada y remunerada
Me estaban fallando algunos estilos para la parte de mobile, organicé el archivo scss añadiendo algunas caracteristicas. Dejo el aporte.
por qué no usa header o los distintos HTML tags en lugar de usar divs?
es cierto, tenia entendido que usar header en vez de div era de buenas practicas
considero que la etiqueta header sigue siendo la practica correcta pero para fines del curso supongo que simplemente uso divs
😁 Me encanta todo lo que aprendo de programaciónn.
(esta duda ya la tenia desde que puso las imagenes) en cuanto al ancho me quedan bien, todas iguales, pero en cuanto al largo estan muy desparejas. Eso lo arregló de alguna manera en particular o busco imagenes que justo tengan el mismo largo? (o las corrigió él con algun programa?)
porque no me carga las imagenes .svg
Lo pudiste resolver?
no!
por que no me funciona con scss
Debe ser que no habilitaste la opción para soportar scss en tu proyecto, puedes cambiarlo con este comando:
ng config defaults.styleExt=scss
Si te genera un error puede probar con este otro:
ng config schematics.@schematics/angular:component.styleext scss
Debería existir un "curso todo incluido". Es cansado, sobre todo para quienes empiezan, el hecho de saltar curso en curso.
Es cansado, pero necesario
Si a alguien le interesa generar estilos globales (es util en casos concretos), solo se debe añadir en el angular.json la ruta al archivo con dichos estilos. El archivo quedará mas o menos así:
Como sería si se le pide una maquetación a alguna de las IA?
Comprobémoslo👀
Proporcioname una maquetación avanzada para un lista productos de un ecommerce
Ese sería el prompt
<div class="product-list"><div class="product"><img src="producto1.jpg" alt="Producto 1"><h4>Producto1</h4><p>Descripción del Producto1.</p><span class="price">$100</span><button class="add-to-cart">Agregar al Carrito</button></div><div class="product"><img src="producto2.jpg" alt="Producto 2"><h4>Producto2</h4><p>Descripción del Producto2.</p><span class="price">$120</span><button class="add-to-cart">Agregar al Carrito</button></div></div>
Fui muy injusto con esas instrucciones, lo haré mejor
Proporcioname una maquetación avanzada para un lista productos de un ecommerce, usando html semántico, accebilidad web y oocss
<section class="products"><article class="product"><img src="producto1.jpg" alt="Producto 1"class="product__image"/><h2 class="product__title">Producto1</h3><p class="product__description">Descripción del Producto1.</p><span class="product__price">$100</span><button class="product__button">Agregar al Carrito</button></article><article class="product"><img src="producto2.jpg" alt="Producto 2"class="product__image"/><h2 class="product__title">Producto2</h3><p class="product__description">Descripción del Producto2.</p><span class="product__price">$120</span><button class="product__button">Agregar al Carrito</button></article></section>
Pero esto tiene mucho margen de mejora, uso BEM en lugar de OOCSS, se puede mejorar la semántica y accebilidad.
Te inivito a sacar tus propias conclusiones.
Por cierto las preguntas deberían de ir en la sección de preguntas de la clase, saludos 👋
CSS
.show-mobile {
display: block;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.show-mobile > div {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.show-mobile > div button {
border: 0;
background: transparent;
}
.hide-mobile {
display: none;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.hide-mobile > div {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.hide-mobile .logo {
margin-right: 1em;
}
.hide-mobile nav {
display: flex;
align-items: center;
}
.hide-mobile nav ul {
display: flex;
list-style: none;
}
.hide-mobile nav ul a {
margin: 0 0.2em;
color: inherit;
text-decoration: none;
}
.hide-mobile .info {
display: flex;
align-items: center;
}
.hide-mobile .info .account {
margin-right: 0.5em;
}
/* Medium only /
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}
/ Large and up */
@media screen and (min-width: 64em) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}
Hola Nicolas, Nicolas una pregunta si usamos el ::ng-deep o el : host para el cambio de estilos es buena practica?
No encuentro el link de los assets, en qué parte los puso?, profesor :c
¡Hola Gibran! :)
El repositorio completo está en github
y aquí están los assets
Nunca pares de aprender 💚
hola copie todo tal cual incluso las imagenes svg que tra el archivo pero no me los muestra en el navegador hace horas estoy con el problema y no comprendo que es.
Si alguien pudiera ayudarme le agradeceria mucho
