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

9 minuto(s)

Demo

La mejor manera de aprender a dominar una tecnología, es poniendola en práctica y creando un proyecto. No hay nada mejor que comenzar con una página web que es la base para crear todo proyecto y más adelante se le puede ir agregando los elementos que se deseen. En este Post te voy a enseñar a crear una página web con Tailwind CSS en su versión 3.0, acompañame en esta nueva aventura que de seguro te será muy útil en tu carrera como profesional, 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: “Porque Debes Acostumbrarte A Resolver Los Problemas De Código Por Tu Cuenta”:

Spotify: Sound Cloud: Apple Podcasts:

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

Lo primero que tenemos que hacer es desplegar Tailwind CSS, hay muchas formas de usar este genial Framework. Puedes instalarlo como un paquete NPM en React JS, Vue JS, Angular, etc. Asimismo puedes instalarlo en frameworks y tecnologías como Next.js, Laravel, Vite, Nuxt.js, Gatsby, entre otros.

Para este tutorial usaré HTML puro, es decir, no usaré React JS, Vue JS o Angular. En otros tutoriales los usaremos, pero recuerda que si quieres usar Tailwind en otros entornos como los mencionados anteriormente, puedes revisar su documentación oficial, en donde te enseñan los pasos adecuados.

El proyecto va tener 4 páginas web, las cuales son Home, Nosotros, Servicios y Contacto. Comenzaremos

Desplegando Tailwind CSS 3

Ya que trabajaré con HTML puro en ste tutorial, entonces usaré la CDN de Tailwind CSS, para ello instancio su url dentro de las etiquetas <head></head>, por ejemplo:


Con ello ya tenemos Tailwind CSS, puedes ver que adicionalmente llamo a un archivo llamado estilos.css, este archivo lo he creado manualmente para escribir allí mis propios estilos CSS.

Estructura del Proyecto

El sitio web va tener para comenzar la siguiente estructura:


Poco a poco esta estructura irá creciendo, conforme necesitemos implementar algunos elementos más.  Ahora pasaré a crear la primera página del sitio web.

Página Home

Para esta página creo un archivo HTML en el directorio principal del proyecto, le pongo el nombre index.html ya que será el archivo para la página principal.


Abro el archivo index.html y empiezo creando el menú de navegación, el cual se verá en todas las páginas del sitio web, por cierto el footer también se verá en todas las páginas del sitio web y en esta primera parte del tutorial los dejaremos creados y listos para usarlos en las demás páginas.

Menú

Este menú va tener el logo del proyecto al lado izquierdo, al lado derecho voy a colocar 4 botones que son Home, Nosotros, Servicios y Contacto.


Entonces si abro el archivo en el navegador o en mi servidor, debo de ver el menú sin problemas:

Ahora pasaré a crear un Carousel de imágenes.

Carousel

En este elemento voy a mostrar 3 imágenes y cada una enlaza a una artículo del blog. Tu puedes agregar la cantidad de imágenes que desees, yo usaré 3 imágenes para este tutorial.


Si voy al navegador, debería de ver el Carousel debajo del menú de navegación del sitio web:

He usado imágenes del Blog de Nube Colectiva, por eso las imágenes no son tan anchas, pero tu puedes usar imágenes más anchas, no hay problema.

Servicios Destacados

En esta sección voy a mostrar 4 servicios destacados, obviamente en la página Servicios que crearé más adelante, alli mostraré todos los servicios. Para esta sección colocaré 4 servicios: Servicio 1, Servicio 2, Servicio 3 y Servicio 4. Cada servicio tiene una imagen, una descripción y un botón para leer más.


Asimismo le he colocado un efecto de sombra, es decir cuando el usuario coloca el puntero del mouse sobre un servicio, se muestre una sombra que lo resalte. Igualmente, si voy al navegador, debería de ver los servicios destacados sin problema:

Ahora vamos a crear un formulario para que los usuarios se suscriban al boletín de novedades o newsletter.

Newsletter

Esta sección va tener un formulario para que el usuario escriba su correo y un botón para confirmar la suscripción.


De la misma manera, si voy al navegador debería de ver el formulario de suscripción al newsletter, sin problemas:

Bien y para terminar con la página principal, terminaré creando el Footer o pie de página para el sitio web, vamos con ello.

Footer

Este elemento al igual que el Menú va a estar presente en todas las páginas del sitio web, en el simplemente colocaré un texto del nombre de mi proyecto, un código JavaScript que actualiza el año automáticamente (asi evitamos estar cambiando el año manualmente) y un texto que dice Todos los derechos reservados. Le pondré un fondo gris a todo el Footer.


Asimismo, si voy al navegador, debería de ver el Footer sin problemas:

Y eso es todo para la página Home o Principal. 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 Nosotros.
  • 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.