jairogarcíarincón

Descripción

Integración de una app Angular con Angular Material y Sass para la creación de diseños responsive

Introducción

En esta clase realizaremos un compendio de lo aprendido en las clases de Maquetación web responsive y Sass y SCSS para aplicarlo a la creación de diseños responsive en aplicaciones Angular con Angular Material y Sass.

Comenzaremos realizando una instalación limpia de Angular con Angular Material para, posteriormente, personalizarla a partir de unas indicaciones, de modo que el resultado final sea una página web estilo SPA (single page application) con diseño responsive y que incluya los siguientes elementos:

1. Layout con header, nav, sidenav y footer
2. Home con listado de tarjetas
3. Página de vista de tarjeta
4. Página de información
5. Página de formulario de contacto

Todo ello lo haremos utilizando los componentes nativos de Angular Material y SCSS para personalizar los estilos, si bien a la hora de instalar puedes optar por hacerlo con Sass o con Less.

Cabe destacar que el objetivo de esta clase no es el aprendizaje de Angular, sino el diseño responsive con Angular Material, de modo que todas las fases de instalación, configuración y creación de componentes y rutas necesarias para el funcionamiento serán explicadas de forma rápida y sin mucho detalle.

Metodología

Para un correcto aprovechamiento, debemos realizar el curso mediante la lectura y escucha activa de los contenidos y la repetición en nuestro equipo del proyecto de muestra.

Por este motivo, se recomienda interrumpir al profesor siempre que se considere necesario, para evitar perderse o quedarse atrás.

Todo el código utilizado en el curso, se encuentra disponible en el siguiente repositorio público de GitHub:

diseno-responsive-con-angular-material-y-sass

No obstante, en este otro repositorio público tienes el proyecto completo, que puedes clonar si así lo prefieres:

demo-angular-sass

Es importante remarcar que estas páginas son un apoyo para impartir el curso, y que por tanto no estarán desarrolladas al detalle las instrucciones de cada uno de los ejercicios, sino solo una idea general que luego se irá detallando mediante explicaciones del profesor en las clases.

Evaluación

Al final del curso, se mostrará un cuestionario de evaluación tipo test para cuantificar el aprendizaje de los contenidos.

Créditos

Imagen de portada by vectorjuice on Freepik

---

Publicado el 01 de Mayo de 2024

angular angular material material sass diseño responsive