Frameworks de CSS

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:

 <!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:

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

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

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

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.

PreviousConceptos generales de CSS & Etiquetas básicas de CSSNextPreprocesador CSS

Last updated