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.

Captura de pantalla del proyecto HEX Generator

HEX Generator

Crea un generador random de colores en fromato hexadecimal.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto RGB Generator

RGB Generator

Crea un generador random de colores en formato RGB.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Calculator

Calculator

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

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Pointer move

Pointer move

Crea una sombra detras del puntero del mouse.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Grid background

Grid background

Crea una imagen de fondo con formas de cuadrados.

  • HTML
  • CSS
Captura de pantalla del proyecto Horizontal scroll

Horizontal scroll

Scroll horizontal en lista de usuarios.

  • HTML
  • CSS
Captura de pantalla del proyecto Bottom sheet

Bottom sheet

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

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Searching text

Searching text

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

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Background video

Background video

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

  • HTML
  • CSS
Captura de pantalla del proyecto Infinity scroll

Infinity scroll

Infinity scroll sobre una linea de cards.

  • HTML
  • CSS
Captura de pantalla del proyecto Login - register

Login - register

Login y registro usando local storage.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Theme toggle

Theme toggle

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

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Title observer

Title observer

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

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Button hover effect

Button hover effect

Efecto sobre borde de boton al hacer hover sobre el.

  • HTML
  • CSS
Captura de pantalla del proyecto Landing page animals

Landing page animals

Landing page sobre animales. Efecto para cambio de imagen.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Google search bar

Google search bar

Clon de la barra de búsqueda de google.

  • HTML
  • CSS
Captura de pantalla del proyecto Landing page de KFC

Landing page de KFC

Simulación de landing page para KFC.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Landing page de netflix

Landing page de netflix

Landing page de película de netflix.

  • HTML
  • CSS
Captura de pantalla del proyecto Toggle theme

Toggle theme

Crea un switch para cambiar de tema en tu web.

  • HTML
  • CSS
Captura de pantalla del proyecto Menu mousehover

Menu mousehover

Menu con efecto mousehover para cambio de contenido.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Keyboard game

Keyboard game

Juego para practicar escritura con el teclado.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Modal dropdown

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
Captura de pantalla del proyecto Button click animation

Button click animation

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

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Delegación de eventos

Delegación de eventos

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

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Border animation

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
Captura de pantalla del proyecto Border animation

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
Captura de pantalla del proyecto Border animation

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
Captura de pantalla del proyecto Circular grid background

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
Captura de pantalla del proyecto Linear grid background

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
Captura de pantalla del proyecto Mouse tracking

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
Captura de pantalla del proyecto Background animation

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
Captura de pantalla del proyecto AI aura

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.

  • HTML
  • CSS
Captura de pantalla del proyecto Scroll to top button

Scroll to top button

Crea un botón que facilite el scroll hacia arriba. Cuando pases cierta profundidad en tu web, muestra un boton que permita reinicar el scroll.

  • HTML
  • CSS
  • JS
Captura de pantalla del proyecto Flip card effect

Flip card effect

Crea un efecto de carta giratoria en 3D.

  • HTML
  • CSS
Captura de pantalla del proyecto Memory game

Memory game

Clásico juego de memoria. Encuentra las parejas de tarjetas y practica tu lógica de programación. Tip: ¿Que es el algoritmo Fisher–Yates?

  • HTML
  • CSS
  • JS

Desarrollado por Diego Chaverra