Tailwind CSS - Centrar verticalmente

En este corto tutorial de programación CSS con Tailwind vamos a ver cómo centrar un elemento verticalmente. ...

septiembre 27, 2024 · 1 min · 181 palabras · Parzibyte

Tailwind CSS sin frameworks

En el blog ya he escrito sobre cómo usar TailwindCSS con Vue 3 y Vite, pero no he hablado sobre cómo usarlo sin ningún framework, es decir, usar Tailwind CSS con HTML plano y puro, cosa que sí es totalmente posible. ...

abril 9, 2024 · 3 min · 507 palabras · Parzibyte

Iconos material design con Vue 3

En este post vamos a ver cómo usar los iconos de Material design en nuestros proyectos web al usar Vue 3. Te voy a mostrar una manera en la que al final vas a incluir en tu proyecto solo los iconos que has usado, haciendo tu software mucho más ligero. Para tener los Material design icons en Vue 3 vamos a usar el paquete vue-material-design-icons que a su vez es simplemente una colección de componentes de Vue que usan los Material Design Icons. ...

febrero 9, 2024 · 2 min · 331 palabras · Parzibyte

Tailwind CSS con Vue 3 y Vite

En este post te voy a enseñar a agregar Tailwind CSS a un proyecto de Vue 3. Básicamente es seguir la guía oficial, pero con unos pasos extra desde mi experiencia. ...

enero 25, 2024 · 2 min · 267 palabras · Parzibyte

Crear y publicar Progressive Web App - Convertir app web en PWA

Hoy voy a enseñarte cómo convertir cualquier aplicación web en una PWA o Progressive Web App. Tú puedes programar en cualquier lenguaje y Framework, ya que las PWA no están atadas a algo más allá de JavaScript. Así que mientras tu app conste de archivos del lado del cliente, podrás convertirla en PWA. Y con estos archivos me refiero a CSS, JS, HTML, imágenes, etcétera. Te repito que para crear una PWA no necesitas usar un framework específico, así que puedes usar JavaScript puro, Angular, Vue, React, jQuery (bueno, jQuery no, ya es obsoleto) y cualquier otro que genere JavaScript al final. ...

noviembre 23, 2021 · 8 min · 1512 palabras · Parzibyte

Centrar imagen con CSS

En el post de hoy te mostraré algo muy simple: cómo centrar una imagen HTML usando CSS, sin frameworks.alinear una imagen al centro Si bien es algo sencillo, en ocasiones olvidamos cómo hacerlo. Así que en este artículo te mostraré el estilo CSS para centrar un elemento img. ...

septiembre 1, 2021 · 1 min · 206 palabras · Parzibyte

Plantilla HTML con header, section, aside y footer

En este post te mostraré una plantilla HTML que tiene los elementos o etiquetas header, section, aside y footer. Es un simple ejemplo con HTML y CSS para una página web. El aside y el section tienen la misma altura, y el aside es mostrado a la derecha con un borde. Obviamente tú podrás cambiar los colores o el estilo, aquí solo te dejo una plantilla HTML muy simple con CSS puro. ...

septiembre 1, 2021 · 2 min · 344 palabras · Parzibyte

Bulma - Cuadrícula dinámica y automática

Hoy te mostraré cómo hacer una cuadrícula o grid en donde cada sección se acople a la pantalla de manera automática y dinámica sin que tú sepas la cantidad de columnas que habrá. Esto es útil para cuando tenemos contenido dinámico (ya sea generado por el lado del cliente o del servidor) y queremos que las tarjetas o cuadros sobrantes se bajen automáticamente a otra fila. Básicamente haremos una cuadrícula que ajuste el contenido dinámico usando bulma y sus columnas. Verás que es muy sencillo. ...

julio 17, 2021 · 2 min · 339 palabras · Parzibyte

Alojar página web en GitHub

En este tutorial te enseñaré cómo alojar tu sitio web o aplicación web en GitHub totalmente gratis. Si bien GitHub no está pensado como un servicio de hosting, podemos ejecutar nuestras aplicaciones dentro del servicio. Te enseñaré cómo usar GitHub para servir tu proyecto web. Por ahora solo te mostraré cómo usarlo para servir JavaScript, HTML y CSS (pues no podemos procesar nada del lado del servidor). Así que, que quede claro: solo va a funcionar para las cosas del lado del cliente y no del lado del servidor sin importar el lenguaje de programación. Pero no te preocupes, para un portafolio o aplicación web funcionará de maravilla, siempre y cuando no utilice backend. ...

abril 28, 2021 · 3 min · 447 palabras · Parzibyte

Centrar imagen con Bulma

En este post te enseñaré cómo centrar una imagen dentro de un div usando el framework CSS Bulma. Hay varias formas, pero te enseñaré la que me ha funcionado hasta el momento. ...

febrero 4, 2021 · 2 min · 271 palabras · Parzibyte