Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 1
En esta página:
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:
- ¿ Que es Tailwind CSS entre Otros Detalles ?
- Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 1
- Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1
- 5 Extensiones de Visual Studio Code recomendables para Desarrolladores de Angular
- Puedes leer más Posts como este en la categoría Tailwind CSS
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Home - Mi Proyecto</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CDN de Tailwind CSS --> <script src="https://cdn.tailwindcss.com"></script> <!-- Hoja de estilos Personalizada --> <link rel="stylesheet" href="assets/css/estilos.css"> </head> <body> <!-- Acá va el contenido de la página --> </body> </html> |
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:
1 2 3 4 5 6 7 8 9 10 |
/web-tailwindcss-3 ├── /assets ├── css // ... estilos CSS ... ├── img // ... imágenes ... ├── index.html ├── // ... Otros archivos HTML ... |
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.
1 2 3 4 5 |
/web-tailwindcss-3 ├── /assets ├── index.html // Creo y Abro este Archivo |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- Menú --> <nav class="nav flex flex-wrap items-center justify-between px-4 bg-gray-800 px-20"> <div class="flex flex-no-shrink items-center mr-6 py-3 text-grey-darkest"> <span class="font-semibold text-xl tracking-tight text-white">Mi Proyecto</span> </div> <input class="menu-btn hidden" type="checkbox" id="menu-btn"> <label class="menu-icon block cursor-pointer md:hidden px-2 py-4 relative select-none" for="menu-btn"> <span class="navicon bg-grey-darkest flex items-center relative"></span> </label> <ul class="menu border-b md:border-none flex justify-end list-reset m-0 w-full md:w-auto"> <li class="border-t md:border-none"> <a href="/" class="block md:inline-block px-4 py-3 no-underline text-grey-darkest hover:text-grey-darker font-bold text-white ">Home</a> </li> <li class="border-t md:border-none"> <a href="/about/" class="block md:inline-block px-4 py-3 no-underline text-grey-darkest hover:text-grey-darker text-white ">Nosotros</a> </li> <li class="border-t md:border-none"> <a href="/blog/" class="block md:inline-block px-4 py-3 no-underline text-grey-darkest hover:text-grey-darker text-white ">Servicios</a> </li> <li class="border-t md:border-none"> <a href="/blog/" class="block md:inline-block px-4 py-3 no-underline text-grey-darkest hover:text-grey-darker text-white ">Contacto</a> </li> </ul> </nav> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!-- Carousel --> <div class="carousel mx-auto max-w-5xl px-4 sm:px-6 lg:px-12"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"> <div class="carousel-item"> <a href="https://blog.nubecolectiva.com/10-ideas-de-regalos-geniales-para-programadores-parte-1/" target="_blank"> <img src="https://blog.nubecolectiva.com/wp-content/uploads/2021/12/gimg_destacada_blog_devs-930x360.png" alt="10 Ideas de Regalos Geniales Para Programadores – Parte 1"> </a> </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""> <div class="carousel-item"> <a href="https://blog.nubecolectiva.com/que-es-la-web-3-0-y-otros-detalles/" target="_blank"> <img src="https://blog.nubecolectiva.com/wp-content/uploads/2021/11/rimg_destacada_blog_devs-930x360.png" alt="Qué es La Web 3.0 y Otros Detalles"> </a> </div> <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""> <div class="carousel-item"> <a href="https://blog.nubecolectiva.com/como-hacer-analisis-a-los-productos-de-una-tienda-de-postres-mediante-data-science-parte-1/" target="_blank"> <img src="https://blog.nubecolectiva.com/wp-content/uploads/2021/10/edit_img_destacada_blog_devs-1-930x360.png" alt="Como hacer Ciencia de Datos (Data Science) a los productos de una Tienda de Postres – Parte 1"> </a> </div> <label for="carousel-3" class="carousel-control prev control-1">‹</label> <label for="carousel-2" class="carousel-control next control-1">›</label> <label for="carousel-1" class="carousel-control prev control-2">‹</label> <label for="carousel-3" class="carousel-control next control-2">›</label> <label for="carousel-2" class="carousel-control prev control-3">‹</label> <label for="carousel-1" class="carousel-control next control-3">›</label> <ol class="carousel-indicators"> <li> <label for="carousel-1" class="carousel-bullet">•</label> </li> <li> <label for="carousel-2" class="carousel-bullet">•</label> </li> <li> <label for="carousel-3" class="carousel-bullet">•</label> </li> </ol> </div> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!-- Servicios Destacados --> <div class="container ml-auto mr-auto flex flex-wrap items-start mt-8"> <div class="w-full pl-5 lg:pl-2 mb-4 mt-4"> <h1 class="text-3xl font-extrabold text-center"> Servicios Destacados </h1> </div> <div class="w-full md:w-1/2 lg:w-1/4 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s1.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 1 </h5> <p class="mt-4"> Nulla blandit ac tortor a ullamcorper. Fusce dictum, quam at ornare finibus, leo erat lacinia urna, vitae interdum est lacus vel massa. Donec porttitor posuere lacus sit amet auctor. Fusce fringilla mauris ipsum, nec tempus odio porttitor a. Cras eu urna eget est egestas pulvinar. </p> </div> <div class="flex items-center mt-4"> <a href="#" class="font-bold text-orange-900">Leer más</a> <button href="javascript:;" class="rounded-full bg-purple-900 text-white hover:bg-white hover:text-purple-900 hover:shadow-xl focus:outline-none w-10 h-10 flex ml-4 transition duration-300"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current m-auto"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> </button> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/4 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s2.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 2 </h5> <p class="mt-4"> Nulla blandit ac tortor a ullamcorper. Fusce dictum, quam at ornare finibus, leo erat lacinia urna, vitae interdum est lacus vel massa. Donec porttitor posuere lacus sit amet auctor. Fusce fringilla mauris ipsum, nec tempus odio porttitor a. Cras eu urna eget est egestas pulvinar. </p> </div> <div class="flex items-center mt-4"> <a href="#" class="font-bold text-orange-900">Leer más</a> <button href="javascript:;" class="rounded-full bg-purple-900 text-white hover:bg-white hover:text-purple-900 hover:shadow-xl focus:outline-none w-10 h-10 flex ml-4 transition duration-300"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current m-auto"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> </button> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/4 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s3.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 3 </h5> <p class="mt-4"> Nulla blandit ac tortor a ullamcorper. Fusce dictum, quam at ornare finibus, leo erat lacinia urna, vitae interdum est lacus vel massa. Donec porttitor posuere lacus sit amet auctor. Fusce fringilla mauris ipsum, nec tempus odio porttitor a. Cras eu urna eget est egestas pulvinar. </p> </div> <div class="flex items-center mt-4"> <a href="#" class="font-bold text-orange-900">Leer más</a> <button href="javascript:;" class="rounded-full bg-purple-900 text-white hover:bg-white hover:text-purple-900 hover:shadow-xl focus:outline-none w-10 h-10 flex ml-4 transition duration-300"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current m-auto"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> </button> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/4 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s4.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 4 </h5> <p class="mt-4"> Nulla blandit ac tortor a ullamcorper. Fusce dictum, quam at ornare finibus, leo erat lacinia urna, vitae interdum est lacus vel massa. Donec porttitor posuere lacus sit amet auctor. Fusce fringilla mauris ipsum, nec tempus odio porttitor a. Cras eu urna eget est egestas pulvinar. </p> </div> <div class="flex items-center mt-4"> <a href="#" class="font-bold text-orange-900">Leer más</a> <button href="javascript:;" class="rounded-full bg-purple-900 text-white hover:bg-white hover:text-purple-900 hover:shadow-xl focus:outline-none w-10 h-10 flex ml-4 transition duration-300"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current m-auto"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> </button> </div> </div> </div> </div> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!-- Newsletter --> <div class="mx-auto max-w-7xl p-4"> <div class="w-full mb-4 mt-4"> <h1 class="text-3xl font-extrabold text-center"> Newsletter </h1> </div> <form method="post"> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/2"> <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name"> Email: </label> </div> <div class="md:w-2/3 mr-2"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="email" placeholder="micorreo@mail.com" required> </div> <div class="md:w-2/3"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit"> Aceptar </button> </div> </div> </form> </div> |
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.
1 2 3 4 5 6 7 8 9 10 |
<!-- Footer --> <footer class="footer-1 bg-gray-100 py-8 sm:py-12 text-center"> <div class="container mx-auto"> <p>©Mi Proyecto <script> document.write(new Date().getFullYear()) </script>. Todos los derechos reservados. </p> </div> </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.
- Tailwind CSS
- 31-12-2021
- 29-01-2022
- Crear un Post - Eventos Devs - Foro
Social
Redes Sociales (Developers)
Redes Sociales (Digital)