Estilos en Angular: Alcance y Maquetación de Componentes

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:00

Estilos en Angular: Alcance y Maquetación de Componentes

Curso de Angular: Componentes y Servicios

Clase 9 de 20

Clase 9 / 20

Recursos

Diego Jurado

Hace 3 años

Como sería si se le pide una maquetación a alguna de las IA?

Brandon Lee Aguero Fernandez

Hace 3 años

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>Producto 1</h4>
    <p>Descripción del Producto 1.</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>Producto 2</h4>
    <p>Descripción del Producto 2.</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">Producto 1</h3>
    <p class="product__description">Descripción del Producto 1.</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">Producto 2</h3>
    <p class="product__description">Descripción del Producto 2.</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 👋

Comentarios (23)23 comentarios

Genix Xavier Granados Elias

Hace 5 años

Oscar Andres Jurado Ortiz Andres Jurado Ortiz

Hace 4 años

Luis Acosta

Emilio Nicolás Mendoza Patti

Juan Camilo Martinez Cano

Jimmy Buriticá Londoño

David De La Cruz S.

Ivan Hilario Pacheco

Jonathan Gonzalez Botero

CHRISTIAN OLIVER SOLANO NUÑEZ

Mateo Arias Correa

Huilén Solís

Kengya Moncada

Hace 2 años

Gabriel Diaz

José Nicolás Aristizabal Ramírez

Fabrizio Rodrigo Flores Pari

Daniela Stornelli

Israel Elias Manjarrez Quimiz

Jully Evangelina Flórez Fonseca

Diego Fernando Caviedes Camaho

fabian Flechas

Ciro Edgardo Mora Armesto

Nicolas Molina

Profesor

nandi.legorreta

Juan Fonseca

Blue Code

luisa maria

Gibran Hernandez Salinas

Norma Natalia Moreno Espinoza

Gonzalo Giusiano

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Estilos en Angular: Alcance y Maquetación de Componentes

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos