Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 4 (Final)

5 minuto(s)

Demo Github

En la parte anterior de este tutorial llamada Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 3, creamos el contenido para la página Servicios la cual le agregamos un texto Servicios como titulo, luego agregamos un párrafo de introducción. Luego colocamos todos los servicios de la organización, en total eran 9 servicios, por último debajo también dejamos el Newsletter para que se suscribran al boletín los usuarios que visitan la página Servicios. En esta cuarta y última parte vamos a crear el contenido para la página Contacto, vamos con ello.

Partes

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

Asimismo, te invito a escuchar el Podcast: “Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !”:

Spotify SoundCloud Apple Podcasts

Bien ahora continuemos con el Post: Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 4 (Final).

Página Contacto

Para esta página vamos a crear 3 elementos, un formulario de contacto, al lado derecho datos de contacto y debajo un mapa de Google. Antes de todos estos elementos mencionados, voy a colocar el texto: Utiliza el formulario y los otros medios que tenemos a continuación, para contactarnos, que será como un texto de indicación para los usuarios.

Formulario

Este formulario irá al lado izquierdo y va tener los campos Nombres y Apellidos, Email, Asunto y Mensaje. Estos campos son campos básicos, pero tu le puedes colocar los campos que desees.


Si voy al navegador, debería de ver el formulario de contacto sin problemas:

Tal como lo mencioné anteriormente, he colocado el texto: Utiliza el formulario y los otros medios que tenemos a continuación, para contactarnos, que es un texto de indicación para los usuarios.

Datos de Contacto

Ahora al lado derecho del formulario, colocaré algunos datos de contacto como dirección, correo, teléfono y las redes sociales.


Igualmente, si voy al navegador, debería de ver los datos de contacto:

Los datos de contacto que he agregado, son datos básicos, tu puedes agregar los datos que desees.

Mapa de Google

Por último colocaré un mapa de Google, que será como un croquis de la ubicación de la empresa. Ya que no tengo una dirección real para este proyecto, usaré un mapa por defecto sin icono de ubicación.


Si voy al navegador debería de ver el mapa debajo del formulario y los datos de contacto:

Tu puedes colocar la ubicación real de la empresa mediante un icono, solo ve a Google Maps y marca la ubicación. Yo no uso una ubicación real, porque para este tutorial estamos usando una dirección de mentira.

Bueno, hasta aquí termina este tutorial, al inicio de cada Parte del tutorial, he colocado una Demo y en esta cuarta y última parte, he colocado el código del proyecto alojado en un repositorio de GitHub.

Conclusión

En este tutorial has aprendido a diseñar un sitio web en HTML puro con Tailwind CSS 3. Hemos creado diferentes elementos en cada página, tu puedes guiarte de este tutorial y crear sitios o proyectos web más complejos.

Nota (s)

  • 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.