Esta guía es un recopilatorio de vídeos de la Zona Código y de algunos cursos. Hay tantos contenidos ya publicados que los he ordenado para que puedas consumirlos más fácilmente.
Para poder verlos debes ser miembro.
💡 Consejo: marcas los vídeos como completados para llevar un registro de cuáles has visto ya.
Escribe tu búsqueda y pulsa la tecla Enter:
Las bases del css
- Curso de CSS básico a enfocado a WordPress
- Curso de HTML aplicado a WordPress
- Cómo editar css en WordPress
- Diferencia y uso de las unidades rem y em en css
- Cómo personalizar espacios entre elementos (margin y padding)
- Bordes con CSS en WordPress
- Diferencias entre border vs outline para crear bordes con css
- Centrar elementos con css en WordPress (horizontal)
- Cómo personalizar enlaces por css
- Cómo personalizar subrayado de los enlaces por css
- Crear sombras con css
- Qué son las pseudo clases de css (aplicado a WordPress)
- Pseudo clase :nth-child en css
- Qué son y cómo usar los pseudo elementos Before y After
- WordPress responsive con Media Queries
Modificar WordPress con css
- Personalizar casillas o checkbox por css para que sean circulares
- Ocultar autor, fecha o categoría de las entradas del blog
- Limpiar o resetear las propiedades de css de un elemento html de tu web
- Impedir que tus visitantes seleccionen el texto de tu web para copiarlo (por css)
- Abrir todos los enlaces externos en una nueva pestaña por defecto
- Personalizar el color del texto que seleccionan tus visitantes
- Modificar las tablas de tu web con WordPress por css
- Qué clases de css vienen con el core de WordPress (y cómo modificarlas)
- Poner contenido en columnas con flex (en WordPress)
- Centrar listas por css en WordPress
- Centrar logo y menú de navegación en WordPress
- Personalizar el login de WordPress por código css
- Crear un botón de volver arriba (back to top) en WordPress sin usar plugin
- Cómo poner (cualquier) formulario en horizontal en WordPress
- Poner texto en vertical (de izquierda a derecha y al revés)
- Cambiar el color del menú de navegación activo en WordPress
- Dejar el menú fijo al hacer scroll en WordPress
- Ocultar el placeholder de los formularios al hacer click en el campo
- Crear listas numeradas personalizadas con css en WordPress
- Compartir código en tu blog (personalizando la etiqueta pre en WordPress)
- Ocultar cualquier elemento de tu web con CSS
- Modificar el css de una página específica de WordPress
- Añadir un botón al menú de tu web en WordPress
- Cómo añadir un widget de WordPress a la cabecera de tu web
- Modificar el formulario de comentarios de WordPress
- Cómo crear columnas desiguales con css
- Cómo crear una página de ancho completo en WordPress
- Cómo hacer que cualquier elemento ocupe el 100% de ancho
- Cómo cambiar el color de los puntos de las listas
- Ocultar autor, fecha o categoría de las entradas del blog
- Personalizar el color de las listas numeradas en WordPress
- Dejar fijo un elemento en la sidebar
- Poner un fondo a cualquier parte de tu web
Creaciones desde cero con css
- Crear enlaces para enviar emails, sms o llamar en WordPress
- Cómo crear medidores con progreso en html
- Crear una ventana modal sólo con css
- Cómo crear listas numeradas inversas en WordPress
- Crear un desplegable (acordeón) sólo con html en WordPress
- Crear un calendario con css (grid)
- Crear una línea de tiempo con html y css
- Crear 5 estrellas de valoración sin plugins (el método más fácil del mundo)
- Crear un slider con html y css (sin plugins)
- Galería estilo Pinterest (Masonry) con html y css en WordPress
- Crear una cinta (ribbon) en una esquina con css
- Crear testimonial con hover (texto apareciendo al pasar el ratón)
- Crear listas numeradas personalizadas con css en WordPress
- Cómo crear pop ups en WordPress (fácil y sin plugins)
- Contactar por WhatsApp desde WordPress y sin plugins
- Centrar elementos con css en WordPress (horizontal)
- Cómo crear una landing page con CSS en WordPress
- Cómo crear botones con CSS fácilmente
- Crear párrafos de introducción en WordPress
- Cómo crear un índice de contenidos en WordPress sin plugins
- Crear destacados o CTAs en WordPress sin plugins
- Cómo crear una tabla de precios en WordPress
- Pon una barra de notificaciones en la cabecera de tu web con WordPress
- Pon una barra de notificaciones en el footer de tu web con WordPress
- Cómo crear testimonios con css en WordPress
- Añadir botones de login y cerrar sesión al menú de WordPress
- Cómo crear una lista de posts y destacar el actual
- Crear listas con emoticonos
- Cómo crear tooltips sólo con html y css en WordPress
- Crear fondo con curvas (waves) sin page builders
Css aplicado a imágenes y vídeos
- Cambiar imagen al pasar por encima (editor de bloques)
- Ajustar fácilmente logos de tamaños diferentes con css
- Muestra una imagen como fondo de texto
- Lazy Loading manual de imágenes y iframes
- Aplica filtros a las imágenes de tu web por css
- Cambiar el cursor de tu web por una imagen
- Cambiar de imagen al pasar el ratón por encima (hover)
- Hacer cualquier imagen redonda (independientemente de sus proporciones)
- Centrar logo y menú de navegación en WordPress
- Girar imágenes con css
- Poner imagen de fondo de ancho completo en WordPress (responsive y usando sólo css)
- Cómo poner patrones SVG como fondos
- Poner un vídeo de fondo en WordPress sin plugins (sólo css)
- Galería estilo Pinterest (Masonry) con html y css en WordPress
- Centrar completamente una imagen (vertical y horizontal)
- Cómo dar transparencia a las imágenes en WordPress
- Cómo añadir y usar iconos de Font Awesome en WordPress
- Cómo crear una galería de imágenes responsive con css
- Centrar imágenes y otros elementos con css en WordPress (horizontal)
Css en el editor de bloques (Gutenberg)
- Añadir estilos por css a los bloques de Gutenberg
- Crear un botón que muestre iconos de redes sociales (Gutenberg)
- Mostrar texto al pasar por encima de imagen (editor de bloques)
- Cambiar imagen al pasar por encima (editor de bloques)
- Cambiar logo en la edición a pantalla completa de Gutenberg
- Diseñar listas con css para usar en el editor de WordPress Gutenberg cuando quieras
- Crear destacados con el editor de Gutenberg y css
- Invertir orden de las columnas en dispositivos móviles usando Gutenberg y un poco de css
- Crear una tabla de precios con las columnas de Gutenberg
Efectos y animaciones con css
- Animación de texto con css: brillo
- Animación de texto con css: borde con relleno animado
- Resaltar texto con html en WordPress (y personalizarlo)
- Efecto máquina de escribir (texto escribiéndose solo) por css en WordPress
- Personalizar el color del texto que seleccionan tus visitantes
- Ocultar parte de un texto en una caja redimensionable
- Cambiar de imagen al pasar el ratón por encima (hover)
- Animaciones con css (la magia de los keyframes)
- Crear bordes especiales para tus imágenes de WordPress
- Zoom al pasar el ratón por encima de cualquier cosa (imagen, grupo de elementos…)
- Crear una línea de tiempo con html y css
- Clearfix: aclarar después de un grupo de elementos
- Cómo añadir notificaciones flotantes al menú de WordPress [Sin Plugins]
- Cómo conseguir scroll suave para enlaces dentro de la misma página
- «Truco» para crear gradientes de cualquier color fácilmente
- Efecto de texto borroso con css
- Cómo crear degradados con css en WordPress
- Cómo hacer el efecto parallax en cualquier theme de WordPress
Modificar WooCommerce con css
- Mostrar en horizontal las pestañas de la página de mi cuenta de WooCommerce
- Cambiar texto del botón «añadir al carrito» de WooCommerce
- Mostrar etiqueta de producto agotado en WooCommerce
Personalizar plugins de WordPress con css
- Personalizar ventana de login de LearnDash
- Hacer responsive la tabla de ofertas de trabajo de WP Job Manager
- Cómo personalizar por css la cuadrícula de cursos de LearnDash
- Personalizar formularios de WPForms a medida y controlando cada detalle
- Personalizar formularios de Contact Form 7 por css
Trucos con css
- Usar Stylebot para editar tu web por css visualmente
- Cómo subrayar texto por css en tu web con WordPress
- Hacer enlaces no clicables por css
- Personalizar casillas o checkbox por css para que sean circulares
- Usa :not para excluir la aplicación de css a clases o elementos
- Muestra una imagen como fondo de texto
- Impedir que tus visitantes seleccionen el texto de tu web para copiarlo (por css)
- Cómo saber qué cookies usa mi web
- «Truco» para crear gradientes de cualquier color fácilmente
- Cómo conseguir scroll suave para enlaces dentro de la misma página
- Contactar por WhatsApp desde WordPress y sin plugins
- Registrar Google Fonts en WordPress de forma manual
- Clearfix: aclarar después de un grupo de elementos
- Usar generadores de css para personalizar tu web con WordPress
- Aplicar sombra a una silueta por css
- Añade una sombra el comienzo tu web
- Personalizar la barra de scroll de tu web con WordPress
- Evitar zoom al pulsar un campo desde móvil