Como Crear una Página Web con Material Design – Parte 3

Material Design Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo

En este Post continuaremos con la parte anterior llamada Como Crear una Página Web con Material Design – Parte 2 en donde creamos los Breadcrumbs de Navegación que usaré también en las demás páginas, asimismo creamos el contenido para la página Nosotros, en este Parte 3 crearemos el contenido para la página Servicios, vamos con este Post.

Partes


Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

SpotifySoundCloud

Bien ahora continuemos con el Post: Como Crear una Página Web con Material Design – Parte 3.

En la Parte 2 habíamos creado un Breacdrumb o Miga de pan que sirve de guía al usuario para que sepa en que lugar de la página se encuentra, este Breadcrumb también lo usaré en la página Servicios que crearé en este Post.

Usaré los mismos estilos CSS, ya que es el mismo diseño y solo cambio el texto a Servicios.

Ahora pasemos a crear el contenido de la página Servicios.

Página Servicios

Debemos recordar que el Header y el Footer que creamos en la Parte 1 de este tutorial, se usan para todas las páginas, lo único que cambia ese el contenido del medio de cada página.

Los primero que agregaré será un texto de introducción a los servicios con los que cuenta un determinada página o empresa, coloco el Texto Servicios en un encabezado h1 y en un elemento p el párrafo con el texto de introducción.

Entonces si abro la página en el navegador, debo de ver el los cambios realizados en el diseño de la página Servicios.

Paso seguido, añadiré 2 filas de servicios, cada fila tendrá 3 servicios, yo quería montar 4 servicios, es decir 4 columnas, pero no quiero dejar de usar las clases nativas del Grid de Material Design, pero creo que si modificamos el código podemos lograr las 4 columnas, repito yo solo usaré 3 columnas para mantener el uso de clases nativas del Grid de Material Design.

La primera fila tendrá los servicios Servicio 1, Servicio 2 y Servicio 1, tu les puedes poner los nombres de servicios que desees a los servicios.

Si voy a navegador y actualizo la página Servicios, debo de ver la primera fila con 3 servicios.

La Segunda fila de servicios tendrá los servicios Servicio 3, Servicio 4 y Servicio 5 y si las agrego, pues acumulo 2 filas de servicios en mi código HTML.

Luego voy al navegador, actualizo la página Servicios y debo de ver las 2 filas con los 6 servicios: Servicio 1, Servicio 2, Servicio 3, Servicio 4, Servicio 5 y Servicio 6.

Puedes ver que a cada servicio le he colocado un icono con una flecha apuntado hacia la derecha, tu puedes cambiar ese icono, solo busca en la galería de iconos de Material Design el que más te agrade o encaje con tu diseño.

Recuerda que los estilos CSS los colocaré en el repositorio GitHub con el resto de código de esta página web, estos estilos son mis estilos personalizados y son aparte de los estilos de Material Design.

Tal como mencione al inicio de la creación de la página Servicios, en la Parte 1 de este tutorial ya realice la creación del header, menú de navegación, footer o pie de página y una sección para suscribirse al boletín (newsletter), estos 4 elementos los uso en las demás páginas, entonces solo nos enfocaremos en crear el contenido interior de cada página.

Material Design nos permite usar sus elementos y combinarlos con nuestros propios estilos CSS, yo para mantener el estándar he colocado al inicio de los nombres de clases la abreviatura mdl que significa material design.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capítulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente Parte y última de este tutorial crearé la página Contacto.
  • Los estilos CSS los colocaré en el repositorio GitHub, para no hacer muy amplio el tutorial y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments