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:
- Layout con header, nav, sidenav y footer
- Home con listado de tarjetas
- Página de vista de tarjeta
- Página de información
- 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