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

5 minuto(s)

Demo

En la parte anterior llamada Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 1, instanciamos la CDN de Tailwind CSS dentro de las etiquetas <head></head>. Con ellos ya podemos crear nuestra página sin problemas. Asimismo creamos el contenido de la página Home o principal, le diseñamos el Menú y el Footer, estos 2 elementos estarán presentes en todas las páginas de nuestro sitio web. También agregamos un Carrousel de imágenes, luego una sección de Servicios Destacados y un Formulario para que los usuarios dejen sus correos y se suscriban al Newsletter. En esta segunda parte vamos a crear el contenido para la página Nosotros, 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: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):

Spotify: Sound Cloud: Apple Podcasts

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

Página Nosotros

Esta página ofrece información acerca de la organización, pero primero voy a crear un archivo llamado nosotros.html para esta página, este archivo lo creo en el directorio principal del proyecto, donde también se encuentra el archivo index.html que sirve para la página principal.


Abro el archivo nosotros.html y empezaré creando una sección de introducción para la página nosotros. 

Nosotros (Introducción)

En esta sección colocaré el texto “Nosotros” con una imagen de gran ancho y debajo un texto de introducción. 


Entonces si voy al navegador, debería de ver los cambios sin problemas:

Ahora pasemos a la siguiente sección.

Objetivo, Misión y Visión

Esta sección va estar compuesta de 3 datos, se mostrará el objetivo de la empresa, misión y visión. Para mantener el orden, lo mostraré en 3 columnas.


Igualmente, si voy al navegador debería verse la información agregada:

En la imagen anterior, puedes ver que debajo del Objetivo, Misión y Visión esta el formulario de Newsletter, ese formulario lo creamos en la primera parte de este tutorial y es bueno colocarlo en todas las páginas posibles del sitio web, asi se generan más suscripciones.

Bien, eso es todo para la página Nosotros. Recuerda que en la última parte del tutorial colocaré todos los archivos del proyecto, incluido el archivo estilos.css en donde he creado mis propios estilos personalizados (Si bien estoy usando clases nativas de Tailwind CSS 3 para aplicar los estilos, también he creado mis propios estilos CSS. ). Asimismo colocaré las imágenes y otros archivos que use en este tutorial.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte de este tutorial, vamos a crear el contenido de la página Servicios.
  • 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.