CodyHouse

CodyHouse

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?]]>

Leave A Reply

Tu dirección de correo electrónico no será publicada.

*

Déjate sorprender...

Gestionar el consentimiento de las cookies

Para ofrecerte la mejor experiencia de uso, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.

Funcional

Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.

Estadísticas

El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.

Marketing

El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.