Curso Materialize CSS

Framework CSS con el que aplicar fácilmente las guías de estilo de Material Design
Material disponible
Básico
10 Clases 8 h
65€
49€
Precio en promoción
Si te dedicas al desarrollo de sitios web, seguramente hayas oído hablar de Material Design: las guías de diseño de interfaces para sitios web y aplicaciones, creadas por Google. Material Design nos ayuda a todos los desarrolladores, ya sean diseñadores, maquetadores o programadores, a crear interfaces con una cuidada estética y un lenguaje visual consistente. 

Materialize CSS es un framework CSS que se basa en el lenguaje visual de Google y permite de una manera cómoda diseñar sitios y aplicaciones web, con una cuidada estética. Ofrece, a cualquiera que conozca HTML y CSS básico, la posibilidad de llevar sus interfaces de sitios y aplicaciones web al siguiente nivel. Con el Curso de Materialize CSS podrás aprender a aplicar todos los componentes y utilidades de CSS y JavaScript ofrecidas por el framework para las construcción de interfaces de usuario. 

Qué aprenderé en el Curso Materialize CSS

  • Introducción a Materialize CSS
    • Características.
    • Hola Mundo.
    • Componentes CSS.
    • Componentes JS.
  • Desarrollando un sitio web con Materialize CSS I
    • Definiendo la identidad visual del sitio.
    • Definiendo las secciones del sitio.
    • Definiendo las partes comunes.
    • Interactuado y modificando comportamientos por defecto del Framework.
  • Desarrollando un sitio web con Materialize CSS II
    • Maquetación y Responsive del sitio.
    • Trabajando con el Grid de Materialize.
    • Multimedia responsive.
    • Integrando estilos y componentes propios en Materialize.
  • Desarrollando un sitio web con Materialize CSS III
    • Integrando Componentes CSS al sitio.
    • Integrando Componentes JS al sitio.
    • Integrando Elementos de Formulario al sitio.
    • Optimizando el sitio web con PHP.
    • Modificación de los estilos base de Materialize CSS vía sus archivos de Sass

Objetivos del curso

El objetivo de este curso es ofrecerte un conocimiento profundo de un framework CSS avanzado como es Materialize CSS, de modo que puedas aplicar todo su valor y conseguir desarrollar sitios estéticamente cuidados y consistentes, en un menor espacio de tiempo. - Aprende a estructurar correctamente documentos HTML5 con etiquetas y atributos semánticos. - Crea increíbles temas e interfaces de gran calidad para sitios y aplicaciones web. - Conoce las utilidades widgets y componentes disponibles en Materialize CSS.

Por qué debes aprender Materialize CSS

Material Design no es más que una guía sobre cómo deben de presentarse las interfaces, y lograr así que se vean bonitas, consistentes y usables. Sin embargo, las guías creadas por Google no entran en el terreno de la implementación. Así pues, para aplicar Material Design tienes dos alternativas: 1) Realizar todo desde cero, o 2) apoyarte en algún framework o librería que te ofrezca las interfaces ya desarrolladas, para que solamente tengas que aplicar los estilos y funcionalidades para cada elemento.

Obviamente, si eres un buen maquetador con conocimientos avanzados y tienes todo el tiempo del mundo, puedes desarrollar desde cero tus bibliotecas de estilos y funcionalidad para aplicar Material, pero es mucho más sencillo y productivo acudir a un framework CSS como Materialize CSS.

Qué tengo que saber

Para el acceso a este curso es suficiente con tener un conocimiento básico de los lenguajes usados en la web para expresar el contenido y aplicar el estilo:

  • HTML básico
  • CSS básico Aunque Materialize CSS también te ofrece componentes que incorporan funcionalidad mediante Javascript, no necesitas conocer este lenguaje para poder usarlos correctamente.

Clases y contenidos

Introducción a Materialize CSS

Qué es Materialize CSS Gratis
  • Qué es Materialize CSS
  • Comparación con otros frameworks populares como Bootstrap.
  • Puntos fuertes de Materialize
Primeros pasos y estilos del framework Gratis
  • Empezar a usar Materialize y diversas maneras de obtenerlo e instalarlo en una página web
  • Diversos estilos generales, de utilidad en la mayoría de los sitios y cómo los resuelve Materialize
  • Código de ejemplo como demostración de los primeros pasos para aplicar los estilos que nos ofrece el framework CSS
Componentes de Materialize CSS Gratis
  • Repaso general a los componentes que ofrece Materialize CSS (botones, iconos, barras de navegación).
  • Aplicamos estilos en nuestra página de ejemplo, para demostrar lo sencillo que es usar componentes Material ofrecidos por el framework.
  • Cómo convertir sencillas etiquetas (o grupos de etiquetas) HTML en componentes con un aspecto visual muy enriquecido.
Componentes Materialize de Javascript Gratis
  • Componentes que tienen dependencia de código Javascript
  • Ejemplo de una barra de navegación
  • Examinamos otros componentes y vemos las alternativas de código para inicialización
Elementos de formulario Material Design Gratis
  • Personalización de sus elementos de formulario.
  • Otros frameworks CSS se quedan en personalizaciones prácticamente nulas para los campos de texto, básicamente porque se limitan a aquellas que les permiten los elementos nativos de HTML. Materialize va un paso más allá, creando componentes con un cuidado aspecto estético y personalizaciones de comportamiento muy destacadas. Veremos varios ejemplos, tanto en la propia documentación como en el código HTML de ejemplo para esta clase inicial.
Conclusiones y resto del curso de Materialize CSS Gratis
  • Conclusiones sobre los motivos por los que merece la pena apoyarse en Materialize
  • Dinámica de los cursos de EscuelaIT en general
Preguntas finales sobre Materialize Gratis

Aplicación del framework en diversos entornos y su compatibilidad con otros frameworks

Desarrollando un sitio web con Materialize CSS

Desarrollando un sitio web con Materialize CSS I
  • Definiedo la identidad visual del sitio.
  • Definiendo las secciones del sitio.
  • Definiendo las partes comunes.
  • Interactuado y modificando comportamientos por defecto del Framework.
Desarrollando un sitio web con Materialize CSS II
  • Maquetación y Responsive del sitio.
  • Trabajando con el Grid de Materialize.
  • Multimedia responsive.
  • Integrando estilos y componentes propios en Materialize.
Desarrollando un sitio web con Materialize CSS III

Últimas secciones de nuestro desarrollo con Materialize CSS en aspectos relacionados con los formularios

Valoraciones

JMSanchez

Guillermo Alonso

Elena Reifs Hernando

Visualnacert

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete