Screencasts de video 2024, Diciembre

# 144: Construyendo un juego JavaScript / Canvas con Kyle Simpson - Trucos CSS

# 144: Construyendo un juego JavaScript / Canvas con Kyle Simpson - Trucos CSS

Kyle Simpson, en parte en un esfuerzo por rejuvenecer su entusiasmo por trabajar con JavaScript, comenzó a construir un juego. El no es realmente un "juego"

# 063: Mocking up BuySellAds Zones - Trucos CSS

# 063: Mocking up BuySellAds Zones - Trucos CSS

Ahora que sabemos exactamente con qué zonas estamos trabajando, volvemos a Photoshop y nos burlamos de cómo queremos que se vean estas zonas publicitarias. Tenemos un precedente de "

# 145: Temas infantiles de WordPress con Lara Schenck - Trucos CSS

# 145: Temas infantiles de WordPress con Lara Schenck - Trucos CSS

En este video, Lara Schenck y yo nos emparejamos, y ella me enseña todo sobre temas para niños en WordPress. ¡Es como un podcast que también ves! Nosotros directamente "

# 061: Encabezado personalizado para los foros, Parte 3 - Trucos CSS

# 061: Encabezado personalizado para los foros, Parte 3 - Trucos CSS

¡Lo único que falta ahora en el encabezado de los foros de aduanas es la parte que realmente dice "Foros"! Nick ilustró una mano sosteniendo un cartel que significaba "

# 146: Obtener más de Google Analytics con Philip Walton - Trucos CSS

# 146: Obtener más de Google Analytics con Philip Walton - Trucos CSS

Me emparejo con Philip Walton (que trabaja para Google en Google Analytics) en este screencast. Complementa el estudio de caso que elaboramos: Aprender a usar "

# 064: Implementación de zonas BuySellAds - Trucos CSS

# 064: Implementación de zonas BuySellAds - Trucos CSS

Tenemos una maqueta de cómo queremos que se vean nuestras zonas BuySellAds, así que empecemos a construirlo de verdad. El sitio web BuySellAds proporciona el código que necesitamos "

148: Disposición de las cosas (HTML y Flexbox) con Dee Gill - Trucos CSS

148: Disposición de las cosas (HTML y Flexbox) con Dee Gill - Trucos CSS

En este screencast de emparejamiento, salgo con Dee Gill. Echamos un vistazo a algunas cosas de diseño para una nueva aplicación en la que está trabajando: Tinge. Ella tenía una maqueta de diseño "

# 065: Adición de anuncio de barra lateral BuySellAds - Trucos CSS

# 065: Adición de anuncio de barra lateral BuySellAds - Trucos CSS

Tenemos otra zona BSA para integrarnos al sitio. Este debería ser un poco más fácil porque ya tenemos JavaScript en su lugar y es simplemente "

# 147: Iniciar un formulario de comentarios basado en React - Trucos CSS

# 147: Iniciar un formulario de comentarios basado en React - Trucos CSS

En este screencast de emparejamiento, Sarah Drasner se une a mí y me guía a través de algunos de mis primeros aprendizajes de React. Abordamos algunos estilos del "mundo real" "

# 070: HTML en el pie de página - Trucos CSS

# 070: HTML en el pie de página - Trucos CSS

Con nuestro diseño para el pie de página listo para usar en Photoshop, podemos comenzar a construirlo en nuestra maqueta de HTML y CSS estático. El primer paso es dar "

# 149: Introducción rápida al nodo de laboratorio de patrones con Brian Muenzenmeyer - Trucos CSS

# 149: Introducción rápida al nodo de laboratorio de patrones con Brian Muenzenmeyer - Trucos CSS

En este screencast me emparejo con Brian Muenzenmeyer que, entre otras cosas, trabaja en Pattern Lab. Específicamente, la versión Node de Pattern Lab, junto con "

# 066: Photoshopping del pie de página, parte 1 - Trucos CSS

# 066: Photoshopping del pie de página, parte 1 - Trucos CSS

¡Nos embarcamos en el gran viaje que es el pie de página! CSS-Tricks siempre ha tenido un gran pie de página elegante y este diseño no será una excepción. No es puramente "

# 14: Conversión de una maqueta de Photoshop: Parte dos, episodio tres - Trucos CSS

# 14: Conversión de una maqueta de Photoshop: Parte dos, episodio tres - Trucos CSS

Terminamos la conversión de la maqueta aquí en el episodio tres. Creamos el "área de artículo" y la "barra lateral" (¡denominación de clase semántica!), Y luego borramos el "

# 068: Photoshop en el pie de página, Parte 3 - Trucos CSS

# 068: Photoshop en el pie de página, Parte 3 - Trucos CSS

Pasamos a algunos negocios más de Photoshoppin en este screencast, presentando el pie de página más abajo con enlaces a mis otros dos proyectos más importantes, CodePen

# 152: Carga de fuentes con Zach Leatherman - Trucos CSS

# 152: Carga de fuentes con Zach Leatherman - Trucos CSS

¡Es hora de otro screencast de emparejamiento! Esta vez tengo a Zach Leatherman, de Filament Group. Zach ha investigado mucho, ha escrito y ha hablado "

# 067: Photoshopping del pie de página, Parte 2 - Trucos CSS

# 067: Photoshopping del pie de página, Parte 2 - Trucos CSS

Estamos trabajando para crear un diseño para el pie de página en Photoshop. Recordatorio rápido: trabajo en Photoshop porque me siento más creativo allí antes de saltar "

# 151: Los primeros minutos con texto sublime - Trucos CSS

# 151: Los primeros minutos con texto sublime - Trucos CSS

Sublime Text es un editor de código bastante popular. A pesar de su popularidad y todas las cosas buenas que he oído sobre él, todavía me apoyo mucho en otros "

# 069: Photoshopping del pie de página, Parte 4 - Trucos CSS

# 069: Photoshopping del pie de página, Parte 4 - Trucos CSS

Este es el último trabajo de Photoshop que haremos específicamente sobre el pie de página antes de pasar a construirlo. En este screencast nosotros "

# 150: Hola diseñadores, si solo saben una cosa sobre JavaScript, esto es lo que les recomendaría - Trucos CSS

# 150: Hola diseñadores, si solo saben una cosa sobre JavaScript, esto es lo que les recomendaría - Trucos CSS

A veces, para comenzar un viaje hacia el aprendizaje de algo enorme y complejo, es necesario aprender algo pequeño y simple. JavaScript es enorme y complejo, pero "

# 071: CSS en el pie de página, parte 1 - Trucos CSS

# 071: CSS en el pie de página, parte 1 - Trucos CSS

Con la estructura HTML para el pie de página en su lugar, tenemos lo que necesitamos para comenzar a diseñar y hacer que este pie de página se vea como lo que diseñamos en Photoshop ".

# 158: Menú del botón Expando - Trucos CSS

# 158: Menú del botón Expando - Trucos CSS

Vi una toma de Dribbble el otro día de Eli Brumley que tuvo un efecto interactivo genial. Un simple botón circular azul, cuando se hace clic, se expande en un pequeño "

# 077: Encabezado personalizado para fragmentos - Trucos CSS

# 077: Encabezado personalizado para fragmentos - Trucos CSS

Ha llegado la cabeza de los fragmentos, esta vez de Reagan Ray. Pasamos un poco de tiempo en Photoshop, esta vez barajando las cosas un poco para asegurarnos de que "

155: Imágenes receptivas, WordPress y Cloudinary - Trucos CSS

155: Imágenes receptivas, WordPress y Cloudinary - Trucos CSS

Eric Portis se une a mí para profundizar en el mundo de las imágenes receptivas. Empezamos por lo básico. Las imágenes receptivas son específicamente imágenes en HTML y existen "

# 073: CSS en el pie de página, Parte 3 - Trucos CSS

# 073: CSS en el pie de página, Parte 3 - Trucos CSS

En este screencast nos enfocamos en las líneas debajo de los enlaces en la parte superior del pie de página. Nos tropezamos un poco al averiguar qué cosas deberían "

# 154: Un sitio de WordPress para niños con póster - Trucos CSS

# 154: Un sitio de WordPress para niños con póster - Trucos CSS

CSS-Tricks en sí es un sitio de WordPress, y uno en el que WordPress encaja perfectamente. Entre cosas como el sistema de inicio de sesión y permisos, blogs, "

# 074: CSS en el pie de página, parte 4 - Trucos CSS

# 074: CSS en el pie de página, parte 4 - Trucos CSS

En este screencast final de la construcción del pie de página, trabajamos en el pie de página inferior donde están las áreas de CodePen y ShopTalk. Tenemos que cambiar el HTML a "

# 153: Empezando con CSS Grid - Trucos CSS

# 153: Empezando con CSS Grid - Trucos CSS

Parece que CSS Grid ha estado apareciendo desde hace mucho tiempo, pero ahora parece estar llegando a un punto en el que la gente habla cada vez más sobre ello ".

# 076: Encabezado personalizado para la sección de video - Trucos CSS

# 076: Encabezado personalizado para la sección de video - Trucos CSS

Ha llegado la ilustración del encabezado personalizado para la sección de videos, esta vez de Alyssa Nassner. Dedicamos un poco de tiempo a organizar el archivo de Photoshop y "

# 15: Introducción a Firebug - Trucos CSS

# 15: Introducción a Firebug - Trucos CSS

Firebug es una extensión de Firefox esencial para diseñadores y desarrolladores web. Puede orientar rápidamente cualquier elemento de una página para ver el marcado, el "

# 075: Encabezado personalizado para el almanaque - Trucos CSS

# 075: Encabezado personalizado para el almanaque - Trucos CSS

Ha entrado el cabezazo para el Alamanc, esta vez de Giovanni Difeterici. Usamos muchas técnicas que ya hemos establecido para comenzar "