Screencasts de video 2024, Diciembre
En el que muestro y explico los conceptos básicos de lo que ha llegado a significar el "diseño web adaptable". Luego voy por todos lados y muestro ejemplos, relacionados "
Introducimos el concepto de consultas @media en CSS. Mucho de lo que el uso de Sass en este proyecto nos permite hacer es permanecer SECOS (no lo repitas). Lo hicimos"
Simplemente guarde el sitio web desde el navegador (en Firefox, obtiene un archivo .html y todos los recursos), suéltelo en su carpeta pública y use el botón derecho del ratón "
En este screencast súper rápido, usamos MAMP para configurar una URL que podemos usar para el desarrollo local. Esto es útil por varias razones: podemos vincular a "
En el que tomo un ejemplo real de un lugar que sabía que usar sprites sería una buena idea, crear el sprite a mano en Photoshop (mi método preferido) y "
El diseño del sitio se perfila como una cuadrícula. Nuestros módulos se distribuirán de forma muy limpia en una cuadrícula. ¿Pero no son las cuadrículas complejas y extrañas? Y tal vez nosotros "
Hay muchas herramientas para mostrarle capturas de pantalla de sitios web en diferentes navegadores para ayudar con las pruebas. Pero falta una captura de pantalla de muchas maneras: no "
Podríamos escribir nuestro propio Sass @mixins para ayudar con las cosas de CSS3 (como degradados), pero ya existe un marco Sass llamado Compass que "
El tema predeterminado de WordPress en el momento de este screencast es TwentyEleven, un diseño maravillosamente simple y receptivo. Es decir, hasta que publiquemos un "
Ahora que estamos ejecutando un dominio local personalizado, podemos usar PHP. La "P" en MAMP es para "PHP" =). Usar PHP significa que podemos usar incluye. Por ejemplo: Nuestro "
LiveReload es una aplicación de barra de menú solo para Mac que es bastante útil para los desarrolladores web. Solo dígale que mire una carpeta específica, y cuando se guarda un archivo, el "
Antes de hacer un trabajo de tipografía, pensé que arreglaríamos lo molesto en el que las imágenes están saliendo del área del artículo y de la cuadrícula. Usando"
Chartwell es una fuente específica para crear gráficos circulares, gráficos de barras y gráficos de líneas simples y hermosos. Es tan simple como escribir ecuaciones simples "
Continuando con el concepto de "No pienses demasiado en las cuadrículas", conseguimos que las canaletas funcionen en la cuadrícula simplemente usando un relleno simple. Mantenemos el número de relleno "
Hay tres tipos diferentes de diseños para sitios web: ancho fijo, ancho fluido y ancho elástico. En este screencast vemos estos tres "
Typecast (en versión beta en el momento de esta filmación) es una aplicación web realmente genial para jugar con la tipografía web. Te brinda una excelente interfaz para jugar "
No hay nada que temer en este nuevo mundo de preprocesamiento. Las aplicaciones nativas lo hacen tan fácil que debería ser una parte vital de cualquier moderno "
Creo que es muy bueno tener un archivo individual (.scss) que sea para la gran mayoría de la tipografía del sitio. Normalizar tiene bastante tipografía "
En este screencast, muevo mi propio sitio web personal de mis antiguas formas de edición FTP en vivo a un sistema controlado de versión adecuado, incluida la implementación. No tengo "
Ahora que tenemos un área de publicación de blog con la que trabajar, realmente podemos entrar en la tipografía de publicación de blog. Podría decirse que es la tipografía más importante del sitio, ya que "
Esta es una descripción general rápida para principiantes de los diferentes valores de posición de CSS. En pocas palabras: relativo le permite "empujar" y deja el elemento "
Hemos trabajado un poco en los encabezados, pero profundizaremos más en ellos en este screencast. Los encabezados son un aspecto muy importante de cualquier sitio. Bien hecho,"
CodePen es una aplicación para compartir y jugar con el código de la interfaz. Lo hice con algunos amigos míos: Alex Vazquez y Tim Sabat. En este típico "
Acabamos de instalar Prism.js y lo hicimos funcionar. En este screencast encontramos un tema llamado Tomorrow Theme e integramos sus colores en la sintaxis "
CodePen PRO ofrece una gran cantidad de funciones nuevas. Puedes leer sobre ellos, pero mucho mejor mostrarlos, ¿verdad? : Y esto es sólo el principio."
Desde que tengo memoria, utilicé Google Code Prettify para aplicar el resaltado de sintaxis en el bloque de código en CSS-Tricks. Ya sabes, en una línea como "
Incluso si el diseño de un sitio es simple como un área de contenido principal a la izquierda y una barra lateral a la derecha, eso es una cuadrícula. Hay nuevos métodos de diseño en CSS "
Tenemos estas ocho pestañas de navegación de nivel superior, pero Inicio es la única que "funciona". Para tener algunas páginas con las que trabajar, eliminamos algunas páginas para "
Les presento cuatro cosas realmente simples que puede hacer para que sus sitios web sean más rápidos. Nada tan complejo como crear sprites de imágenes (que no es eso "
En este video súper rápido, agregamos todo el CSS necesario para asegurarnos de que el elemento de la página actual en la navegación principal se resalte cuando esa página es "