Hay en la red, diferentes recursos, sitios web, o portales que te regalan código grátis para que puedas implementarlo de forma fácil en tus proyectos personales, para que puedas aprender a desarrollar, o por qué no, utilizar en el proyecto de algún cliente. Uno de estos sitios web es CodyHouse. Además de darte la posibilidad de aprender sobre HTML, CSS y JavaScript, en CodyHouse puedes bajar una plantilla base, o trozos de código que te pueden ayudar a entender la estructura de una página web, o una aplicación web. Es recomendable que ya tengas conocimiento básico de desarrollo web.
¿Qué es CodyHouse?
CodyHouse es una biblioteca gratis de código HTML, CSS y JS.
Te dejo cinco ejemplos de los recursos disponibles en CodyHouse, que puedes utilizar en tu proximo proyecto. Recuerda que en el sitio web de CodyHouse puedes encontrar la documentación.
Fixed Background Effect
Image credits: CodyHouse
Fixed Background Effect es una plantilla que aprovecha las ventajas de la propiedad “background-attachment” de CSS para crear el efecto de fondo fijo (fixed background). El truco es tener el mismo elemento en la misma posición, en todas las imágenes de fondo para que cuando desplaces, todo se mueva excepto el elemento. Las imágenes de fondo necesitaran tener las mismas dimensiones. Esta plantilla funciona en todos los navegadores modernos, pero la opción “background-attachment: fixed” no funciona correctamente en los dispositivos, o navegadores de menor dimensión. Siempre puedes utilizar matchMedia para detectar tu dispositivo/navegador y adaptar el CSS.
También vale la pena ver la plantilla “Alternate Fixed & Scroll Backgrounds”. En que también se utiliza la propiedad “background-attachment:fixed”.
Contact Form
¿Necesitas integrar un formulario semantico, sencillo y personalizable de forma rápida en tus proyectos web? Contact Form puede ser la solución. Este es un formulario de contacto responsive que incluye los elementos de los formularios web más comunes: botones de radio, casillas de verificación, listas desplegables e incluso mensajes de error. Me parece muy interesante la solución que utilizan para los placeholders cuando estás escribiendo alguna cosa en el formulario. Utilizando el concepto de Etiquetas flotantes, con una pequeña animación, los placeholders se transforman en etiquetas del formulario.
Product Preview Slider
Product Preview Slider es otra combinación de HTML+CSS+JS del equipo de CodyHouse que me parece una muy buena idea. Product Preview Slider esta pensado para un listado de productos en una tienda online. Con esta implementación puedes tener un slider sencillo y con él ver más imágenes, o variaciones de un mismo producto sin tener que acceder a la “ficha” del producto. Además de los botones de navegación del slider, pasando el ratón sobre la imagen, puedes ver en miniatura la imagen siguiente, o anterior. También puedes pulsar en esta imagen en miniatura para navegar por las variaciones.
El contenedor principal de los botones del slider, utilizan la propiedad “position:absolute”, lo que puede hacer que no funcione en navegadores de menor dimensión, pero puedes navegar pulsando en las imágenes (anterior y siguiente). Siempre puedes jugar tu mismo con el CSS y media queries.
FAQ Template
FAQ Template es una plantilla completa para integrar una sección de “Preguntas frecuentes” en tu proyecto. Las preguntas y respuestas están agrupadas por categorías y la navegación es sencilla. Como en las plantillas anteriores, en CodyHouse puedes encontrar la información que necesites para cambiar el código e información según tus necesidades.
Vertical Timeline
Otra de las plantillas interesantes y que están disponibles de forma gratuita en CodyHouse es el Vertical Timeline. Vertical Timeline es una “línea de tiempo“ fácil de personalizar y responsive. En la línea de tiempo puedes tener el tipo de información y formato que quieras. Además de, obviamente, adaptar los estilos a los de tu propio proyecto. Para las animaciones, el equipo de CodyHouse utilizó CSS3 y JQuery.
Algunas de las herramientas utilizadas por el equipo de CodyHouse
En CodyHouse puedes encontrar muchas más ideas, código, efectos y plantillas de HTML,CSS y JS que puedes implementar en tus proyectos. Además en las páginas de cada uno de los recursos puedes participar con comentarios y leer los comentarios de los demás. ¿Crees que hay mejor forma de aprender?
