Proyectos

PROYECTO EN CONSTRUCCIÓN

Domina la Web con Mini Proyectos

Una colección de pequeños proyectos para que practiques HTML, CSS y JavaScript. Mejora tus habilidades desarrollando proyectos.

HEX Generator

Crea un generador random de colores en fromato hexadecimal.

HTML
CSS
JS

Demo

Código

RGB Generator

Crea un generador random de colores en formato RGB.

HTML
CSS
JS

Demo

Código

Calculator

Crea una calculadora básica con HTML, CSS y JS.

HTML
CSS
JS

Demo

Código

To-Do list

Crea un crud básico de tareas por hacer.

HTML
CSS
JS

Demo

Código

Letter counter

Crea un contador de caracteres.

HTML
CSS
JS

Demo

Código

Count down

Crea un temporizador básico.

HTML
CSS
JS

Demo

Código

Carousel

Crea un carousel de imágenes básico.

HTML
CSS
JS

Demo

Código

Image loading

Crea un revelador de imágenes.

HTML
CSS
JS

Demo

Código

Pointer move

Crea una sombra detras del puntero del mouse.

HTML
CSS
JS

Demo

Código

Grid background

Crea una imagen de fondo con formas de cuadrados.

HTML
CSS

Demo

Código

Typing effect

Efecto escritura.

HTML
CSS
JS

Demo

Código

Horizontal scroll

Scroll horizontal en lista de usuarios.

HTML
CSS

Demo

Código

Bottom sheet

Crea una hoja inferior, ventana que se levanta desde la parte inferior (Desktop - Mobile)

HTML
CSS
JS

Demo

Código

Searching text

Busca palabras o partes de las mismas en un párrafo

HTML
CSS
JS

Demo

Código

Background video

Pon un video como background en tu web sin necesidad de js.

HTML
CSS

Demo

Código

Send button animation

Animación sobre botón de enviar.

HTML
CSS

Demo

Código

Infinity scroll

Infinity scroll sobre una linea de cards.

HTML
CSS

Demo

Código

Infinity scroll page

Uso de infinity scroll en una web.

HTML
CSS

Demo

Código

Infinity scroll page

Uso de infinity scroll en una web.

HTML
CSS

Demo

Código

Instagram navbar

Clon de navbar usado en instagram.

HTML
CSS

Demo

Código

Login - register

HTML
CSS
JS

Demo

Código

Theme toggle

Cambia entre tema dark, light o el definido en tu sistema.

HTML
CSS
JS

Demo

Código

Title observer

Usa observers para saber en que sección de un texto está leyendo el usuario.

HTML
CSS
JS

Demo

Código

OTP code verification

Página para verificación OTP.

HTML
CSS
JS

Demo

Código

Text editor

Crea un editor de texto básico.

HTML
CSS
JS

Demo

Código

Button hover effect

Efecto sobre borde de boton al hacer hover sobre el.

HTML
CSS

Demo

Código

Glassmorphsim effect

Efecto vidrio sobre card y hover.

HTML
CSS

Demo

Código

Floating menu

Menu flotanate animado.

HTML
CSS

Demo

Código

Landing page Kate

Landing page básica.

HTML
CSS

Demo

Código

Landing page animals

Landing page sobre animales. Efecto para cambio de imagen.

HTML
CSS
JS

Demo

Código

Quiz app

Crea una página para realizar un quiz corto.

HTML
CSS
JS

Demo

Código

Basic sidebar

Crea un sidebar básico colapsable.

HTML
CSS
JS

Demo

Código

Stacked images

Listado de imágenes en pila.

HTML
CSS

Demo

Código

Google search bar

Clon de la barra de búsqueda de google.

HTML
CSS

Demo

Código

Card

Card con temática de Conan.

HTML
CSS

Demo

Código

Landing page de KFC

Simulación de landing page para KFC.

HTML
CSS
JS

Demo

Código

Animated menu

Menu animado para navegación.

HTML
CSS

Demo

Código

Card

Card con temática de nike.

HTML
CSS
JS

Demo

Código

Landing page de netflix

Landing page de película de netflix.

HTML
CSS

Demo

Código

Card

Card con efecto hover.

HTML
CSS

Demo

Código

Animated waves

Animación de footer con olas.

HTML
CSS

Demo

Código

Music card

Card para tema musical.

HTML
CSS

Demo

Código

Card

Card con efecto hover.

HTML
CSS

Demo

Código

Toggle theme

Crea un switch para cambiar de tema en tu web.

HTML
CSS

Demo

Código

Shoes mousehover

Card con efecto mousehover.

HTML
CSS
JS

Demo

Código

Menu mousehover

Menu con efecto mousehover para cambio de contenido.

HTML
CSS
JS

Demo

Código

Slider video

Crea un slider de videos.

HTML
CSS
JS

Demo

Código

Mouse Bear

Oso que sigue harra de miel.

HTML
CSS
JS

Demo

Código

Keyboard game

Juego para practicar escritura con el teclado.

HTML
CSS
JS

Demo

Código

Modal dropdown

Modal para listas. Este es un modal que se adapta a la posición del elemento que lo ejecuta. No se muestra en el centro sino en uno de los costados del elemento que lo muestra.

HTML
CSS
JS

Demo

Código

Modal Window

Ventana modal para informacion general.

HTML
CSS
JS

Demo

Código

Button click animation

Botón con animación al dar click sobre él.

HTML
CSS
JS

Demo

Código

Delegación de eventos

Práctica de JavaScript para entender como funciona la delegaciónd e eventos, aprovechando el bubbling.

HTML
CSS
JS

Demo

Código

Input animation

Input con animación de borde y label.

HTML
CSS

Demo

Código

Border animation

Card con animación de borde y uso de custom properties. Crea una animación en la que el borde de tu card rote, mostrándose en dos trozos.

HTML
CSS

Demo

Código

Border animation

Card con animación de borde y uso de custom properties. Crea una animación en la que el border de tu card rote, pero además de esto que la sombra de la misma rote junto con tu borde.

HTML
CSS

Demo

Código

Border animation

Card con animación de borde y uso de custom properties. Realiza una animación sobre el borde de tu card, cambiando el ángulo del background y el nivel de transparencia del mismo.

HTML
CSS

Demo

Código

Circular grid background

Crea un background para tu web con forma de grilla, y degradado circular. La idea es que dicho background sea transparente para que se vean los colores de fondo.

HTML
CSS

Demo

Código

Linear grid background

Crea un background para tu web con forma de grilla, y degradado vertical. La idea es que dicho background sea transparente para que se vean los colores de fondo.

HTML
CSS

Demo

Código

Mouse tracking

Crea un efecto sobre tu cursor, una sombra lo sigue por donde quiera que se mueve, y cambia sus estilos al hacer hover sobre algún objeto específico.

HTML
CSS
JS

Demo

Código

Background animation

Dale un estilo diferente a tus background con animaciones. Simula esta tres figuras floando en el fondo de tu página.

HTML
CSS

Demo

Código

AI aura

Crea la animación de AI aura. Un borde interno (degradado) sobre tu pantalla principal, el cual da a entender que la IA está interactuando con tu dispositivo.